ヘッダー
ヘッダー
ヘッダー
ヘッダー
ヘッダー
左サイド
左サイド
左サイド
左サイド
左サイド
中央
中央
中央
中央
中央
中央
中央
中央
中央
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
右サイド
下部
下部
下部
下部
下部
ヘッダーと下部は通常の DIV です。その間に float:left でコンテンツエリアを作成しています。残りの右サイドには position:absolute で後から追加するといいと思います。 コンテンツエリア内に左サイド、中央、右サイドとして配置して、それぞれ float がleft、left、right と設定して横に並べています ※ 実際は、BODY に margin:0px を設定してキッチリとはめ込みます
<style> .layout { border: solid 1px #404040; } .inner { margin: 6px; } </style> <div class="layout" style='width:598px;height:100px;background-color:#e1e1e1;'> <div class="inner"> ヘッダー<br> ヘッダー<br> ヘッダー<br> </div> </div> <div style='width:600px;background-color:#e2ffe2;float:left;'> <div class="layout" style='width:98px;background-color:#c8e8e8;float:left;'> <div class="inner"> 左サイド<br> 左サイド<br> 左サイド<br> </div> </div> <div class="layout" style='width:394px;background-color:#e0c0e0;float:left;'> <div class="inner"> 中央<br> 中央<br> 中央<br> 中央<br> 中央<br> </div> </div> <div class="layout" style='width:98px;background-color:#e0f0e0;float:right;'> <div class="inner"> 右サイド<br> 右サイド<br> 右サイド<br> 右サイド<br> 右サイド<br> 右サイド<br> 右サイド<br> </div> </div> </div> <br style='clear:both'> <div class="layout" style='width:598px;background-color:#e1e1e1;'> <div class="inner"> 下部<br> 下部<br> 下部<br> </div> </div>
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- HTML : 画像を使ったボタンのバリエーション
- Picasa と list-style-image を使って、リストのマークをフォントサイズに合わせて拡大・縮小して利用する
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align