てんぽ: 3カラムのHTML

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

スポンサーサイト

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

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

3カラムのHTML

2006年02月25日(土)

CSSで3カラムをやるにはどういうHTML構造が必要か。 とりあえずメインカラムとサイドバー1、2の3つのブロックが必須で、 問題となるのは、それらの出現順序とコンテナブロックの関係です。


ケース1
<div id="sub1">
サイドバー1
</div>

<div id="main">
メインカラム
</div>

<div id="sub2">
サイドバー2
</div>

3つのブロックを順々にフロートさせる方法。幅固定も幅可変も比較的簡単。

ソース上での各ブロックの出現順序がテーブルレイアウトと同じなので、CSSでやる意義があまり感じられない。

ケース2
<div id="sub1">
サイドバー1
</div>

<div id="sub2">
サイドバー2
</div>

<div id="main">
メインカラム
</div>

各サイドバーをfloatで左右に寄せて、メインカラムに左右マージンを与える方法。 幅固定、幅可変、サイドバーのみ幅固定でメインカラムは幅可変、どれでも簡単にできる。 ただしメインカラム内の記事でclearすると駄目。

メインカラムが一番最後になるので、ブログやるには適切ではない。

ケース3
<div id="wrapper">
  <div id="main">
  メインカラム
  </div>

  <div id="sub1">
  サイドバー1
  </div>
</div>

<div id="sub2">
サイドバー2
</div>

メインカラムとサイドバー1をdivでまとめる方法。divり方(?)がやや不自然な気もするけど、定番。 試してみたところ、あらゆる段組のパターンが可能っぽい。

ケース4
<div id="wrapper">
  <div id="main">
  メインカラム
  </div>

  <div id="sub1">
  サイドバー1
  </div>

  <div id="sub2">
  サイドバー2
  </div>
</div>

3つのカラムをdivでまとめる。wrapperをコンテナにしてpositionでやるなら、幅可変、幅固定、サイドバーのみ幅固定でメインカラムは幅可変が簡単にできる(ただし、フッタなしか、サイドバー分の左右マージン付フッタになる)。 未検討だけど、これもあらゆる段組のパターンが可能かもしれない。

ケース2の場合にとくに顕著なこととして、「CSSでこうするにはHTMLはこうでなければならない」という思考が気に入らない (そうでなければどうしてメインカラムが一番最後になるというのか)。 CSSレイアウトというからには、「こういうHTMLでこういうレイアウトにするにはCSSはどうするか」と考えなければ。理想的には。

とはいえ、実際に作るときには、CSSでできることとHTML構造の両方を考えながら、許せる範囲でHTMLに手を加えることになる。 ケース3と4は許容範囲内だけどケース1と2はそうでないというわけ。

余談ですが、3カラムのHTMLで各カラムのidをcenter, right, left みたいにしている人がいますが、そういうのはあまり適切ではない。

  • 中央、右、左というのはCSSを適用した結果のことであるので、物理マークアップ的な発想と大差ない。
  • 左右カラムを入れ替えたくなったら、CSSではなくHTMLのid名を書き換える必要がある。
  • HTMLはそのままで左右カラムを入れ替えるなら、id名と実際の配置が一致しなくなる。

一方、FC2公式テンプレの一部では、3つのカラムのidは、primary-column, secondary-column, extra-column(あるいはthirdly-column)になっていて、これは適切といえます。 この場合は、表示位置ではなく優先順序(あるいは性質)を示しているだけで、それはHTMLソース内での出現順序にも対応しています。

ただ、primary, secondaryときたら、3番目はtertiaryだと思うんですが、どうでしょうか(実はここが一番言いたかった)。

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

同じカテゴリの記事

(-0件)

コメントの投稿

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

http://mb.blog7.fc2.com/tb.php/75-54c3c561

<<コピペするとメッセージが現れる不思議な絵 | 前方互換性のあるテンプレを作りたい>>

Utilities

おすすめ

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

広告

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