2014-08-27

2014-08-27

CSSからWebデザインを習得

CSS

CSS（Cascading Style Sheets）

• 文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
• CSS Zengarden

メリット

• サイトの重さ軽減（SEO対策にも効果あり）
• 自由なレイアウト（文章構造を保ちながら可能）
• 編集が簡単（外部スタイルシートを利用することにより変更部分を見つけやすい）
• 読み込みが早い（ソースコードの行数が少なくなる）
• 高齢者や障害者も含めた誰もが情報を取得・発信できることに利用できる

デメリット

• ブラウザによる表示の違い（特に Internet Explorer での表示に問題があります。

CSS勉強のステップ

1. Webサイトを見る
2. デフォルトCSSが適用されたページを見る
3. HTMLのソースコードを見る
4. CSSのソースコードを見る

HTMLのソースコードを見る

1. ブラウザのソース表示を実行する
2. ページの文書構造を確認する
3. ページの情報を確認する

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

• HTMLの記述にミスがないかをブラウザーで確認します
• Firefoxを利用する

Firefox拡張機能

• HTML+CSSの基本を練習する場合には必須

HTML Validator

Web Developer

ブラウザのデフォルトCSSが適用されたページを見る

1. Firefoxで標準スタイルシートを無効にする
2. どのような順序で表示されているか確認する

WebデザイナーのCSSが適用されたページを見る

1. ウィンドウサイズを変更してみる
2. テキストズームで文字サイズを変更してみる
3. ページズームでページ全体を変更してみる

WebデザイナーのCSSソースコードを見る

1. すべてのCSSを表示する
2. スタイル情報を表示する
3. ブラウザのデフォルトCSSを無効にしてみる