上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
CONTAINER
LEFTCOL
MAIN
NAVI
|
上記のようなGIGAZINE風の3カラム段組を作る方法を紹介します。
左右のメニューの背景色のようなものは、じつは激太のボーダーの色だったりして、簡単にできそうで難しい。その激太ボーダーに新しく作ったメニューを重ねていくというのが今回のレイアウト。
ボーダーとメニューを重ねるには?
ボーダーとメニューを重ねるには、
- float:left
- position: relative
- margin-left:-200px
を使うらしいです。なんだか難しくて頭が混乱しそう@@
サンプルソース
ソースは以下からご自由にどうぞ。
たかが3カラム作るだけだと思っていたが、意外と難しいソースになってしまった…
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"><!-- .outer { background:#f7f7f7; border-right:200px solid #ffdfe7; border-left:200px solid #ffdfe7; } .inner { margin:0; width:100%; } .leftcol { float:left; position: relative; margin-left:-200px; } .main { float: left; width: 100%; position: relative; } .navi { float:right; position: relative; margin-right:-200px; } --></style> </head> <body> <div class="outer"><div class="inner"> CONTAINER <div class="leftcol">LEFTCOL</div> <div class="main">MAIN </div> <div class="navi">NAVI</div> </div></div> </body> </html>
スポンサーサイト
| ホーム |