カテゴリー:HTML

記事本文

この記事をお勧めしたい方

思った通りに表示されず困っている方!




今日もお疲れです!
ビギナー中里です!


今回はインライン要素とブロック要素について学びたいと思います。


HTMLにはインライン要素とブロック要素があるのですが、これを知っていないと

「あ、勝手に改行された。」
「あれ、これは改行されないぞ?」

なんてことになり、悩んでしまうことがあります。



本記事で得られるスキル

  • インライン要素とブロック要素の正しい使い分け





それではいきましょう!










インライン要素とブロック要素の違い

インライン要素とブロック要素の違いは


続く要素が改行されるかどうか


で見分けることができます。
実際に見てみましょう。



div
タグはブロック要素、
span
タグはインライン要素です。
以下のコードを書いてみます。


<div style="background-color: yellow;">divタグはブロック要素です。</div>
<span style="background-color: lightgreen;">spanタグはインライン要素です。</span>
<span style="background-color: lightblue;">spanタグはインライン要素です。</span>


実際の表示はこうなります。


divタグはブロック要素です。
spanタグはインライン要素です。spanタグはインライン要素です。


div
で囲まれたテキストは
br
を書いていなくても改行されています。
対して、
span
で囲まれた要素は改行されず、続けて表示されています。


また、色を付けたことでわかるように

基本的にブロック要素は
幅いっぱいに領域を広げます。

対してインライン要素は
自分自身の大きさが領域になります。










インライン要素

インライン要素となるものをいくつが挙げてみます。

  • span
  • img
  • a
  • em
  • b
  • i
  • input


これらのインライン要素は、ブロック要素の中に存在することがルールです。


<!-- OK -->
<div>
<img src="path" alt="画像">
</div>

<!-- NG -->
<body>
<img src="path" alt="画像">
</body>



インライン要素の中にブロック要素を含めることはできません。
インライン要素の入れ子は可能です。


<!-- OK -->
<div>
<a href="path">
<img src="path" alt="画像">
</a>
</div>

<!-- NG -->
<span>
<div>これはダメ</div>
</span>


NGの書き方をしても、ブラウザで表示が大きく崩れることはありませんが
文法的に間違いですので、気をつけましょう。
Another HTMLなどのHTML採点では減点されます。










ブロック要素

ブロック要素となるものをいくつか挙げてみます。

  • div
  • p
  • h1-6
  • ul
  • li
  • table
  • form


ブロック要素にはルールが多く、中に書くことのできる要素が
決まっているものも多くあります。
上に挙げた要素で確認してみましょう。





ブロック要素内に書くことのできる要素

div
 ー 全てのインライン要素、ブロック要素
p
 ー 全てのインライン要素
h1-6
 ー 全てのインライン要素
ul
 ー li
li
 ー 全てのインライン要素、ブロック要素
table
 ー caption、thead、tfoot、tbody、tr
 ※tr内のth、tdには全てのインライン要素、ブロック要素を記述可能
form
 ー formを除く全てのインライン要素、ブロック要素



デザイン目的でブロック要素を使う場合、ほとんどが
div
になります。










HTML5におけるインライン要素をブロック要素

HTML5では、インライン要素とブロック要素という考え方は廃止されています。
代わりにセクションイング・コンテンツやフロージング・コンテンツといった
考え方が出てきましたが、これらを覚えるにあたり、従来のインライン要素と
ブロック要素の考え方は十分に役に立ちます。
また、HTML5でもひとまずは従来の考え方でコードを書いても問題ありません。










今回はここまで、お疲れ様でした!


ある程度の規模のサイトでは、文法チェックは頻繁に行われます。
SEOという検索順位対策によるものですが、個人のサイトでも
関係のない話ではありませんので、なるべく綺麗に書けるよう
心がけたいですね。


次回はclassとidについてです。
ではまた!