CSS講義 第1回

本日覚えていって欲しいこと

1. CSSの歴史
2. CSSは何のために存在するのか
3. CSSの仕様策定プロセス

CSSとは

• Cascading Style Sheets（カスケーディング・スタイル・シート)
• 1994年にHåkon Wium Lie(ホーコン・ウィウム・リー)氏により提唱された
• HTMLやXMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ
• Webページの見た目を調整する宣言的な言語
• スタイルの宣言には、Webページの見た目を決定するプロパティ(property)とその値(value)を含む

CSSはWebページの見た目(レイアウト・装飾)を指示する言語ということ。

CSSが広く実用されるより以前

HTML要素そのものや要素の属性で見た目を指定していました。

例1) <font> (HTML5で廃止)

<font size="1" color="#0000ff">この要素は廃止されました。CSSのfont-sizeプロパティやcolorプロパティを使用してください。</font>

例2) bgcolor 属性 (HTML5で廃止)

<table bgcolor="#0000ff">
  <tr>
    <th>bgcolor属性はHTML5で廃止になりました。</td>
    <td>CSSのbackground-colorプロパティを使用してください。</td>
  </tr>
</table>

例3) border 属性 (HTML5で廃止)

<img src="test.png" border="1" alt="border属性はHTML5で廃止されました。CSSのborderプロパティを使用してください。">

見た目を指示する役割を担っていたHTML要素や属性は多くがHTML4.01で非推奨、HTML5で廃止になりました。

例外) <img> に対するwidth属性とheight属性

<img> で挿入された画像は、画像の読込みが完了するまで自分自身のサイズを確定できません。
サイズを明示することで、レンダリングコストを抑えることができます。
なので、<img> にwidth属性とheight属性はつけよう！

<img src="test.png" width="100" height="100" alt="サイズを明示してあげよう！">

<img> に対するwidth属性とheight属性は、見た目のため、というより、レンダリングコストを抑えるためにブラウザに提供する情報、というイメージ。

基本的な思想

それぞれの役割を分離させる。

• HTML=文書構造
• CSS=Webページの見た目

外部CSSなら、複数ページに対して一気にデザインを変えることができるしね。

勧告までの主なプロセス

(引用： World Wide Web Consortium Process Document 1 March 2017 )

勧告までのプロセスを「標準化プロセス」と言うよ。

勧告状況

CSSの仕様はLevelという段階を持つよ。
勧告された仕様は「標準化」された仕様と言い換えられるよ。

CSS3・CSS4

CSS3以降ではCSS 2.1を中核とし、新たな機能の追加や改良をモジュール（機能の塊）に分割することで早期の標準化を実現した。
それぞれのモジュールは独立して標準化されているため、CSS3標準自体は正式には存在しない。

(引用：CSS3(MDN))

CSS3はLevel3モジュールの総称、CSS4はLevel4モジュールとCSS3で未定義だった新しいモジュールの総称、て感じかな。

例) Grid Layout Module Level1

• CSSのための新たなレイアウトモジュール
• COLUMN（縦軸）とROW（横軸）の二次元でのレイアウトが可能

 .container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

• float display:inline-block; display:table; display:flex; では実現できなかったレイアウトも可能に

新しいモジュールのため当然ながらモジュールのLevelはLevel1。ステータスは2017年5月9日時点でCandidate Recommendation（勧告候補）。
1996年に勧告されたCSS1とは同じ「1」でもちょっと意味が違うよ〜ということ。

• 2017年3月以降ChromeとFirefoxでデフォルトで使用できるようになり、ほぼ全てのモダンブラウザで使用できるようになったため、4月あたり「使ってみた」系の記事が乱舞
  
  （引用：Can I Use）

Grid Layout Moduleについては興味があったら触ってみるといいよ〜。

今日はここまで

次回予告

標準化されてなくてもブラウザが実装してくれていれば使える。
逆に標準化されていてもブラウザが実装してくれていなければ使えない。
CSSとブラウザは切っても切れない関係でござります...。

ということで、次回はWeb開発者が日頃大変お世話になっているブラウザについてお勉強しましょう。