CSS

inline要素とblock要素の違い

 

こんにちは！ProgRiroです。

細かいことはさておき、早速記事の内容に入っていきましょう。

inline要素とblock要素の違いとは

大きな違いは、コンテンツの流れを分担するかしないか

HTMLで定義されているHTML要素のほとんどは、inline要素かblock要素に分類されます。

この分類に従って、ルールが定められています。例えば「block要素の内側にinline要素を配置できる」などです。

block要素とは

block要素とは、常に新しい行から始まり横幅いっぱいに広がり、親要素 (コンテナー) の領域全体を占有する要素のことです。

HTMLを以下の構造で記述します。

ブラウザで確認します。

上画像のように、ブラウザの横幅いっぱいまでp要素が広がっていることが分かりますね。ちなみに、CSSでp要素に「text-align: center」を指定しているので中央寄せになっています。

block要素を初期値としてもつ要素は、p要素やdiv要素といったものです。詳しくはこちらをご覧ください。

block要素の特徴は以下の通りです。

block要素の特徴

  • 縦並びになる
  • 前後に改行が入る
  • 幅と高さは指定できる
  • 上下左右のpaddingとmarginは指定できる
  • text-alignでテキストの中央寄せできる
  • text-alignで要素の中央寄せはできない
  • vertical-align指定できない

block要素であるp要素をinline要素に変更した場合は、CSSで「display: block;」と指定することで変更可能です。

inline要素とは

inline要素とは、コンテンツの流れを分断せず、要素を定義するタグで囲まれた範囲だけを占有する要素のことです。

HTMLを以下の構造で記述します。

ブラウザで確認します。

上画像のように、span要素は改行されることなく横一列になることが分かりますね。また、横幅はテキストが収まる幅に自動で調整されていることも分かります。

inline要素を初期値としてもつ要素は、p要素やdiv要素といったものです。詳しくはこちらをご覧ください。

inline要素の特徴は以下の通りです。

inline要素の特徴

  • 横並びになる
  • 前後に改行入らない
  • 幅と高さは指定できない（文字の大きさに比例する）
  • 上下のpaddingとmarginは指定できない
  • 左右のpaddingとmarginは指定できる
  • text-alignでテキストの中央寄せできる（親要素に指定する）
  • vertical-align指定できる

inline要素であるa要素をblock要素に変更した場合は、CSSで「display: block;」と指定することで変更可能です。

block要素の内側にinline要素を配置

最後に、block要素の内側にinline要素を配置したものを見てみましょう。

HTMLを以下の構造で記述します。

ブラウザで確認します。

上画像のように、p要素の前後では自動で改行されており、span要素は改行されることなくp要素内に収まっていることが分かりますね。横幅はブラウザの幅いっぱいまで広がっていることが分かりますね。

まとめ

block要素とinline要素それぞれのまとめは以下の通りです。

block要素：常に新しい行から始まり横幅いっぱいに広がる。親要素 (コンテナー) の領域全体を占有。

inline要素：コンテンツの流れを分断しない。要素を定義するタグで囲まれた範囲だけを占有。

自分が使いたい表示形式を選んで使えるようになれば、開発効率も出来栄えもより良くなります。

最後に全てのブラウザ結果とコードを貼っておきます。コードをコピーして、ローカル開発環境で試してみてください。

HTML

ブラウザ結果

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ja">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>block要素とinline要素</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
    <p>これはブロック要素です</p>
    <p>これはブロック要素です</p>
    <p>これはブロック要素です</p>
 
    <span>これはインライン要素です</span>
    <span>これはインライン要素です</span>
    <span>これはインライン要素です</span>
 
    <p>ブロック要素の中に<span>インライン要素</span>を含めることができます</p>
    <p>ブロック要素の中に<span>インライン要素</span>を含めることができます</p>
    <p>ブロック要素の中に<span>インライン要素</span>を含めることができます</p>
 
</body>
 
</html>

CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body {
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 400;
}
 
/* ブロック要素 */
p {
    text-align: center; /* テキストを中央寄せ（要素は中央寄せできない） */
}
 
p:nth-of-type(1) {
    background-color: #1abc9c;
}
 
p:nth-of-type(2) {
    background-color: #2ecc71;
}
 
p:nth-of-type(3) {
    background-color: #3498db;
}
 
/* インライン要素 */
span:nth-of-type(1) {
    background-color: #f1c40f;
}
 
span:nth-of-type(2) {
    background-color: #e67e22;
}
 
span:nth-of-type(3) {
    background-color: #e74c3c;
}
 
/* ブロック要素＋インライン要素 */
p:nth-of-type(4) {
    background-color: #1abc9c;
}
 
p:nth-of-type(4) > span {
    background-color: #f1c40f;
}
 
p:nth-of-type(5) {
    background-color: #2ecc71;
}
 
p:nth-of-type(5) > span {
    background-color: #e67e22;
}
 
p:nth-of-type(6) {
    background-color: #3498db;
}
 
p:nth-of-type(6) > span {
    background-color: #e74c3c;
}

 

最後までお読みいただき、ありがとうございました。

block要素 CSS HTML inline要素 Programming
ABOUT ME
ProgRiro
エンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング、映画鑑賞、読書、ギター。 将来、フルスタックエンジニアとなり起業を目指して勉強中。 発信力をつけるためにブログやってます。 プログラミング初心者の方を全力でサポートします。
RELATED POST