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 などで取る。
【参考書籍】
この記事を読んだ人はこんな記事にもご興味があるかも
- 2014-07-23 WordPressオリジナル・テーマ作成、制作へのアプローチ
2021-05-28 Webサイトをデザインするということ。ー 印刷物との違い。![[ タイポグラフィー ] 覚えておきたい定番明朝体フォント](https://i0.wp.com/webdesign.ki-blog.biz/files/%E3%82%BF%E3%82%A4%E3%83%9B%E3%82%9A%E3%82%AF%E3%82%99%E3%83%A9%E3%83%95%E3%82%A3%E3%83%BC-%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E5%AE%9A%E7%95%AA%E6%98%8E%E6%9C%9D%E4%BD%93%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88-150x150.png?resize=150%2C150&ssl=1)
2020-06-30 [ タイポグラフィー ] 覚えておきたい定番明朝体フォント
2021-04-29 グルーピングと要素の差別化ーデザインの基礎、基本
2021-05-30 使うことを意識したWebデザイン
2017-11-28 日本政策金融公庫の融資制度を利用する
(Visited 1,290 times, 1 visits today)