上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
| CONTAINER
LEFTCOL
MAIN
NAVI
|
上記のようなGIGAZINE風の３カラム段組を作る方法を紹介します。
左右のメニューの背景色のようなものは、じつは激太のボーダーの色だったりして、簡単にできそうで難しい。その激太ボーダーに新しく作ったメニューを重ねていくというのが今回のレイアウト。
ボーダーとメニューを重ねるには？
ボーダーとメニューを重ねるには、
- float:left
- position: relative
- margin-left:-200px
を使うらしいです。なんだか難しくて頭が混乱しそう＠＠
サンプルソース
ソースは以下からご自由にどうぞ。
たかが３カラム作るだけだと思っていたが、意外と難しいソースになってしまった…
<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>
スポンサーサイト
| ホーム |
カレンダー