ブロック要素をまとめるdiv

ちょっと復習（入れ子で使うspanタグ）

HTML要素で、<br>、<img >、<a >、<span> などは、 ブロックレベル要素の中で使うべき要素でインライン要素と呼ばれていました。
対してブロックレベル要素 <p>や<h1>,<h2>,<h3>,..<hr>,<table>,<form>、<div> などは、必ず1行以上の領域となる要素です。
ブロックレベル要素は、その範囲の中にインライン要素などを入れることができました。
そのように内部に要素を含むことを入れ子にすると言います。

span要素は、は 何の装飾もされていないインライン用のタグで、 スタイルによる装飾を前提にして使うタグでした。 そして、次のように入れ子にして使うことができます。真下の例では
paのクラス名のspan 要素 の中にchのクラス名のspan要素が 入っている部分があります。そして全体が p に入っている入れ子の構造です。

この中に、 これと、 それがあり、その中に あれを含む 構造です。

上記のHTMLは次の表記です。

<p>この中に、
<span class="pa">これ</span>と、
<span class="pa">それがあり、その中に<span class="ch">あれを</span>含む</span>
構造です。
</p>

入れ子の関係がある時、外側の要素が「親」で、 内部内側の要素が「子」の要素と呼びました。 また 子の中に子がある場合、それは子孫と呼びます。
そして「親」の要素に設定したスタイルが、 「子」の要素に引き継がれるもの（文字の色やフォント関連など）があり、 継承と呼びました。
（上記例でpの文字色スタイルが子孫まで影響しています。）

さて ブロック要素をインライン要素の中に入れることはできません。
そして、任意のブロック要素を入れて入れ子構造を作ることができるのが 次に示すdivタグなのです。

　ブロック要素をまとめるdiv

<p>や<h1>,..,<pre>は、ブロック要素ですが、 これらの中に<p>や<h1>,..,<pre>を入れるような 入れ子の構造を作ることはできません。
ブロック要素で入れ子を作る場合は、 divタグ(document divisions)の要素を使います。
このdivの中に複数の見出しや 段落を入れることでグループ化できます。 そして、そのまとめたdivを別のdivの中に配置する構造が可能となります。
以下に簡単な紹介をします。divの中に h1とpを入れたdivと、pを入れた例です。
なおここで使う各スタイルは、次のようにheadで設定されているとします。(div の幅指定に注目)

	div.a {	background-color: #FFFFAA; color: purple; width: 300px; 
			padding: 5px; background-image: url("img/owan.gif");/* 背景画像も指定 */
	}
	div.b { background-color: #FFFF00; border: solid 1px blue; width: 150px;}
	h1.b { color: fuchsia; font-size: large; text-align: center;}
	p.ab { background-color: #FFCCAA;}

<div class="a">
 <div class="b">
	<h1 class="b">夕飯レシピ</h1>
	<p class="ab">素材の特徴や選び方、保存方法等を紹介。</p>
 </div>
 <p class="ab">素材の特徴は、あれこれ・・です。<br>
 素材の選び方は、うんぬん・・でしょう。</p>
 <p class="ab">素材の保存は、・・こうこうすると良いですね。</p>
</div>

下記は、中のdivに flaotの右寄せを追加した例です。残りのpが左に流れ込みます。 この考えかたは、画像の横に回り込ませるやり方と同じです。

<div class="a">
 <div class="b" style="float: right;">
	<h1 class="b">夕飯レシピ</h1>
	<p class="ab">素材の特徴や選び方、保存方法等を紹介。</p>
 </div>
 <p class="ab">素材の特徴は、あれこれ・・です。<br>
 素材の選び方は、うんぬん・・でしょう。</p>
 <p class="ab">素材の保存は、・・こうこうすると良いですね。</p>
</div>

下記は、中のdivのflaotを 左寄せへ変更した例です。残りのpが右に流れ込みます。

<div class="a">
 <div class="b" style="float: left;">
	<h1 class="b">夕飯レシピ</h1>
	<p class="ab">素材の特徴や選び方、保存方法等を紹介。</p>
 </div>
 <p class="ab">素材の特徴は、あれこれ・・です。<br>
 素材の選び方は、うんぬん・・でしょう。</p>
 <p class="ab">素材の保存は、・・こうこうすると良いですね。</p>
</div>

下記は、中のdivに<br>や<p></p>を追加した例です。 このようにfloatの流し込みを行っている場合、中の範囲が親の範囲に納まりきれない場合でも、 親で収まるような自動調節はありません。（親のdiv範囲をはみ出して あれこれそれ のdivが拡がっています） 収まるように見せかける必要があるなら、親のスタイルでheightのプロパティに収まっているような高さを指定します。 なお仮に、子のdivで単純に高さを強制しても、内部にある文章が見えなくなくことはありません。 （ここで示す方法で、高さを指定することができます）

<div class="a">
 <div class="b" style="float: left;">
	<h1 class="b">夕飯レシピ</h1>
	<p class="ab">素材の特徴や選び方、保存方法等を紹介。</p>
	<br>
	<p>あれ</p>
	<p>これ</p>
	<p>それ</p>
 </div>
 <p class="ab">素材の特徴は、あれこれ・・です。<br>
 素材の選び方は、うんぬん・・でしょう。</p>
 <p class="ab">素材の保存は、・・こうこうすると良いですね。</p>
</div>

下記では、<br>や<p></p>の 代わりに画像を追加した例です。画像を入れたdivには、width: 150px;の 指定がありますが、入りきらないサイズで、幅の自動調整はありません。

夕飯レシピ 素材の特徴や選び方、保存方法等を紹介。 素材の特徴は、あれこれ・・です。 素材の選び方は、うんぬん・・でしょう。 素材の保存は、・・こうこうすると良いですね。

左のイメージのdiv のソースは次のようになります。 <div class="a"> <div class="b" style="float: left;"> <h1 class="b">夕飯レシピ</h1> <p class="ab">素材の特徴や選び方、保存方法等を紹介。</p> <img src="img/vegetable.gif"> </div> <p class="ab">素材の特徴は、あれこれ・・です。<br> 素材の選び方は、うんぬん・・でしょう。</p> <p class="ab">素材の保存は、・・こうこうすると良いですね。</p> </div>

floatで寄せるdivを複数使って並べる例

次のようにスタイルが設定されているとします。

	div.a {	background-color: #FFFFAA; color: purple; width: 300px; 
			padding: 5px; background-image: url("img/owan.gif");
	}
	div.x { border: ridge 5px pink; width: 50px; float: left; margin-right: 5px;}

左寄せクラスxのdivを連続して3つ並べている例です。

<div class="a" style="height: 150px; font-weight: bold;">
	<div class="x">
		<p>朝飯のレシピ<br>それ、それ</p>
	</div>
	<div class="x">
		<p>昼飯のレシピ<br>これ、これ</p>
	</div>
	<div class="x">
		<p>夕飯のレシピ<br>あれ、あれ</p>
	</div>
	<p>いかがでしょうか？<br>以上です。</p>
</div>

floatで左寄せのdivと右寄せのdivを使う例

下記は、入れ物として親になるdivの中に、 子として３つのdivを配置しています。
その３つとは、 左のfloatによる回りこみ指定した divと、 右のfloatによる回りこみ指定したdiv、 そしてこれらをクリアする指定(clear: both)の divです。
なお、親の div には、padding-left: 10px;を指定しました。
これにより、内部の左端に配置される div とdivの左に 10 ピクセルのスペースが 埋め詰められています。
また親のdivや左の子のdivの幅(width)を指定する時、%の単位を使っていることにも注目してください。 これにより、親のdivはブラウザクライアント領域の幅に対して 90%のサイズになり、 左の子のdivの幅は、親のdivの幅に対して50%のサイズになっています。
この例は、 や で確認できます。

<html><head><style type="text/css">
    div.M { background-color: yellow;
      padding-left: 10px;
      width: 90%; height: 50%;
    }
    div.L { border:solid 2px red; float: left;
      padding-left: 10px;
      width: 50%;
    }
    div.R { background-color: white; float: right;
      margin-right: 10px;
      width: 150px;
      word-break: break-all;/* 表示幅に合わせて改行 */
    }
    div.B { background-color: skyblue; clear: both;
      font-size: 16pt;
    }
    p.s1 { color: green; }
    p.s2 { color: red}
</style></head><body bgcolor="#DDDDDD">
<div class="M">
 <div class="L">
  <h1>左</h1>
  <p class="1">左の文章です。</p>
 </div>
 <div class="R">
  <p class="s1">右の文章です。</p>
  <p class="s2">abcdefghijklmnopqrstuvwxyz</p>
 </div>
 <div class="B">
   左右回り込みをクリアして配置します。
 </div>
</div>
</body></html>

次の編集部の内容を適当に編集し、 下の確認ボタンでブラウザでの確認ができます。
なお下記は、上記のソースに対して、画像を追加しています。ブラウザのサイズをドラックで 変更したり、 画像の位置を編集で変更するなど、いろいろ実験してみましょう。

なお divなどで、height: の設定値に % のパーセントを指定する場合は、 注意が必要です。
heightを%で指定する際は、親要素のheightを基準にします。 そしてheightの初期値はautoであり、autoの高さは、内容に依存します。
つまり親の指定がなければ、一行分のheightしか表示されない事になります。
html,body { height:100%; }のような親の指定して使うとよいでよう。
（他に、position: absolute;の指定も有効です）

←上記を実験できます。幅方向を伸ばしたりたり 縮めたりして確認しましょう。
divのブラウザにおける見え方や、各プロパティの反映を確認してそれぞれの働きを納得してください。 （Rのクラス名が付いているdivの幅に150pxを指定していますが、%の単位で同じように表示できるか確認しましょう。）
なお英語の文字並びにおいて、スペースなどの単語の区切りでしか、 次の行に流れないようになっています。 しかしこの規則のため、divのwidth指定が希望のサイズにならずに 自動調整されることがあります。
この自動調整を無効にして、幅指定が優先されて 単語の区切りでない所でも、次の行に文字並びが流れるようにする設定が word-break: break-all;です。 この指定が無い場合と比較して、違いを確かめましょう。 （なお、この指定が使えないブラウザも多いようです。）

なお、 height のスタイルで高さを指定して、overflow-y: scroll;のスタイルを設定することで、 divの領域にスタイルをスクロールバーを付けることができます。(幅方向も可能)
これにより高さを固定して、それによって見えなくなる範囲を、スクロールして見えるようにする操作が可能となります。
これは CSS2の仕様でなく、IE7以降の独自仕様でしたが、最新の主要なブラウザはすべて対応しています。

div の高さを ウィンドウに合わせる方法