いちから始めるホームページ作成

HTML・CSSのことがよくわかる初心者から始めるホームページ制作

divタグの入れ子を使いこなそう

「divタグの入れ子」という言葉を初めて聞いた方は、どんなものかピンと来ないかもしれないですが、divタグの中にdivタグを入れることを言い、主にレイアウトをする際やIE(インターネットエクスプローラー)バグに対応するために使い、現在のホームページ作成では必須と言えるテクニックです。

divタグの入れ子の使用例

例えば、2カラム(メインコンテンツと横にメニューがあるようなサイトのこと。このサイトも2カラムでレイアウトしています)のレイアウトにする場合、まず全体の幅を決めるdivタグを記述し、その中にメインコンテンツとメニューのdivタグを記述するといった形です。

<div><!-- 全体の幅を決めるdivタグ開始 -->
<div></div><!-- メインコンテンツ -->
<div></div><!-- メニュー -->
</div><!-- 全体の幅を決めるdivタグ終了 -->

ホームページを作っていたら、必ず入れ子は必要になってきますが、divタグを使い過ぎるのは、あまり美しいHTMLソースとは言えませんので、入れ子を使う際は数を必要最低限にしましょう。

HTMLタグ
CSS
一口メモ
サンプルソース
用語集