レイアウトはブロックで考える

Webページは印刷物とは違う

WebページはHTMLでブロック状にレイアウトされます。そのため印刷物のように絵と絵が重なりあったり、曲線状のレイアウトは得意ではありません。 もちろんそうした表現も不可能ではありませんが、ユーザーの一般的な閲覧のし方に合わせること(ユーザビリティ)を考えても、またメンテナンス性を考えても、ページレイアウトはブロックで配置していくのが基本となります。 これはデザインをする上で頭に置いておかなくてはならないことです。

リキッドレイアウトという考え方

ブロック状に配置することには上記の他に、コンテンツ(ページの内容)を画面の拡大縮小に追随させるという大きな目的があります。 PCでWebページを見る時に、ブラウザの幅を拡げたり縮めたりする事があると思います。また、タブレットやスマホなどの解像度が違う機器で見る事もあるでしょう。 こうした時に、ページの各要素をブロック状に配置しておけば、画面が広い時は横いっぱいに表示し、狭い時ははみ出た要素を下に回りこませることによって、要素を縮小することなく表示することが可能になります。

ブロックレベル要素

HTMLで定義されている要素のうち、<body>~</body> の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類されます。
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。 ページを作成する時は、これらのタグを用いてブロック状にレイアウトしていくことになります。 ブロックレベル要素の主なものには、以下のものがあります。

<div>、<dl>、<ul>、<ol>、<p>、<table>、<address>、<blockquote>、<form>、<h1>-<h6>、<hr>、<table>、<pre>

インライン要素

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 インライン要素の主なものには、以下のものがあります。

<a>、<b>、<br>、<font>、<i>、<img>、<small>、<span>、<strong>、<input>、<select>、<textarea>

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

>> サイトの構成を考える