CSSからWebデザインを習得

CSS（Cascading Style Sheets）

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

CSS デザインの美

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



CSS勉強のステップ

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