2018/4 CSSとHTML レイアウト入門

ブロックとインライン

CSSには様々な機能がありますが、まずはブロックとインラインについて押さえましょう。

違い

ブロックはレンガのように縦に積まれます。 インラインは文字のように横に並びます。

インラインの注意点

インラインは文字のように扱われるので

経験的にはインラインは補助的?に使い、ブロックを主に使うという印象です。

HTML

HTMLのタグによってブロックかインラインか別れます。

ブロック

インライン

自分が扱うタグがどちらか理解せず、インラインに高さや幅を指定して、、、でも思い通りに作れない!ということが初学者にはありがちです。

CSS

HTMLのタグによって別れることを紹介しましたが、CSSで指定することで種別を変更することができます。

<div class='inline'></div>

.inline{
    display: inline;
}


<span class='block'></span>

.block{
    display: block;
    width: 300px;  /* blockなら幅高さを指定できる */
    height: 200px;
}

このようにCSSのdisplayを使ってブロックのdivをインラインに。インラインのspanをブロックに変更できます。 タグの特性を理解しつつ、必要に応じてCSSで適切に変更することで作られます。

DevTools

ある程度作り込んだWebページの要素が、ブロックであるかインラインであるかなど、適応されているCSSを確認する方法があります。 それがChromeのDevToolsです。

起動の仕方

確認したい要素の上にマウスを合わせ=>右クリック=>検証をクリックするとDevToolsウィンドウが現れます。

確認の仕方

確認したい要素

右上の現在のHTMLが表示されているエリアで確認したい要素をクリックすると、左側の実際のページ上のどこの表示部分かオーバレイ表示で示してくれます。

適応されているCSSの確認

右下のStylesタブで適応されているCSSを確認できます。下に行くほど元々のCSSで、上に行くほど上書きしたCSSになります。取り消し線で消されているのは、上の方で上書きされたため無効になっているという意味です。もし、いくらCSSを変えても見た目が変わらない場合、他のCSSで上書きされていて無効になっている場合があり、ここを見るとすぐに判明します。

一時的にCSSを書き換えての確認

確認できるStylesタブ内で一時的にCSSを書き換えたり追加したりできます。これを使えばCSSファイルをいじって保存してブラウザをリロードして試行錯誤する手間が省けて便利です。

横レイアウト

ブロックを使えば下へ下へ積み重ねているレイアウトは実現できると思いますが、 例えば左にメニューエリア・中央にコンテンツ・右に詳細情報エリアと、横へ横へ並べるレイアウトは注意が必要です。

inlineではない

inlineは前述したように高さや幅が指定できません。そのため上記のように画面幅内におさまるように幅を指定することができません。 横レイアウトに使うものではありません。

floatでもない

CSSが貧弱だった一昔前では、横レイアウトにfloatを使うことが正解でした。 しかし、floatは高さ問題やclearfixが必要だったりとややバギーです。 現代においてはより適したCSSがあります。 floatを使わないほうがよいでしょう。

inline-blockを使え

インラインとブロックの中間的な機能を持つdisplay: inline-block;があります。 インラインのように横に並んでブロックのように幅や高さ、margin、paddingを指定できます。 現在ではfloatの代わりに、このinline-blockを使うと良いでしょう。 ただし、inline-blockで並べるときっちり並ばずに隙間ができたり、下揃えになって困ることがあります。 そんなときは、「inline-block 隙間」「inline-block 上揃え」で検索してみると解決できます。

flexboxを使え

数年前に登場した新しめの機能で、IE11以降がターゲットであればだいぶ安心して使えます。 フレキシブルにレイアウトを組むための機能display: flex;です。

ポイント

下へ下へ積み重ねることは難しくないのですが、横にレイアウトを組もうとすると途端に難しくなる、イメージ通りに組めないことがあります。 そのときにはinline-blockflexboxについて調べて活用していくと、筋の良いレイアウトを組む手助けになるでしょう。 逆にwidthheightだけで無理やりレイアウトを組むことは、現代では筋の悪いレイアウト手法と言えるでしょう。