負けてたまるか。

脳トレ、プログラミング、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>
スポンサーサイト
| ホーム |

カレンダー

02 | 2017/03 | 03
- - - 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。