CSSとは

CSS（Cascading Style Sheets）

  • 文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
メリット
  • サイトの重さ軽減（SEO対策にも効果あり）
  • 自由なレイアウト（文章構造を保ちながら可能）
  • 編集が簡単（外部スタイルシートを利用することにより変更部分を見つけやすい）
  • 読み込みが早い（ソースコードの行数が少なくなる）
  • 高齢者や障害者も含めた誰もが情報を取得・発信できることに利用できる
デメリット
  • ブラウザによる表示の違い（特に Internet Explorer での表示に問題があります。

CSS デザインの美


現在、2014年02月時点でこの内容が、ベストかといえばそうではありません。
しかし、現在のようにCSSが普及するための礎を作ったサイトであることは、間違いありません。
何がそうさせたのか。「悟り」の境地をのぞいてみましょう。


CSS勉強のステップ

  1. Webサイトを見る
  2. デフォルトCSSが適用されたページを見る
  3. HTMLのソースコードを見る
  4. CSSのソースコードを見る
HTMLのソースコードを見る
  1. ブラウザのソース表示を実行する
  2. ページの文書構造を確認する
  3. ページの情報を確認する

CSSを記述する前にブラウザーで確認する

Firefox拡張機能
  • HTML+CSSの基本を練習する場合には必須


HTML Validator


Web Developer

ブラウザのデフォルトCSSが適用されたページを見る
  1. Firefoxで標準スタイルシートを無効にする
  2. どのような順序で表示されているか確認する
WebデザイナーのCSSが適用されたページを見る
  1. ウィンドウサイズを変更してみる
  2. テキストズームで文字サイズを変更してみる
  3. ページズームでページ全体を変更してみる
WebデザイナーのCSSソースコードを見る
  1. すべてのCSSを表示する
  2. スタイル情報を表示する
  3. ブラウザのデフォルトCSSを無効にしてみる

セレクタの種類

などがあります。

タイプセレクタ
  • 要素に対してスタイル指定する


div: division
em：emphasis



　h1 {
　　　color: #00CC00;
　　}


　<h1>大見出し要素</h1>

複数セレクタ

複数の要素を「,」カンマで区切ってセレクタとして、スタイルを適用させたい場合に使います。



　h1, h2 {
　　　color: #00CC00;
　　}


　<h1>大見出し要素</h1>
　<h2>中見出し要素</h2>