2018/4 CSSとHTML レイアウト入門
ブロックとインライン
CSSには様々な機能がありますが、まずはブロックとインラインについて押さえましょう。
違い
ブロックはレンガのように縦に積まれます。
インラインは文字のように横に並びます。
インラインの注意点
インラインは文字のように扱われるので
- 高さ・幅・マージンといったサイズを指定できない
- 画像(img)は特殊で高さ幅を指定できる
- 横に並び文字のように折返しされる
経験的にはインラインは補助的？に使い、ブロックを主に使うという印象です。
HTML
HTMLのタグによってブロックかインラインか別れます。
ブロック
- div
- h1-h6
- p
- ol
- ul
- form
インライン
- a
- img
- input
- textarea
- select
- b
- strong
自分が扱うタグがどちらか理解せず、インラインに高さや幅を指定して、、、でも思い通りに作れない！ということが初学者にはありがちです。
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-blockに比べ高機能です。その分使い方も単純ではないので、よく調べて利用すると良いでしょう。
ポイント
下へ下へ積み重ねることは難しくないのですが、横にレイアウトを組もうとすると途端に難しくなる、イメージ通りに組めないことがあります。
そのときにはinline-blockやflexboxについて調べて活用していくと、筋の良いレイアウトを組む手助けになるでしょう。
逆にwidthやheightだけで無理やりレイアウトを組むことは、現代では筋の悪いレイアウト手法と言えるでしょう。