CSS リキッドデザインで3段組

CSSのレイアウトで思いっきりつまずきました。

仕様

  • メインコンテンツ(center)がHTMLの最初に書かれる
  • メインコンテンツが収縮するリキッドレイアウトにする
  • absoluteを使わずにfloatで作成する

(3段組のレイアウトで、左をleft,真ん中をcenter,右をrightとしてdivのIDを付ける)

ネックは、floatを設定すると幅サイズを設定しなければいけないこと、またメインコンテンツを最初に持ってこなければ比較的簡単になるが、それではだめという事

散々苦労したあげく、なんとか実現できました。1段組、2段組、3段組、共通したロジックで記述可能です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css"><!--*{margin: 0;}#wrapper3{background-color: red;width: 100%;float: left;margin-right: -50px;}#right{background-color: green;width: 50px;float:left;}#left{background-color: blue;width: 50px;float: right;}#wrapper2{background-color: yellow;width: 100%;float: right;margin-left: -50px;}#wrapper2 #center{margin-left:50px;}#wrapper3 #center{margin-right:50px;}h1{margin: 10px;}#clear {clear: both;}--></style></head><body><h1>3段組</h1><div id="wrapper3"><div id="wrapper2"><div id="center"><p>Centerあああ</p><h1>aaa</h1></div></div><div id="left">left</div></div><div id="right">right</div><div id="clear"></div><h1>2段組</h1><div id="wrapper2"><div id="center"><p>Centerあああ</p><h1>aaa</h1></div></div><div id="left">left</div><div id="clear"></div><h1>1段組</h1><div id="center"><p>Centerあああ</p><h1>aaa</h1></div></body></html>

wrapper構造が少し気に入らないんだけど、実現することができました。


コメント

このブログの人気の投稿

島へ移住の話【炊飯】

ドローンプログラミング体験教室を伊豆大島の小学校でしてきました

情報処理安全確保支援士登録証のカード型が届きました。