てんぽ: 段組のパターン

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

段組のパターン

2006年02月20日(月)

floatとpositionの使い分けを考慮して、 CSSによる段組を「技術的な制約」をもとにパターン分けしてみる。 ブログでよくある段組のパターンは、だいたい以下の条件の組み合わせで表される。

  • カラム数:1/2/3
  • サイドバー:幅固定/可変
  • メインカラム:幅固定/可変
  • フッタ:カラムぶち抜き/サイドバー分の左右マージンあり(orフッタなし)

カラムの左右入れ替えは楽勝なので、それによる分類はしていない(「技術的な制約」とはそういう意味)。

これらの組み合わせは単純に掛け合わせると全24種類。そこから「メインカラム幅固定、サイドバー可変」とか「1カラムでサイドバー固定」みたいな非現実的な組み合わせを除いて整理すると、こんな感じになる。

  • 1カラム
    • 幅固定
    • 幅可変
  • 2カラム
    • 2段ぶち抜き型フッタあり
      • 幅固定
      • 幅可変
      • サイドバー幅固定、メインカラム幅可変
    • サイドバー分の左右マージンあり(orフッタなし)
      • 幅固定
      • 幅可変
      • サイドバー幅固定、メインカラム幅可変
  • 3カラム
    • 3段ぶち抜き型フッタあり
      • 幅固定
      • 幅可変
      • サイドバー幅固定、メインカラム幅可変
    • サイドバー分の左右マージンあり(orフッタなし)
      • 幅固定
      • 幅可変
      • サイドバー幅固定、メインカラム幅可変

14種類。これらすべてを1つのHTMLで、CSSを切り替えるだけでやる、というのが今の目標。 一見無理っぽいけど、実はできる(はず)。

難易度としては、「サイドバー幅固定、メインカラム幅可変の2カラム」≧「3段ぶち抜き型フッタありのサイドバー幅固定、メインカラム幅可変の3カラム」>「それ以外の2カラム」≧「幅可変3カラム」>「幅固定3カラム」>>「1カラム」という感じ。

3カラムより2カラムのほうが難しいのは、1カラム~3カラムまでカバーしたHTMLでやるから。

#73
カテゴリ:HTML・CSS
タグ[ CSS ]

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/73-d21bd9d7

<<トラックバックを受信できない不具合 | コピペするとメッセージが現れる不思議な絵>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。