CSS中級　CSSレイアウト

第39回美しいレイアウトを学ぶ
CSSレイアウト講座

余白はどんなデザインでも重要な要素になります。活字を使うWebデザインはさらに重要と言っても過言ではありません。例えば、同じ文章でも行間や余白がないと読みづらくなります。 美しいレイアウトは可読性に優れ、コンバージョンが上がる傾向にあります。

この講座ではCSSを利用してコンバージョンの上がるデザインを作りながら、CSSレイアウトの複雑なテクニックと現場で必要なデバックなどの知識を習得していただけます。

対象

  • CSSの基本を理解している方を対象にしています。基礎力が不十分な方はCSS基礎講座より受講される事をお進めいたします。
  • CSSレイアウトをマスターしたい方
  • グリットの揃った美しいレイアウトをマスターしたい方
  • コンバージョンが上がる、可読性の良いデザインを実現したい方
  • アプリケーション開発などでCSSを必要とする方

カリキュラム

Web標準の理解を深める

  1. CSSとWeb標準の関係と理解
  2. WaSP
  3. CSS指定に必要なドキュメントツリーとセレクタの理解

レイアウトに必要なfloatとposition

  1. floatと後続要素の関係
  2. dl要素の２コラム
  3. floatの仕組み
  4. floatプロパティの応用（左右交互のプロパティ）
  5. positionプロパティの正しい基本とz-indexの設定

デザインとUI

  1. 可読性の良いデザインとは？
  2. グリット
  3. 行間
  4. タイトル
  5. 美しいレイアウトを計算して作成
  6. 960 Grid Systemなどのツールと利用方法

CSSレイウアトのページの作成【実習】

  1. table要素へのスタイルシート
  2. Form要素へのスタイルシート
  3. Form要素の正しい応用のマークアップ
  4. グローバルナビゲーションのCSS(ブロックレベル要素とインラインレベル要素の複合)
  5. マルチバックグラウンド

ブラウザ表示相違の理解と対策

  1. IE-Tester の利用
  2. 開発ツール Firebug WebInspectorの紹介と利用
  3. ブラウザスタイルシートの初期化(2011年版)
  4. font-sizeの理解と設定
  5. リスト要素へのCSSの適用

将来を見据えたIE対策【実習】

  1. プログレッシブエンハンスメント
  2. 将来性を考えたIE7への対応
  3. 将来性を考えたIE8への対応
  4. Firefoxのスタイルシートリセット
  5. 現ブラウザ対応の適切な外部スタイル(パスフィルター）の適用方法

実習環境で利用するソフト

utf-8が入力できるテキストエディタとCSSサポートの良いブラウザを利用して開発します。

  1. Windoes:TeraPad
  2. Mac:ミミカキ
  3. Firefox
  4. Opera
  5. Chrome
  6. 開発ツール/ Firebug　 WebInspector 960 Grid System
  7. テストツール/ IE-Tester
パソコン持参の方は上記アプリケーションをインストール、もしくは代用のソフトをご用意下さい。