3カラム・レイアウトのコーディングの手順
- 各段の幅を設定。
- float を指定して2段組にする。
- float したボックス内でさらに float を指定する。
HTMLのコーディング
id=”contents” の中に、id=”main”,”left-side”,”right-side” の div を記述する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div id="contents">
<div id="main">
<p>メインのカラムです。</p>
</div>
<div id="left-side">
<p>左サイドです。</p>
</div>
<div id="right-side">
<p>右サイドです。</p>
</div>
</div>
</body>
</html>
div#main と div#left-side を div 要素で囲む。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div id="contents">
<div class="wrap-contents">
<div id="main">
<p>メインのカラムです。</p>
</div>
<div id="left-side">
<p>左サイドです。</p>
</div>
</div>
<div id="right-side">
<p>右サイドです。</p>
</div>
</div>
</body>
</html>
CSS のコーディング
まず、各ボックスの位置がわかりやすいように、背景に色を付ける。
@charset "utf-8";
#main {
background-color: red;
}
#left-side {
background-color: green;
}
#right-side {
background-color: blue;
}
要素の幅を設定する。
@charset "utf-8";
.wrap-contents {
width: 750px;
}
#main {
background-color: red;
width: 500px;
}
#left-side {
background-color: green;
width: 200px;
}
#right-side {
background-color: blue;
width: 160px;
}
#main を500ｐｘ、左サイドを200ｐｘ、右サイドを160ｐｘとし、要素間の間隔を50ｐｘとする。
div.wrap-contents は、
#main:500px + #left-side:200px + 間隔：50px = 750px
となる。
float 属性を設定する。
div.wrap-contents に、float: left; div#right-side に、float: right; を設定する。
@charset "utf-8";
.wrap-contents {
float: left;
width: 750px;
}
#main {
background-color: red;
width: 500px;
}
#left-side {
background-color: green;
width: 200px;
}
#right-side {
background-color: blue;
float: right;
width: 160px;
}
float された要素は浮いてしまうため、親要素は子要素の高さを算出できなくなり、div#contents の高さが0になり、その下の要素が入り込んでしまう。
そのため、親要素(div#contents)に、overflow:hidden; を記述する。
IE 6/7 は、overflow:hidden; に対応していないため、IE 独自属性 zoom 属性を設定する。
width は、
div.wrap-contents 750px + div#right-side 160px + 要素間の間隔 40px = 950 px
を設定する。
#contents {
overflow: hidden;
zoom: 1;
width: 950px;
margin: 20px auto 0;
}
overflow:hidden;
fioat を解除できる clearfix に比べ、指定する属性が少なく、気軽に使える。
ただし、ボックスからあふれる部分を隠すため、ボックスからはみ出る表現やドロップシャドウ、印刷が想定される場合には問題が生じやすいため、ケースバイケースで使い分ける必要がある。
div.wrap-contents 内を、float 属性で2段組にする。
#main {
background-color: red;
float: right;
width: 500px;
}
#left-side {
background-color: green;
float: left;
width: 200px;
}
完成。
3段組を実現する手法には、ほかに様々なものがある。
【参考書籍】
この記事を読んだ人はこんな記事にもご興味があるかも
2021-04-29 グルーピングと要素の差別化ーデザインの基礎、基本![[ 起業 ] 日本政策金融公庫の融資制度](https://i0.wp.com/webdesign.ki-blog.biz/wp-content/plugins/wordpress-23-related-posts-plugin/static/thumbs/14.jpg?resize=150%2C150)
2017-10-21 [ 起業 ] 日本政策金融公庫の融資制度
2021-05-30 使うことを意識したWebデザイン
2016-05-22 Illustrator カラー設定を設定する- 2014-07-23 WordPressオリジナル・テーマ作成、制作へのアプローチ
2018-06-09 デザインの基礎、基本