Cascading Style Sheet 略してCSS、日本語で"スタイルシート"と呼ぶ。好奇心からHPの作成を始めて10年以上になるが、いつも見よう見真似で試して、意図したとおりに機能すれば良しとしてきた。系統だって勉強したことはない。だから、いまでもちょっとしたことでつまづくことがある。

今日きづいたのは、@import (url); は必ず先頭に書かないといけないということだ。サイト共通の基本的な要素を書いた後に、当該HP固有のスタイル(別ファイル)を@importしたら無効になった。基本要素を上書きするためには後に書くべきだと思ったからだ。

こうした勝手な推測で使うと意図と反した結果になる。規則をキチンと理解し、必要な知識を習得することが効率化につながるという事例だ。というわけで、CSSの基本を勉強しようと思う。

W3C国際標準化

ネット上のサイトやツール、解説ページによって、スタイルとスタイルシート、CSSは別の意味に使われるので注意が必要だ。自分でも混同して使ってきた。国際標準(W3Cという機関)で決められた用語(英語)を使うのがベストだが、日本語ではいろんな言い方になるので混乱する。

W3C(日本語サイト)の最新のWeb開発者用ドキュメント(2012/10/08公表)が、Web Platform Docs にある。まだAlphaバージョン(一般公開前の準備段階の版)だが、国際標準の概念Concepts, HTML, CSS, Javascript, SVGに関するドキュメントが整備(MediaWiki利用)されつつある。

W3C活動の最新のCSS情報は、CSS CURRENT STATUS にある。Draft(提案、草案)とRecommendations(以下、勧告とよぶ)がある。後者が、W3C Members(国際標準化委員)がレビューした結果のドキュメント(W3C勧告という)である。日本語サイトは慶応技術大学が中心になってW3C日本語ドキュメント作成に参加している。
※正確には、Working Draft(WD), Candidate Recommendation(CR), Proposed Recommendation(PR)などがあって、標準の成熟度に応じたドキュメントが存在する。

最新のCSS勧告

これが2012/10/17現在の最新版である。W3C CSS2の最新版は http://www.w3.org/TR/CSS2/ に公表される。これが原典(original source)と考えてよい。

ネット上のいろんなHP(特に日本語サイト)での説明は作成者の知識と主観に拠ったものなので、混乱と誤解を招く元になりかねない。私の経験では、"杜甫々"さんが1996年から開設している「とほほのWWW入門」がもっとも信頼が置けるサイトだろう。2012/04/12に「スタイルシート入門」がリニューアルされた。それでも、前述した@importの規則には触れていない。個人でW3C勧告の内容をフォローするのは困難だということだ。

世の中はHTML5/CSS3の流れに向かっており、ネット上でもいろんな教則本があるが、まだ信頼できるサイトはない。グーグル検索で上位に表示されるサイトでも、説明が不十分だったり記事が古かったり、まちがいがあったりするので注意が必要だ。

それもそのはずで、W3Cでもまだ勧告されていないし、HTML5 Specification (2012/10/11WD) に関連したページで"important bugs"が含まれている可能性があるという警告メッセージが表示されたりする。しかし事実上多くのブラウザがHTML5/CSS3に対応している。ただしブラウザ毎に仕様(実装implementation) が異なっているので注意が必要だ。たとえば、IE9最新版では、先頭に<!DOCTYPE html>を書かないとHTML5要素は無視されるが、Chrome/Firefox/Safariなどでは有効である。

CSS3
CSS Text Level 3 (最新2012/08/14)

WDが公表されている段階で、正式な勧告はされていない。W3Cで正式に勧告され、25のブラウザで実装テストされたのは、CSS2.1(2011/03/23)である。2012年10月時点では、CSS2.1に準拠するのがいいだろう。CSS3で追加・拡張された便利な機能については別途整理する。

BACK | BLOG | CLOSE