clearfix を用いた3カラム・レイアウトのコーディングの手順
- ３つのボックスに対して、それぞれ、float プロパティを指定する。
- clearfix を使い、回り込みを解除する。
HTMLのコーディング
div#contents の中に、div#left-side,div#main,div#right-side を記述する。
<!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>
<footer>
<p>これは、フッターです。</p>
</footer>
</body>
</html>
CSS のコーディング
div#contents の幅は、946px、div#left-side の幅を 240px 、div#main を480px 、div#right-side の横幅を 196px とする。
それぞれの要素がわかりやすいように、背景色を指定する。
@charset "utf-8";
#contents {
width: 946px;
}
#main {
background-color: red;
width: 480px;
}
#left-side {
background-color: green;
width: 240px;
}
#right-side {
background-color: blue;
width: 196px;
}
footer {
background-color: orange;
}
@charset "utf-8";
#contents {
width: 946px;
}
#left-side {
background-color: green;
float: left;
width: 240px;
}
#main {
background-color: red;
float: left;
width: 480px;
}
#right-side {
background-color: blue;
float: right;
width: 196px;
}
オレンジのフッターが入り込み、レイアウトが崩れている。
clearfix を使い、回り込みを解除する。
全体のcontentsを div#contents で囲んでいるので、div#right-side の後に、div#contents の閉じタグが来て、clear プロパティを指定する要素が存在しない。
なので、clearfix を利用する。
div#contents に、clearfix というクラスをHTMLに記述し、CSSに以下のように記述する。
<body>
<div id="contents" class="clearfix">
<div id="main">
<p>メインのカラムです。</p>
</div>
.clearfix::after {
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
content: ".";
font-size: 0.1em;
}
.clearfix {
display: inline-block;
}
要素間の間隔は、margin などで取る。
【参考書籍】
この記事を読んだ人はこんな記事にもご興味があるかも
2017-10-04 Free Responsive Web PSD Template Web Site
2017-01-16 Best 9 Free Web Material Market
2017-08-24 [ CSS ] CSSのリセット
2021-05-28 余白でイメージを表現する。
2017-07-13 Chromeのデベロッパーツールでデヴァイス毎の表示を確認する方法
2018-06-09 デザインの基礎、基本
(Visited 1,159 times, 1 visits today)