レンタルオフィス「METSオフィス」運営責任者のオバタです。
今回は、TechDrill「HTML/CSS」実践記事６回めということで「ブロック要素、インライン要素の盲点」に挑戦していきます。ホームページのカスタマイズ中に要素の横中央寄せにつまづくことが多い、要素の高さ表示がうまくいかないといった方々にオススメのコンテンツです。
■過去のTechDrill実践記事はこちら
⇒ 第１回目「指示書通りに実装してみよう！」
⇒ 第２回目「擬似クラスを用いてテーブル要素のセルを自由に装飾してみよう」
⇒ 第３回目「初級編：clearfixを書いてみよう」
⇒ 第４回目「中級編：clearfixについて、きちんと説明できますか？」
⇒ 第５回目「上級編：結局、clear: both; って何なの？」
TechDrillの登録方法については第１回目の実践レビューをご確認ください。
目次
問１・中央寄せ時の「text-align」「margin」について
とある要素を「横方向で中央寄せ」する際、下記のようなコードを用いることがあります。
これらの用途についてそれぞれ説明せよ、という設問。
{text-align: center;}
{width: 960px; margin: 0 auto;}
中央寄せ時の「text-align」「margin」の仕様について解く
これらは要素を中央寄せする際に頻繁に使われますが、仕様の違いを把握していないと中央に寄らない、効かないといった状態になりがちです。
「text-align: center;」は適当に使っても中央寄せできない
まず最初に「text-align: center;」ですが、こちらはテキストや画像などの要素を中央に寄せたい時に使う方が多いと思います。中央に寄せたい要素に「text-align: center;」を指定しているのにうまく配置できなかったという方は少なくないのではないでしょうか。
基本的に「text-align: center;」はインライン要素に対して有効となるもので、ブロック要素である親をセレクタに指定する必要があります。これを無視して適当に使うと「text-align: center;」を指定しているはずなのに効かないといった状態になってしまいます。
ブロック要素というのは「h1」などのタイトルタグ、「p」「div」「table」などの段落やグループのタグのことでひとつのかたまりとして認識されるものを指します。
一方、インライン要素というのは、「img（画像タグ）」「a（リンクタグ）」「br（改行タグ）」など、主にブロック要素内の文章の一部として使われるものを指します。
これら要素ごとのタグをある程度理解していないと、中央寄せしたい時に所かまわず「text-align: center;」を乱用してしまいがちなのでご注意ください。
「margin: 0 auto;」はブロック要素に使う
次に「margin: 0 auto;」ですが、こちらは基本的にブロック要素を中央寄せしたい時に使うものです。ブロック要素はwidthの数値に関係なく横の領域を占拠していますが（floatを使った場合は除く）、marginを使って中央寄せ、右寄せ、左寄せにそれぞれ配置することができる仕様になっています。
「margin: 0 auto;」で中央寄せの例
「margin: 0 auto;」を指定すると上下のmarginは０、左右は等しく自動調整されます。
| テーブル中 | 中央 |
|---|
「margin-left: auto;」で右寄せの例
ブロック要素に「margin-left: auto;」だけ指定すると右寄せが可能です。
margin-rightを追加して数値を変えると余白を作れます。
| テーブル右 | 右寄せ |
|---|
「margin-right: auto;」で左寄せの例
ブロック要素に「margin-right: auto;」だけ指定すると左寄せに。
margin-leftを追加して数値を変えると余白を作れます。
| テーブル左 | 左寄せ |
|---|
「display:inline-block;」には「margin: 0 auto;」が効かない
「display:inline-block;」を使ってインラインブロック要素にした場合は「margin: 0 auto;」で中央寄せできないのでご注意ください。インラインブロックを中央寄せしたい時は、親のブロック要素に「text-align: center;」を指定するのが一般的です。
問２・htmlとbodyの「height: 100%;」について
html,body要素に対して、以下のような記述をすることがあります。
この意味について解答するという設問。
html, body {height: 100%;}
htmlとbodyにはなぜ「height: 100%;」が必要なのか
これは単純に、ブラウザの縦表示を100％にするためです。
要素の序列的にはhtml＞body＞その他の要素となりますが、親要素はそれぞれ高さを指定しないと子要素の高さ（height）と同じものと認識してしまいます。
基本的にhtmlとbodyの高さを100%としておけば他すべての子要素の高さを思い通りに指定して表示できるようになります。子要素に高さを指定したはずなのに高さの表示がおかしいという場合は、親要素のheightの数値が指定されているかを確認するようにすると良いでしょう。
問３・インラインとブロックの仕様について
下記のコード例において、インライン要素とブロック要素の色のついた部分が重なっている理由と、インライン要素の色のついた部分の高さが、重なっている部分を足しても他二つに比べて小さい理由を解答するという設問。
<div class="display-inline">display: inline</div>
<div class="display-block">display: block</div>
<div class="display-inline-block">display: inline-block</div>
<div class="display-none">display: none</div>
div {
margin: 10px;
padding: 20px;
background-color: red;
}
.display-inline{
display: inline;
}
.display-block{
display: block;
}
.display-inline-block{
display: inline-block;
}
.display-none{
display: none;
}
インラインとブロックはなぜ重なっているのか
当設問ではmargin:10px;とpadding:20px;が指定されているので要素が重なること自体が変だと感じる方もいらっしゃるかと思いますが、インライン要素は上下の位置関係を調整することができない仕様になっているため注意が必要です。
インライン要素でもpaddingで広げた領域の背景には色がつくためこの仕様は非常にわかりにくい部分がありますが、インライン要素の上下が重なってしまう場合は、隣接している要素のmarginを調整することで解決する場合が多いです。（※インライン要素自体にmarginの上下を指定することは無意味です。）
インライン要素であっても左右のpaddingでは位置の調整が可能なので、少し複雑ですが横の位置を調整する際には使えるので覚えておくと良いと思います。
インラインだけなぜ高さが低いのか
基本的に要素の高さはheightやpaddingで指定することが多いですが、当設問にはheightが指定されていないのでpaddingを消して純粋な高さを確認してみます。
この状態を見ると、line-heightの差によって高さに違いが出ていることがわかります。インライン要素には幅と高さが指定できないため、line-heightの値で統一することもできません。
インライン要素は指定できないプロパティが多いので、レイアウト構成に誤って多用しないよう注意が必要ということですね。
まとめ
ブロック要素とインライン要素の違いを知ることで、ウェブサイトのレイアウトを０から組む時や既存のデザインをアレンジする際に必ず役に立ちます。
特に「text-align: center;」と「margin: 0 auto;」を使った横の中央寄せは非常に多くの場面で使われるので、仕様について覚えておくと良いでしょう。
ブロックとインライン要素関連で困った時は要素の特性と親・子要素の関係を確認してみると解決策が見つかることが多いので参考にしてみてくださいね。
