section類タグによる画面分割の例２
画面分割の例１のときと同様に、ヘッダ部とナビ部固定で本文のみスクロール可とした。 異なるところは、ナビ部と本文がブラウザ横サイズの変更に対して常に画面中央に位置するように移動することと、本文サイズ横サイズが固定化されていることである。
ソースコードは以下のとおりである。
<h3>ヘッダ部</h3>
</header>
<nav style="box-sizing:border-box; padding:0; border:1px solid black; background-color:#ddffff; left:max(5px , 50% - 450px ); position:fixed; top:60px; width:250px; height:600px;">
<iframe width="100%" height="100%" style="border:none; " src="menu.html">
</iframe>
</nav>
<main style="box-sizing:border-box; padding:0 30px 0 30px; background-color:#ffffff; top:60px; left:calc( max( 5px , 50% - 450px ) + 250px ); position: absolute; width:650px; word-wrap: break-word;">
<h3>section類タグによる画面分割の例２</h3>
<p>
・・・・・・・
・・・・・・・
</p>
</main>
style=...で示されているインラインスタイルシートCSSが沢山ありすぎて相当見にくくなってしまった。 そこで、次のようにCSSを<head>要素内に置き、見やすくしてみた。
<head>
<meta charset="UTF-8">
<title>section類タグによる画面分割の例２</title>
<style type='text/css'>
body {
background-color:#eeeeee;
}
header {
box-sizing:border-box;
position:fixed;
width:100%;
height:60px;
top:0; left:0;
border:1px solid black;
background-color:#ddddff;
text-align:center;
z-index:1;
}
nav {
box-sizing:border-box;
position: fixed;
width:250px;
height:600px;
top:60px;
left:max(5px , 50% - 450px );
padding:0 ;
border : 1px solid black ;
background-color:#ddffff;
}
iframe {
width:100%;
height:100%;
border:none;
}
main {
box-sizing:border-box;
position: absolute;
width:650px;
top:60px;
left:calc( max( 5px , 50% - 450px ) + 250px );
padding : 0 30px 0 30px;
background-color:#ffffff;
word-wrap: break-word;
}
</style>
</head>
<body>
<header>
<h3>ヘッダ部</h3>
</header>
<nav>
<h3 style="text-align:center;">ナビ部</h3>
<iframe src="menu.html">
</iframe>
</nav>
<main>
<h3>section類タグによる画面分割の例２</h3>
<p>
・・・・・・・
・・・・・・・
</p>
</main>
</html>
CSSについての詳しい解説は後述するが、CSS部分が全体のかなりの部分を占めるようになってしまった。
nav要素とmain要素のleft値は、max()関数やcalc()関数を使っているところがミソで、常に中央付近に表示し、左右に均等に空きスペースができるようにした。
この表示形式は、別に真似したわけではないが、ヤフージャパンとほぼ同じである。
ところで、<a href="html5_study.html" target="_top">menu1</a>のように、 target="_top"を忘れずにつけておく必要がある。 これがないと、ナビ部にリンクが表示されてしまう。
マージンとパディングについて
下図は、HTMLファイルのhtml,body,section,article領域を色分けして示したものである。
（ 色指定とサイズ指定はスタイルシート（CSS）を使った。 スタイルシート（CSS）については、後で解説する。）
上図のようにhtml,body,section,articleを色を付けて区別すると、領域がわかり易い。 緑色がhtml全体の領域を表し、その中にうすい灰色指定のbodyの領域があることがわかる。 さらに、その中に濃い灰色のsection領域、またその中に白色指定のarticle領域がある。
上図上のsection領域とその中のarticle領域は色指定だけで表示したものである。 横サイズはbody領域とぴったり一致している。
ところで、html領域とbody領域がピッタリ一致していないのは、 ブラウザによって多少異なるらしいが、body領域にマージン(margin)が初期設定されているためである。 margin値は自由に変更できるので、一致させたい場合はCSSでmargin: 0;と指定すればよい。
下方のsection領域とその中のarticle領域は横サイズ（width)を指定した。 これにより、明確にbody領域の中にsection領域が、その中にarticle領域があることが理解できる。
しかし、文字は領域枠を超えて表示されている。 word-wrapが初期設定となっているので、長い単語の場合は改行されないのが原因だ。 ". . . . . ."のようにドットと空白の組み合わせの場合は、適切な位置で自動改行されている。
「CSSはボックスモデルを考えると理解しやすい」と言う説明が多くの教科書に書いてある。 一見、HTMLもボックスモデルで考えると良いように見えるが、HTMLそのものは文書構造が主体であり、 ボックスモデルはCSSとの連携のために設定されているにすぎない、と考えたほうがよさそう。 今後の理解のために、この点に関して、柔軟に、押さえておきたい。
さてさて、少しずつ、HTMLタグの領域（ボックスモデル）に関してCSSを追加しながら探っていくことにする。
上図左は、body,section,articleタグにマージン margin:20px;を追加したものである。 body領域の周り、上、左右に20pxずつ余白が取られるようになったことが確認できる。 しかし、最下部のマージンは、section,articleを含めてすべて無視されていることもわかる。
section,articleの領域も同様に、領域外にマージンが設定されていることがわかる。
上図右は、マージンの代わりにパディングpadding:20px;を設定したものである。 なんとなく似たような表示になっているが、 文字の表示位置が右下方向へ20pxずつずれていることがわかる。 このことから、マージンは領域外に設定される余白、 パディングは領域内に設定される余白であることがわかる。
パディングの場合、最下部でも無視されずに余白が設定されている。
マージンとパディング、似たようで異なる働きがあり、両者を上手く使いこなすことで、 Webレイアウトを思いどうりにすることが可能だ。
注意事項として、マージンやパディングはブラウザによって初期値が設定されており、 設定の仕方によって思わぬ表示になることがあるので、ブラウザで再確認が必要である。 （ htmlに設定したパディングは20pxより大きく余白が表示されている。 body領域に初期値としてマージンが設定されているためであろう。）
ボックスモデルの考え方は重要であり、様々な教科書やWeb上の解説が数多く存在している。
次は、ボックスモデルについて、より詳しく見てみよう。
..
..
..
..
..
..
..
..
..
..
..
..