◆第１5回　ページの中身をブロック（バスケット）分けしよう　◆

その１

ページ構成の再確認

いよいよ、スタイルシートならではのページ構成にチャレンジしていこうかの？
絵本もどきのサンプルページに戻り、ちょいと中身を変えてこのページのようにして、sample15.htmlで保存した。（画像拡大表示をやめ、リンクのところをMENUにして、項目を増やした。リンク先ページはこの際無視しておいてくれ。）
第１２回で作成したサンプルページを同じように変更してくだされ。

ページを構成するhtmlタグというのは、サンドイッチぢゃ、とhtml基礎講座では説明したが、そのサンドイッチ（タグ）をボックスの中に入れ、それをバスケット（ブロック）にキレイに並べて収納し、そのバスケットを見栄え良くピクニックシートの上に配置するというのが、ページ作成ということになるかのぉ。
画像を使って説明しようかいの。

つまりぢゃ記事部分の小見出しと段落のボックスのセットを１つのバスケットに入れておる。
そのバスケット（ブロック）の仕切につかうのが、今回初めて出てきたdivというタグぢゃ。
これも<div>中身</div>というよに、サンドイッチぢゃぞ。
そして、今のところMENUは、箇条書きにはなっておらんが、後から　ul　というタグを使って修正していくからの。
配置もメニューらしく右側に持って行く予定ぢゃ。

　※マージン、パディングは、それぞれ四隅（left、right、top、bottom）

ボックスとは、今まで習ってきたタグの、ｈ１，ｈ２，ｐといったもので、スタイルシートで指定できることは、上の画像でお分かりぢゃと思うが、枠線に関してだとか空白だとかで、どれも同じぢゃ。
つまり、名前（タグ）は違うが、ボックス構成は同じということぢゃな。

そして、タグ（ボックス名）を宣言して｛　｝内に表示したいスタイルの指定をするということは、もうお分かりぢゃと思う。

その２

ページの中身を名前をつけてブロック分け

上のページの画像をもう一度見てくだされ。
大見出しのタイトルは別にして、下の本文とメニュー部分２つにブロック分けをするぞ。
方法は、先に述べた<div></div>のセットで仕切るだけぢゃ。

ぢゃが、仕切る時に、その内容がなにかすぐ分かるように、名前をつけておくんぢゃ。

<div id="ＩＤ名（ブロックの名前）">中身</div>　ぢゃ。

さっそくこのページのブロック分けをしてみようかのぉ？

ついでに箇条書きのタグulも使い、ついでに、今までは普通の文字の●で代用しておったが、行並びして均等間隔を保って見栄え良く表示してくれるliタグでそれぞれのリンク先ページ名を囲んでみたぞい。
メニューとか箇条書きのときは、重宝するタグちゃ！
おっと、わしのはstyle15.cssを読み込ませてあるぞい。（ぢゃが前のままぢゃ）

<html>

<head>
<title>ページ見本１</title>
<link rel="stylesheet" type="text/css" href="style15.css">
</head>

<body>

<h1>創作絵本／うさぎさんと少女</h1>
<br>
<br>
<div id="main">
<h2 class="s-title">［その１］出会い</h2>
<p><img border="0" src="ikkenya2.jpg" width="300" height="200">ある日、近くの森を散歩していたア
ンジーは、道に迷ってしまい、森の奥へと入ってしまいました。<br>
小川のほとりに見つけた小さなお家。そこで洋服を着て人間のように歩いているウサギに出会いました。
<br>
<br>
「お嬢さんの名前は？」<br>
「アンジー。でもみんなは私のことをアンって呼んでるわ。」<br>
「アン・・・気に入った。その名前をもらおう。」<br>
「え？もらうって？」<br>
「でも、私は男だから、そうだな、アンドリューを正式名としようか。通称アン。」<br></p>

<h2 class="s-title">［その２］レースは始まった</h2>
<p><img border="0" src="ikkenya3.jpg" width="300" height="200">
ウサギと一緒にその夜は、その家で泊まったアン。<br>?
翌朝、ウサギはアンの寝ている間に出かけてしまいました。<br>
「大変だよ！名前を返してもらわないとお家に帰れないよ。だって、今頃みんな君の事など忘れてるよ。」
<br>
「ええっ？それってママもパパも？」<br>
「そうだよ。早く返してもらわないと、あのウサギが君ん家の子供になっちゃうよ。」<br>
「そ、そんなの困るわ。」<br>
<br>
ウサギが向かった次の家の場所を聞き、女の子はウサギを追いかけ始めました。<br></p>
</div>

<div id="menu">
<h2 class="link">［MENU］</h2>
<ul>
<li><a href="test1.html">お話２</a></li>
<li><a href="test6.html">お話３</a></li>
<li><a href="test1.html">お話４</a></li>
<li><a href="test6.html">お話５</a></li>
</ul>
</div>

</body>

</html>

本文のＩＤ名をmain、メニューのＩＤ名はmenuとしたぞい。
これでページは大きく２つのブロックに仕切られたわけぢゃ。

それに、liタグで挟んだから、リンクページ名の前に自動的に●がついて、きちんと整列しておることはお分かりぢゃな？
今までのように改行タグ<br>がなくとも改行してくれるしのぉ。そこはh1やh2と一緒ぢゃな。

困った顔の助手
でも、教授、新しく導入した箇条書きタグで囲んだところ以外、どっこも変わっていませんよ？
変更したページ

当たり前ぢゃ！ただ、仕切を入れてブロック分けしただけぢゃからな。
ページデザインの変更はこれからが本番だぞい！

その３

floatプロパティを使った段組

さて、いよいよスタイルシートの出番ぢゃ！
今ＩＤ名をつけて囲んで作ったブロックそれぞれに指定していくんぢゃ。

下のプロパティ指定をcssファイルに追加してくだされ。

div#main {
width: 70%;
float: left;
}

div#menu {
width: 24%;
float: left;
}

にこにこ顔の助手
変わりました！教授！変わりましたよっ！変更したページ

今までは横に表示なんて、表に入れないとできなかったというか、表で仕切ってやらないとできないとばかり思ってました！

そうぢゃろう、そうぢゃろう！これでまたページデザイン幅が広がるというものぢゃ！
では、バラして（笑）解説ぢゃ。

div#main ID名mainとつけたブロックについてぢゃぞ！と宣言

{ 設定内容記述はじめ

width: 70%; スペース幅を、ページ全体の７０％使うことを宣言

float: left; ブロックの回り込みを左寄せで設定

} 設定おわり

div#menu ID名menuとつけたブロックについてぢゃぞ！と宣言

{ 設定内容記述はじめ

width: 24%; スペース幅を、ページ全体の２４％使うことを宣言

float: left; ブロックの回り込みを左寄せで設定

} 設定おわり

注意としては、floatプロパティを使う時は、必ず横幅のwidthプロパティもセットで指定することぢゃ！
幅をきちんと指定しないと、おかしなことになってしまうからの。
右寄せにしたらどうなるか・・・・ま、右側にいくだけぢゃが。（笑

見本は、２つに分けたが、３つでも可能ぢゃな。
あまり小さく区切るとページが読みにくくなってしまうが、まー、３つ位なら、それぞれのブロックに指定する％でうまく区切ればできる。
ブログ風、スリーカラムぢゃな。（笑）変更したページ

でも回答は、教授が作ったページのhtmlのソースを見たりcssファイルを呼び出して中身を見ればわかっちゃうんですけどね。/^^;
じゃ、これは宿題ということで。ご自分で考えてみてください。
どうしてもできなかったら、BBSの方に気軽に質問してくださいね。

さて、今回はここまでぢゃ。いろいろ試してみてくだされ。
次は、ブロックの中のデザインをちょいと変えてみようと思っておる。