div要素で左右カラムをまとめる－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > div要素で左右カラムをまとめる

第13章　段組みレイアウト

★div要素で左右カラムをまとめる

div要素で左右カラムをまとめる

段組みレイアウトとは、コンテンツを縦割りにして配置するレイアウトのことです。２つに縦割りすれば２段組み、３つに縦割りすれば３段組みです。縦割りにした部分をカラムと呼びますが、段組みレイアウトはカラムレイアウトとも呼ばれます。

CSSのfloatプロパティを使用して、２段組みレイアウトを作成していきましょう。まず、HTMLファイル側では、左カラムに入る内容と右カラムに入る内容をそれぞれdiv要素で囲んでグループ化します。

index.htmlに以下の記述を追加してください。

HTMLソース（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<div id="pagebody">

	<!-- ヘッダ -->
	<div id="header">
	<h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</a></li>
	</ul>

	<!-- ヘッダ画像 -->
	<div id="img_index">
	<img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社">
	</div>

	<!-- サブメニュー（左カラム） -->
	<div id="submenu">
		<h2>新着情報</h2>
		<ul>
			<li><a href="#info0001">新商品のご案内</a></li>
			<li><a href="#info0002">展示会への出展</a></li>
			<li><a href="#info0003">環境への取り組み</a></li>
		</ul>
	</div>

	<!-- インフォメーション（右カラム） -->
	<div id="info">
		<h3 id="info0001">新商品のご案内</h3>
		<p>
		<img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
		
		<h3 id="info0002">展示会への出展</h3>
		<p>
		<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
	
		<h3 id="info0003">環境への取り組み</h3>
		<p>
		<img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index">
		あいうえおかきくけこさしすせそ（中略）
		</p>
		<hr>
	</div>

	<!-- フッタ -->
	<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>

</div>
</body>
</html>

保存をしたらブラウザで表示してみましょう。 <div> ～ </div>で囲んだだけでは、前後が改行される程度で、ブラウザの画面上は特に変化はありません。

変更前を確認する

次回、CSSによる段組みのスタイル指定をしていきます。

カラムをコンテナ要素でくくる

上記のHTMLソースでは、左右のカラムになる予定の部分を、それぞれ <div id="submenu"> ～ </div> と <div id=" info"> ～ </div> で囲みました。

div要素は、それ自体には特に情報的な意味はありませんが、特定の範囲をまとめてグループ化する役割を果たします。

こうした使い方をするdiv要素は、コンテナ要素と呼ばれることがあります。コンテナ要素で囲んでやることで、その範囲にまとめてスタイルを適用したり、コンテナ単位でレイアウトを操作できるようになります。

HTMLソース中にコメントを入れておく

<div id="submenu"> ～ </div> でくくった部分や、 <div id="info"> ～ </div> でくくった部分は、それぞれ、「サブメニュー」「インフォメーション」という情報的なひとつのまとまりになっています。

HTMLソースを見返したときに、これらのブロックの区切りが分かりやすいように、   とコメントを入れています。

ウェブページ制作を進めていくと、徐々にHTMLソースが長く複雑になって、どこからどこまでが実際の画面上のレイアウトと関連しているのか分かりにくくなってきます。適宜コメントを入れて、後から見直した際にも分かりやすいHTMLソースになるよう心掛けましょう。

floatプロパティによる段組みレイアウト

段組みレイアウトを作成するには、いくつかの方法があります。その中で様々な条件を考慮すると、現在のところ、CSSのfloatプロパティを用いるのが、段組みレイアウトの標準的な手法と言えるでしょう。

様々な条件とは、HTMLによるマークアップがおかしくならないこと、利用するCSSのプロパティが各ブラウザでのサポートが十分に進んでいること、すでに多くのウェブサイトで導入されて問題なく動作している実績があることなどです。

floatプロパティは、その概念や実際の挙動が理解しにくく、初心者がつまずきやすいもののひとつですが、段組みレイアウトを作成するうえでは避けて通ることはできません。このチュートリアルで紹介しているのは、floatプロパティによるごくシンプルな２段組みレイアウトの作成方法です。

これが出来れば、３段組みレイアウトなどへの応用も利くので、ぜひ身に付けて今後のウェブ制作に役立ててください。

まとめ

段組みレイアウトには、CSSのfloatプロパティを使用するのが標準的な手法
HTMLソースでは、左カラムと右カラムに入る内容をそれぞれdiv要素で囲む
左右カラムとなるdiv要素には、それぞれid名を付けておく

<前へ

目次へ

次へ>