負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

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

--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit
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>












管理者にだけ表示

トラックバックURL↓
http://taro4.blog37.fc2.com/tb.php/28-c40cb269

| ホーム |

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

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