CSSでフッタとヘッダがつき、全体が中央ぞろえされた2段組みページを作成します。
Float プロパティを利用する方法
コード例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>
<style type="text/css">
<!--
.Table{
width:420px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.Header{
background-color:#bfffe8;
width:420px;
}
.Footer{
background-color:#ffeebf;
width:420px;
clear:left;
}
.LeftColumn{
background-color:#bfddff;
width:120px;
float:left;
}
.RightColumn{
background-color:#ffbffa;
width:300px;
float:left;
}
-->
</style>
</head>
<body>
<div class="Table">
<div class="Header">ヘッダエリアです。</div>
<div class="LeftColumn">左側のエリアです。120ピクセルに設定されています。</div>
<div class="RightColumn">右側のエリアです。300ピクセルに設定されています。ABCDEFG</div>
<div class="Footer">フッタエリアです。</div>
</div>
</body>
</html>
実行結果
FlexBox を利用する方法
CSSのFlextBoxを利用して段組みする場合のコードです。Floatプロパティよりシンプルでわかりやすいコードで記述できます。
コード例
下記のHTMLファイル,CSSを作成します。
.Table {
width: 420px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #bfffe8;
width: 420px;
}
.footer {
background-color: #ffeebf;
width: 420px;
}
.container {
display: flex;
width: 420px;
}
.leftColumn {
background-color: #bfddff;
width: 120px;
}
.rightColumn {
background-color: #ffbffa;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ColumnLayout-2Column-Center-Flex.css" />
</head>
<body>
<div class="table">
<div class="header">ヘッダエリアです。</div>
<div class="container">
<div class="leftColumn">左側のエリアです。120ピクセルに設定されています。</div>
<div class="rightColumn">右側のエリアです。300ピクセルに設定されています。ABCDEFG</div>
</div>
<div class="footer">フッタエリアです。</div>
</div>
</body>
</html>
解説
FlexBoxを利用して段組みページを作成しています。FlexBoxの詳細は
こちらのページを参照してください。
実行結果
上記のHTMLページをWebブラウザで表示します。下図の画面が表示されます。段組みされたページが表示できていることが確認できます。
Grid Layout を利用する方法
Grid Layoutを利用して段組みするコードを紹介します。FlexBoxではヘッダとフッタはコンテナの外部に配置しましたが、Grid Layoutを利用するとすべての要素をコンテナの内部に配置することができます。そのためセンタリングの設定もコンテナのクラスに含めることができます。
コード
下記のHTMLファイル,CSSを作成します。
.container {
width: 420px;
text-align: center;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 120px 300px;
grid-template-rows: 32px auto 32px;
}
.header {
background-color: #bfffe8;
grid-column: 1/3;
grid-row: 1/2;
}
.footer {
background-color: #ffeebf;
grid-column: 1/3;
grid-row: 3/4;
}
.leftColumn {
background-color: #bfddff;
grid-column: 1/2;
grid-row: 2/3;
}
.rightColumn {
background-color: #ffbffa;
grid-column: 2/3;
grid-row: 2/3;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ColumnLayout-2Column-Center-Grid.css" />
</head>
<body>
<div class="container">
<div class="header">ヘッダエリアです。</div>
<div class="leftColumn">左側のエリアです。120ピクセルに設定されています。</div>
<div class="rightColumn">右側のエリアです。300ピクセルに設定されています。ABCDEFG</div>
<div class="footer">フッタエリアです。</div>
</div>
</body>
</html
解説
Grid Layoutを利用して段組みページを作成しています。Grid Layoutの詳細は
こちらのページを参照してください。
実行結果
上記のHTMLページをWebブラウザで表示します。下図の画面が表示されます。段組みされたページが表示できていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2018-11-19
作成日: 2011-01-23
