*

ウェッブ制作

ホーム >  Web制作 >  HTM5/CSS3 > 
15.高さを揃えた3段組レイアウト MENU 

15.css3 高さを揃えた3段組レイアウト 同じサイズのボックスが横3列に並ぶ Chap 5-12

学習書の「sample_a」(Chap5_1-12)を表示しソースコードを見て下さい。
3段組レイアウト
コンテンツの3つの「article section」をボックス化して3段組みとしている→CSS3のフレキシブルボックスレイアウトと言う。

3段組みのCSS記述
  • 行番
  • 説 明
  • 2-3
  • 3つのセクションをボックスにまとめる
  • 3-4
  • FireFoxとIE対応
  • 6-11
  • ページ幅900pxに3つのセクションを入れる
  • 12-13
  • 3つのセクションヘッダーの高さや行間
  • 14-16
  • 3つのセクションの中の画像レイアウト調整
  • 17-19
  • 3つのセクションの中の画像キャプションを調整
Internet Explorer7 対応のCSS記述