1.8 画面分割の例

1.6節でsection類要素の<header>、<nav>などを使ってみたが、汎用タグ<div>とまったく同じ働きであり、 異なるところは何もなかった。

異なるのは、ただ単に、意味づけの問題であり、<header>はWebページの導入部的なところで、 <nav>はナビゲーション的な役割の意味で使うことになる。 検索システムがhtmlの構文解析を行なう場合、これらのタグの意味を反映させたところで処理を行なうらしいので、 でたらめに使うと検索システムからはじかれる可能性があるから、正しくこれらのタグを使うことが推奨されている。

画面分割の例１の場合、ブラウザ横サイズの変更に対応して本文横サイズが追随し、 内部の文書も呼応して改行位置が変動するようになっている。 それなりに面白い配置のようにも思えるが、本文領域のサイズ変動幅が大きすぎて、逆に完成形を予測できず、思わぬ落とし穴に嵌まりそうである。 さらに、デザイン的センスとしてもイマイチのような気がする。

また、横サイズを小さくした場合、ナビ部の下に本文が落ちる配置の方が、スマホ対応としても良いように思える。これは、メディアクエリーで解決できる。

この画面分割の例２の場合、例１と同様にヘッダ部とナビ部を固定表示とし、本文のみスクロールできるようにした。 異なるのは、本文の横サイズが固定であることと、ブラウザ横サイズ変動に対してナビ部と本文が常に中央付近で表示され、 大きく広げると両サイドに空白が生じるようになっていることである。

ヤフージャパンと似たような感じであり、いつも同じWebが表示され、ブラウザが小さい場合は横スクロールバーが出現し、隠れている部分も見ることができる。

ヤフージャパンの場合、左側のサイドメニューやトップメニューを含めて全て本文と同じようにスクロールするので、あまり凝っているとは言い難いが、 それなりに不自由なく多くの人に人気のサイトである。 例２の場合は、ヘッダ部やナビ部が固定表示となっているが、利用目的に応じて固定表示が良いかどうか判断の分かれるところだろう。

このような本文の横サイズが固定のWebページも巷に沢山あり、それなりに良いところもある。 一つは、デザイン的に固定化できるところであり、ブラウザの表示サイズが大きい場合や小さい場合などを考慮しないでWeb制作ができることである。

しかし最近は、スマホ対応や大画面Web対応も考慮するWebページが多くなり、ある程度フレキシブルにサイズが変化できるサイトが増えてきたように思われる。

1.9 ボックスモデル

画面分割の例２のところでも少し触れたが、マージンやパディングなどが具体的にどうなっているのかの基礎をしっかりと学んでおく必要がある。

上図は、W3Cが推奨するボックスモデルであり、初期設定はこのモデルになっている。 「box-sizing:content-box;」が初期値であり、「box-sizing:border-box;」とすると、 width,heightはborder、paddingを含むサイズを表すようになる。（下図）

どちらが良いかは時と場合による。 同じサイズのボックスを複数作成する場合、 レイアウト崩れ防止のためにborder-boxにすることも多い。

ボーダーborderは枠線であり、前節ではサイズをほとんど無視していたが、 厚みを任意に設定することもできる。

htmlタグの内のどれが、このボックスモデルを適用できるのかは重要な問題である。

HTML5以前は、ブロックレベル要素とインライン要素の２つに分類されていたが、 HTML5以降は、7種類の分類に変更になってしまった。 正直言って、この分類、まだよくわからん！ しかし、従前のブロックレベル要素の考え方はまだ踏襲できそうに思える。

より具体的に、タグ毎に見ていくことにしよう。

<p>paragraph</p>

<div>div</div>

<h3>h3</h3>

<header>header</header>
<a>link</a>
<img> <a>link</a>

<br> <strong>strong</strong> <b>b</b>

上図は、同じCSSを上記すべてのタグに適用した場合の表示である。

style="margin:10px; border:3px solid grey; padding:10px; background-color:yellow; width:200px; height:40px;"

が、適用スタイルシートである。

<p>,<div>,<h3>,<nav>,<header>はブロックレベル要素と呼ばれるタグであるが、 ほぼ指定通りにマージン、パディング、サイズが設定されている。

しかし、<a>,<img>,<br>,<strong>,<b>は異なる様相を示している。 特に、サイズ指定は完全に無視されているものの、横マージンとパディングは有効になっている。

imgとbrについてはIEとchromeで表示が異なっている。このような使い方は規格外なのであろう。

これ以上議論してもあまり意味を成すとも思えないが、<br>を除くほとんど全てのタグには領域が設定されていることは理解できる。

結論として、領域表示にあまり意味をなさないタグにボックスモデルを適用するのは、ほとんど無意味である。

しかし、それ以外のブロックレベル要素として領域表示に意味のあるタグはたくさんあり、 ボックスモデルを十分意識してWeb制作を行うことは重要である。


次は、CSSの基礎について、より詳しく見てみよう。

back    next