レスポンシブWebデザインの為の基礎知識 > レスポンシブWebデザインの為のHTML/CSSのキホン レスポンシブWebデザインの為のHTML/CSSのキホン †インライン要素とブロック要素 †HTMLの要素には大きく分けてインライン要素、ブロック要素と両方の特性を併せ持つインラインブロック要素があります。 インライン要素 †インライン要素は基本的に高さや幅、余白といった属性をもちません。 ※ただしIEは独自の仕様でこれらの属性を持つ事ができます。 《主なインライン要素》 HTML <span style="background:red;">インライン要素A</span> <span style="background:blue;">インライン要素B</span> <span style="background:green;">インライン要素C</span> 実行結果
インライン要素Aインライン要素Bインライン要素C
ブロック要素 †幅や高さ、余白などを持つ事ができますが、幅の指定がない場合は、親要素の幅いっぱいまで広がる。 《主なブロック要素》 <div style="background:red;">インライン要素A</div> <div style="background:blue;">インライン要素B</div> <div style="background:green;">インライン要素C</div> 実行結果 インライン要素A インライン要素B インライン要素C
インラインブロック要素 †インラインブロック要素は上記の2つの特性を合わせ持つ要素。 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> 実行結果 インラインブロック要素A インラインブロック要素B インラインブロック要素C
CSSによるインライン/ブロック/インラインブロックの指定 †以下のように、CSSでインライン/ブロック/インラインブロックを指定する事が可能。 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> 実行結果
spanをブロック要素に変更
divをインライン要素に変更 spanをインラインブロック要素に変更divをインラインブロック要素に変更
レスポンシブなページを作成する為の要素指定 †ディスプレイサイズが変わってもレイアウト崩れしないようにWebページをデザインする手法は、リキッドレイアウト や レスポンシブWebデザイン と呼ばれる。 レスポンシブなWebページを作成するには、上記のインラインブロック要素をうまく使用する必要がある。 大きな解像度のディスプレイでみた場合、両者は同じに見えるがブラウザのウィンドウ幅を小さくした場合に、例1の方は画面に表示しきれずにはみ出してしまう事が確認できる。 IE8以下でもインラインブロック要素を使用するには †IE7以下 及び IE8の一部のマイナーバージョンでは 通常の css によるインラインブロックの指定が効かない。 <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> 実行結果 要素A 要素B 要素C 要素D
|