ヘッダ部

section類タグによる画面分割の例１

section類タグによる画面分割を使って、このページを表示している。 スクロールしてみるとわかるが、ヘッダ部とナビ部は固定し、スクロールしても動かないようになっている。 具体的には、CSSによるposition:fixed;を追加、および関連項目の設定をすればよい。

ソースコード例は以下のとおりである。

<body>
    <header style="box-sizing:border-box; width:100%; height:60px; position:fixed; top:0; left:0; z-index:1; ...">
        <h3>ヘッダ部</h3>
    </header>
    <nav style="box-sizing:border-box; width:160px; position:fixed; top:60px; left:0; ...">
        <h3>navi</h3>
        menu1<br>
        menu2<br>
        menu3
    </nav>
    <main style="box-sizing:border-box; width:calc(100%-160px); position:absolute; top:60px; left:160px; ...">
        <h3>section類タグによる画面分割の例１</h3>
        <p>
        ・・・・・・・
        ・・・・・・・
        </p>
    </main>
</body>

上記のCSS設定項目で色彩設定などのあまり重要でないものは省略している。

ボックスモデルは、content-boxとborder-boxの2通りがある。 初期値はcontent-boxであるが、今回は、セクション類タグ header、nav、main はすべてborder-boxに設定している。 content-boxのままだと微妙な位置ずれが起き、微調整が非常に厄介であるためであり、 こちらの方が、サイズや位置合わせをより正確に行なうことができる。 （参照：html5の勉強―画面分割:ボックスモデル）

headerのCSSにz-indexが設定してあるのは、スクロールしたとき、ヘッダ部が消されないようにするためである。

CSSの部分は、別ファイルにスタイルシートを作成しておけば共通に使えるので、そのように変更するほうがよいだろう。

残りの問題は、<nav>内のメニュー項目を外部ファイルから読み込めるようにすることだ。 多くのHTMLファイルにおける共通項目として1つのファイルに纏めておくことは重要だろう。

デザイン的にはまだまだ不満であるが、とりあえず、完成ということにしておこう。

さて、同じhtml表示をiframeを使って書いてみることにする。

..

..

..

..

..

..

..

..

..

..

..

..