RWDの為のHTML/CSSのキホン - 闘うITエンジニアの覚え書き

レスポンシブWebデザインの為の基礎知識 > レスポンシブWebデザインの為のHTML/CSSのキホン

レスポンシブWebデザインの為のHTML/CSSのキホン †

• 関連
  • CSSセレクタ
  • bootstrapのグリッドシステム
  • jQueryメモ

インライン要素とブロック要素 †

HTMLの要素には大きく分けてインライン要素、ブロック要素と両方の特性を併せ持つインラインブロック要素があります。
※厳密にはもっと多くの種類がありますが、レスポンシブなWebデザインをするうえで重要なものはこれら３つです。

インライン要素 †

インライン要素は基本的に高さや幅、余白といった属性をもちません。 ※ただしIEは独自の仕様でこれらの属性を持つ事ができます。
また、インライン要素を続けて記述すると、要素を横に並べる事ができます。

《主なインライン要素》
span, a, label など

HTML

<span style="background:red;">インライン要素A</span>
<span style="background:blue;">インライン要素B</span>
<span style="background:green;">インライン要素C</span>

実行結果

ブロック要素 †

幅や高さ、余白などを持つ事ができますが、幅の指定がない場合は、親要素の幅いっぱいまで広がる。
またブロック要素は、要素の終端で自動的に改行される為、複数のブロック要素を横に並べる事はできない。
※幅(width)と回り込み(float)の指定を行う事でブロック要素でも横に並べる事は可能だが、回り込みの特性を理解して使用しないとレイアウト崩れの原因になりやすい。

《主なブロック要素》
div, form, ul, h1, h2 など

<div style="background:red;">インライン要素A</div>
<div style="background:blue;">インライン要素B</div>
<div style="background:green;">インライン要素C</div>

実行結果

インラインブロック要素 †

インラインブロック要素は上記の２つの特性を合わせ持つ要素。
幅や高さ、余白などを持つ事ができ、終端の自動改行もない為、要素の横に並べる事も可能。
ただしHTMLのタグにはデフォルトでこれに相当するものがなく、使用するには css の display 属性に inline-block を指定する。
※ただし、古いバージョンのIE(IE7以下とIE8の一部のマイナーバージョン)ではインラインブロック要素をサポートしていない為、別の仕込みが必要（後述）。

HTML

<div style="display:inline-block;background:red;">インラインブロック要素A</div>
<div style="display:inline-block;background:blue;">インラインブロック要素B</div>
<div style="display:inline-block;background:green;">インラインブロック要素C</div>

実行結果

CSSによるインライン/ブロック/インラインブロックの指定 †

以下のように、CSSでインライン/ブロック/インラインブロックを指定する事が可能。
※ただし、古いバージョンのIE(IE7以下とIE8の一部のマイナーバージョン)ではインラインブロック要素をサポートしていない為、別の仕込みが必要（後述）。

CSSによる指定方法

HTML

<span style="display:block;background:red;">spanをブロック要素に変更</span>
<div style="display:inline;background:blue;">divをインライン要素に変更</div>
<span style="display:inline-block;background:green;">spanをインラインブロック要素に変更</span>
<div style="display:inline-block;background:green;">divをインラインブロック要素に変更</div>

実行結果

レスポンシブなページを作成する為の要素指定 †

ディスプレイサイズが変わってもレイアウト崩れしないようにWebページをデザインする手法は、リキッドレイアウト や レスポンシブWebデザイン と呼ばれる。

レスポンシブなWebページを作成するには、上記のインラインブロック要素をうまく使用する必要がある。
以下のサンプルでは、複数の要素(div)をレイアウトするのに、tableタグを使用した場合と、インラインブロック要素を使用した場合の違いが確認できる。

大きな解像度のディスプレイでみた場合、両者は同じに見えるがブラウザのウィンドウ幅を小さくした場合に、例1の方は画面に表示しきれずにはみ出してしまう事が確認できる。

サンプルページ

IE8以下でもインラインブロック要素を使用するには †

IE7以下 及び IE8の一部のマイナーバージョンでは 通常の css によるインラインブロックの指定が効かない。
これを回避する為にはCSSを以下の通り記述する。
※これはアスタリスクハックと呼ばれるcssハックの手法の1つ。（Webサイト制作でよく使用される手法）

<style>
.ib {
    display: inline-block;
    /* 以下の2行を追加 */
    *display: inline;
    *zoom: 1;
}
</style>

上記の ib を 対象要素の class に指定すれば、古いIEでもインラインブロック要素として認識される。

使用例

<div class="ib" style="background:red;">要素A</div>
<div class="ib" style="background:blue;">要素B</div>
<div class="ib" style="background:green;">要素C</div>
<div class="ib" style="background:yellow;">要素D</div>

実行結果