てんぽ: CSSで三段組

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

スポンサーサイト

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

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

CSSで三段組

2006年05月14日(日)

三段組で遊ぼ

次の条件を満たす段組をCSSでレイアウトしやがれ。今作れ、すぐ作れ、直ちに作れ。

  • 3カラムのリキッドデザインであること。
  • 両端のカラムは固定幅とし、中央のカラムのみ可変幅にすること。
  • HTMLソースでは中央のカラムを他のカラムより先に記述すること
  • position: absoluteは使用禁止。floatでデザインすること。

では作ってみようか、と思ったけどCSSによる段組(マルチカラム)レイアウト講座メインカラム幅可変、サイドバー幅固定 3カラムに解説があるので、そちらを参照のこと。

三段組でメインコンテンツを先に書いてみるテスト(rtmr)」ではレイアウト講座とは違ったやり方で実現しています。

.main-w   {
            float: left;
            width: 100%;
            margin-right: -100%;
}

margin-right: -100%;というのが大胆で素敵。HTMLの構造もいい感じです(わけのわからんwrapperは必要ない)。 このやり方は是非パクり参考にしたいですね。

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

同じカテゴリの記事

(-4件)

Mic:Re: CSSで三段組

はじめまして。いつも参考にさせてもらっています。
この方法、はじめは「おっ」と思ったのですが、やはりWinIEが足をひっぱりますね。
あとpre要素が使えないのが残念。
テキストがメインのサイト限定といったところでしょうか。

  • 2006年05月14日(日)19:45:50
  • URL
  • 編集
みりばーる:divを増やせば…

div2重がけを避けるならWinIEではきつそうです。サイドバーと重ならないようにメインカラム直下のブロック要素に左右マージンを与えるわけですが、それだとwidthが使えないのですね。WinIEはコンテナブロックのwidthがautoだと、table要素やフロートに不具合があるため大変です。
それに「テキストがメインのサイト」なら3段組にはしないでしょうね。

ちなみにdivをいくらか増やせば、(overflow:autoをつかって)pre要素も使えそうです。実際、いまのテンプレと同程度のdiv数ならうまくいきました(WinIEでも大丈夫なはず)。

  • 2006年05月15日(月)01:10:43
  • URL
  • 編集
itochan:Re: CSSで三段組

中央記事部分に min-widthつける方法をお教えください^^;

  • 2006年07月11日(火)04:04:08
  • URL
みりばーる:中央記事部分に min-widthつける方法

中央記事部分は可変幅ですが両サイドは固定幅なので、中央部の最小幅を決めることは全体の最小幅を決めるのと同じことです。
ですから、3つのdivのコンテナブロック、あるいはbody要素にmin-widthを指定すればよいでしょう。

  • 2006年07月11日(火)21:06:33
  • URL
  • 編集
コメントの投稿

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

http://mb.blog7.fc2.com/tb.php/90-f306ffce

<<FC2ブログのプラグイン変数まとめ | div id="header"の違和感>>

Utilities

おすすめ

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

広告

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