divダグ/ボックス

<div>タグはボックス定義です。

説明

 <div>タグを使っただけでは何も変わりませんが、ボックスを定義してその中でidやクラス指定、スタイル等を変更する時に使います。

ボックスの利用例

構文

 <div>タグはHTMLボディー内に記述します。構文は以下の通りです。

<div>ボックス内の記述</div>

利用例

 何も指定せずに使った例は以下の通りです。

<div>意味を持っていないボックス定義のため、タグで独自定義やクラス等の指定のために使われます。主として幅や枠を指定するために使われます。</div>

 上記を表示すると以下になり、<div>タグを付けない時と見た目変わりません。

意味を持っていないボックス定義のため、タグで独自定義やクラス等の指定のために使われます。主として幅や枠を指定するために使われます。

 このため、主として以下のように幅を指定したり回り込んだりするために使われます。

<div style="border:1px solid red;width:44%;float:left;">
赤枠を設けて左に回り込み。
</div>
<div style="border:1px solid blue;width:44%;float:left;">
青枠を設けて左に回り込み。
</div>
<div style="clear:both;"></div> ※回り込み解除

 上記を表示すると以下になります。

赤枠を設けて左に回り込み。
青枠を設けて左に回り込み。

 CSSで定義したidやクラスを指定しても同様にスタイルが変わります。

<div id="red">赤枠を設けて左に回り込み。</div>
<div class="blue">青枠を設けて左に回り込み。</div>
<div style="clear:both;"></div> ※回り込み解除

 <div>タグでホームページにボックスを配置してデザインを整えるのが基本です。

ディスプレイ

 <div>タグで囲むとブロックボックスを示すため、タグの開始時と終了時に改行されます。

 <div>タグに似たタグでインラインボックス版は<span>タグです。<span>タグも使っただけでは何も変わりませんが、やはりidやクラス指定、スタイル等を変更する時に使います。

 改行する時は<div>、改行しない時は<span>という使い分けになります。

補足

 多くの場合、<div>タグでページ全体の外観を整えます。

 ページの左サイドは左に、右サイドは右に寄るようにしてボックスを配置し、幅を決めたりする時に<div>タグが使われます。

 又、文章の記述等でも<div>タグで囲み、その中で<h1>や<p>タグを使うと見栄えを整えやすくなります。

関連ページ

・ホームページ作成「トップページ:ボックス配置

 実際のホームページ作成におけるボックスの配置方法について説明しています。

・ホームページ作成「ボックスのまとめ

 余白や幅、背景や回り込みの指定方法等、ボックス全般について説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加