Loading...
CSSにおけるインライン要素とブロックレベル要素

CSSにおけるインライン要素とブロックレベル要素

公開
2018.08.13
更新
2018.10.29
  • 講座

  • CSS

本講座ではCSSにおけるインライン要素とブロックレベル要素を見ていきましょう。

インライン要素・ブロックレベル要素に該当するHTMLタグを復習したい場合はHTMLにおけるインライン要素とブロックレベル要素を確認してみましょう。

CSSが効かない?

一見するとCSSが効かないように見えるコードが存在します。

では、いくつかコードを書いていきましょう。
以下のソースコードを任意のファイル名で保存してください。

<!doctype html>
<html lang="ja">
<head>
  <title>CSSにおけるインライン要素とブロックレベル要素</title>
  <!-- CSS記述場所 -->
</head>
<body>
  <!-- HTML記述場所 -->
</body>
</html>

それではまず、テキストを中央寄せにするCSSを、styleタグを使って定義しましょう。
「CSS記述場所」のコメントを消して以下のコードを追加します。

<style>
.textCenter {
  text-align: center;
}
</style>

これでclass="textCenter"という属性が追加されたHTML要素はテキストが中央寄せになります。

それでは、インライン要素でテキスト中央寄せをしてみましょう。

「HTML記述場所」のコメントを消して以下のコードを追加します。

<span class="textCenter">インライン要素</span>

表示を確認してみましょう。

インライン要素のテキスト中央寄せ

中央寄せになっていませんね。
CSSが効いていないように見えます。

今度はブロックレベル要素でテキスト中央寄せをしてみましょう。

先ほどのコードを以下のように変更します。

<div class="textCenter">ブロックレベル要素</div>

表示を確認してみましょう。

インライン要素のテキスト中央寄せ

今度は中央寄せになっていますね。

この現象は決して不具合ではありません。
何が起こっているのか、一緒に見ていきましょう。

インライン要素

インライン要素がどのような形になっているのかを確認するために、境界線を設定して表示を確認してみましょう。

境界線を設定する以下のCSSをstyle要素内に追加します。

.aroundBorder {
  border: solid 1px gray;
}

インライン要素にこのCSSを当ててみましょう。
HTMLを以下のように変更します。

<span class="aroundBorder">インライン要素</span>

表示を確認してみましょう。

インライン要素のテキスト中央寄せ

境界線がテキストのまわりにしか設定されていませんね。

インライン要素がテキスト中央寄せにならないのは不具合ではなく、横幅が足りなかったために中央寄せにならなかった、ということが分かります。

ブロックレベル要素

ブロックレベル要素がどのような形になっているのかを確認するために、境界線を設定して表示を確認してみましょう。

CSSはインライン要素に使ったものと同様です。

.aroundBorder {
  border: solid 1px gray;
}

ブロックレベル要素にこのCSSを当ててみましょう。
HTMLを以下のように変更します。

<div class="aroundBorder">ブロックレベル要素</div>

表示を確認してみましょう。

インライン要素のテキスト中央寄せ

境界線が横幅いっぱいに設定されています。

ブロックレベル要素は横幅が画面いっぱいにまで伸びるため、テキストの中央寄せが可能だということが分かります。

インライン要素に無効なCSSプロパティ

インライン要素は単なるテキストのようなもので、後ろに他のインライン要素が続けばテキストのように後ろに回り込みます。
また、自身の幅・高さは内包するテキストや要素によって決まります。
このため、幅・高さを指定するwidthheightのようなCSSプロパティは効きません。
上下余白を設定するmargin-topmargin-bottomも無効になります。

また、改行が入ることによって意図しない見た目になることもあるでしょう。

  • borderを設定して改行された例

インライン要素のテキスト中央寄せ

まとめ

本講座では

  • CSSで見たインライン要素とブロックレベル要素の特徴
  • インライン要素に無効・意図しない表示になるCSSプロパティ

について学びました。

今後CSSの表示で困ったときには、本講座で見たインライン要素とブロックレベル要素の「形」を思い出してみましょう。
どうして表示が崩れるのか、どうすれば意図した表示になるのかが分かるはずです!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!