ＣＳＳの仕様を決めているのは、ブラウザメーカーではありません。Ｗ３Ｃ（ワールドワイドウェブ・コンソーシアム）の中で活動している、ＣＳＳのワーキンググループ「ＣＳＳＷＧ」です。Ａｐｐｌｅ、Ｇｏｏｇｌｅ、Ａｍａｚｏｎなどのエンジニアからなる、１００名を超える組織で、日本人も何名か参加しています。「背景と囲み線」チーム、「フレックスボックス」チーム、「フォント」チームなど、１００余りの領域に分かれて活動しています。
この組織の良いところは、議論のやりとりを組織外の人も見られることです。www-style-request@w3.orgにメールを送ると、www-style@w3.orgからメールが届くようになります。「確かにこういうプロパティは今までなかった、ぜひ実現してほしい」など、最新の議論を知れるので楽しめます。
Ｗ３ＣのＣＳＳＷＧが仕様を決めても、すぐに使えるようになるわけではありません。エディタメーカーが新機能として作りこまねばなりませんし、ブラウザメーカーが新しいＣＳＳの書き方を無事見られるようにする必要もあります。エディタは未対応でも構いませんが、ブラウザが未対応だと困ります。一般に、主要なブラウザが未対応のＣＳＳは、開発で利用を見送ります。
ブラウザがＷ３Ｃの仕様を満たしているかどうかチェックできるサイトがあります。新しいＣＳＳを利用する判断ができます。
上のオレンジ色の欄に、知りたいプロパティや値の名前を入れると、対応状況をすぐに検索してくれます。ブラウザの名前が並びます。緑は対応済、黄緑は一部未対応、赤色は全く未対応です。緑だらけであれば採用しますが、赤だらけでは見送ります。
ＣＳＳＷＧの議論を読んでいくと、いくつかの傾向が掴めます。今まで決まり文句で書いていた数行を、一行でもっと簡単に書ける。表現したいことは単純なのに、トリッキーなコードを書くしかなかったものを、一行でもっと簡単に書ける。今まで誰も考えてこなかった表現を、一行でもっと簡単に書ける。
つまり、一行でもっと簡単に書けるようになるのです。例えば、
position: sticky;
ナビゲーションを上部や下部に固定したり、サイドに問合せ先を固定したりできます。今まで少なくとも３行を書く必要がありましたが、１行で済みます。
wrap-flow: both;
「中央フロート」を実現します。コンテンツを要素の両側に流し込めます。もちろん右(end)か左(start)にも流し込めるうえ、clearfix（フロートの解除）も不要です。
flow-into: content-name;
flow-from: content-name;
Ｗｏｒｄにおける「テキストボックスのリンク」です。コンテンツをページ内に分散して配置できます。
このように、未来のＣＳＳ開発者は、語彙こそ増やす必要はあるものの、細かな裏技を知らなくても、もっと恵まれて開発できるようになります。
プログラミング経験のある方なら、ＣＳＳにはif文もないし、変数もない、だからＣＳＳはプログラミング言語ではない。との考えもあります。しかし、それは今では誤りだと思います。条件分岐や変数を駆使できるＣＳＳが登場しているのです。
ＳＣＳＳは、条件分岐を使えるうえ、ＣＳＳの括弧｛ ｝を入れ子にしてＨＴＭＬの入れ子を表現したり、頭に「$」を付けて変数にしたりできます。
$type: top;
main {
div {
@if $type == top {
padding: 10px;
} @else if $type == footer {
padding: 5px;
} @else {
padding: 15px;
}
}
}
ＳＣＳＳで書いたファイルは、ＣＳＳに変換してから、アップロードします。
ＣＳＳでウェブサイトのデザインテーマを決めることは時々難しいと感じられます。一からＣＳＳでデザインを書くことが面倒だと感じる開発者も多くいます。その方に向け、ＣＳＳでデザインをすでに書いてある便利なライブラリがあります。これを使うと、ライブラリで決めてあるセレクタをＨＴＭＬタグのクラス名として付け足すだけで、整ったウェブサイトができ上がります。
実習：Ｂｏｏｔｓｔｒａｐ
また、最近はＨＴＭＬタグ名を自分で任意に決められる技術が普及しつつあり、例えば、<pasobora>や<do-not-use>というタグを書いても動くため、ＨＴＭＬタグは自由に決められるようになっています。（初期値はdisplay: inline;です。）
ＣＳＳ３の次を待望している人には残念ですが、ＣＳＳの次世代版はＣＳＳ４という名称ではなく、「ＣＳＳ」という名称になる見込みです。今後もＣＳＳという名称になるとみられます。
Ｗ３ＣのＣＳＳＷＧは、いくつものチームに分かれています。チームには「Ｌｅｖｅｌ」（レベル＝バージョン）が割り当てられています。世界中の開発者たちから要望が集まれば、チームは活動し、新たに仕様を策定し、レベルを上げます。
ＣＳＳはチームごとに新しい仕様を決めるため、全体で新しいバージョンのＣＳＳを公表することはなくなりました。この仕組みなら、ＣＳＳの仕様が巨大化しても、細かい対応ができそうです。
よくあるＣＳＳの決まり文句を集めました。
参考：熟語集
ウェブ開発が上達する秘訣はあるでしょうか。絵や作文もそうですが、学ぶにはまず真似ることから。開発者がよく採る方法は「写経」と呼ばれます。ソースコードを写していくという方法です。ソースコードは簡単にコピーできてしまいますが、コピーせず、一文字ずつキーボードで入力していき、同じ動きが実現できたら、終わり。これを繰り返して上達したプログラマは多いです。
人間は繰り返すと考えるようになるもので、もっと楽するには、もっとよくするには、と次第にアイデアは尽きなく出てきます。そうなれば占めたもの。もう立派なプログラマです。
ウェブ開発者は、いきなりエディタに向かいません。まず設計図を用意します。サイトのアイデアを紙とペンで書き出し、取り込むデザインや機能を考えます。次に、ＰｏｗｅｒＰｏｉｎｔなどを使ってレイアウトを設計し、図面に起こします。さらに、それらをもとに、完成版に似た、ブラウザで動くサイトを作成します。
この設計過程を経て、開発を開始し、試験に問題がなければ運用を始め、保守や更新や小規模な改善を続けます。一見大変そうですが、考えたとおりに作れるようになると、実に楽しい仕事です。
Firefoxを開発するモジラ社のウェブサイト。技術書よりも詳しいと評判。日本語訳はボランティアが担当。
初心者にありがたい個人運営のウェブサイト。デザインも読みやすい。新しい技術の記事もあり、全部読めば初心者を脱せます。
上野にあるウェブ制作会社のウェブサイト。豊富なコンテンツは社員が書いている。その中からデザイナーズコラムをご紹介。
ＣＳＳの全プロパティをサンプルとともに網羅したウェブサイト。ＣＳＳの辞書として利用されている。
ウェブデザイン、特にユーザインターフェースに関するウェブサイト。ほぼ毎日更新がある。海外の最新技術記事の翻訳も掲載。
ウェブマーケティングの最新情報を集めたウェブサイト。このサイトのおかげでウェブマーケティングの本が売れないと評判。
ウェブ制作は職業柄、つい本に費用をかけてしまいがちです。できるだけウェブで探して読んでいければ安く済みます。検索語をうまく考えることができれば、初級の本を買わずに済みます。３０冊読むと一人前の腕になるといわれています。私は、書店に出向いて自分に合う本を選んでから、買うか節約するかを考えています。
ウェブデザインを学び始めたばかりの人にとっては、１冊に詳しくまとまっている本だと感じると思います。
ウェブデザインのアイデアが枯れたときに手元にあると安心。ヘッダーやフッター、見出しや配色など、パーツのサンプルデザイン集。
ウェブデザインに限らず、デザインの感覚を養うための、今最も信頼されている本。業界で著名なコンセント社が関わっています。
一読しただけで色のレパートリーを増やせる本。本のサイズは、手元に置いてキーボードが打てるよう、配慮されています。
デザインを学んだことのない人でも上達する４つのレイアウトルールを提唱した、世界的なロングセラー。
個人的には、こうした中上級者向けの本に挑戦することで力が付きました。ウェブに載っていない情報も得られました。