【HTML初心者必読】ブロック・インライン・インラインブロックの違いについて
こんにちは！
web系エンジニアを目指して学習中のsiと申します^ ^
この記事の対象者
- ブロック・インライン・インラインブロックの違いを知りたい方
- 主なHTMLタグの使い方を知りたい方
各要素の違い
まずは表で確認してみましょう！
| 要素種類 | 高さ・横幅の指定 | デフォルトの高さ | デフォルトの横幅 | 他要素との並び方 |
| ブロック | 可能 | 要素内の中身による | 親要素と同じ | 下に並ぶ |
| インライン | 不可能 | 要素内の中身による | 要素内の中身による | 横に並ぶ |
| インラインブロック | 可能 | 要素内の中身による | 要素内の中身による | 横に並ぶ |
３つの要素があることが分かりますね。
次は、これらの要素が実際にどのような表示になるか確認してみましょう！
See the Pen
Untitled by si (@s158)
on CodePen.
グレーで表示されてるのがブロック要素
水色で表示されているのがインライン要素
オレンジで表示されているのがインラインブロック要素
ブロックには高さが、インラインとインラインブロックには高さと横幅が指定されています。ですが、インラインには高さも幅も反映されず、要素内の中身の高さと幅の範囲にしか背景色が反映されていません。
また、ブロックには横幅指定をしていませんが横幅いっぱいまで領域が広がっているのが分かります。そのため、次の要素が下に配置されています。インラインの場合は次の要素が横に配置されています。インラインブロックも同様です。
※CSSを見てみると分かりますがインラインブロックには、display: inline-block;が指定されているのが分かります。インラインブロックはこのようにCSSでdisplayプロパティを指定してあげないとインラインブロックの振る舞いをしてくれません。
よく使うHTMLタグの紹介
ここからは、ブロック要素・インライン要素に分けて、
よく使うタグの紹介をしていきます！
主なブロック要素
div
汎用的なコンテナー。classやidでスタイリングしない限り、ただのブロック要素としての役割しか持たない。
See the Pen
div by si (@s158)
on CodePen.
h1〜h6
見出しを作成するためのタグ。数字が大きくなるほどサイズは小さくなる。
「h」はHeadingの略。
See the Pen
h1~h6 by si (@s158)
on CodePen.
p
段落を作成するためのタグ。使用頻度はとても高い。
「p」はparagraphの略。
See the Pen
p by si (@s158)
on CodePen.
ul, ol, li
箇条書きを作成するためのタグ。基本的には「ulとli」「olとli」のセットで使用する。
ulは黒丸の箇条書き、olは番号の箇条書きを作成出来る。
See the Pen
ul,ol,li by si (@s158)
on CodePen.
以下で紹介するheader〜asideは、基本的にはdivタグと同様の振る舞いをするタグですが、上手く使用することでSEO対策に効果があります！
header
ヘッダーを作成するためのタグ。1つのページに１つしか記述することが出来ない。
footer
フッターを作成するためのタグ。1つのページに１つしか記述することが出来ない。
main
ページ内の主要コンテンツを作成するためのタグ。1つのページに１つしか記述することが出来ない。また、header, footer, nav, article, asideの子要素になることが出来ない。
nav
ナビゲーションを作成するためのタグ。
article
記事などの1つの独立したコンテンツを作成するためのタグ。中には見出しタグ(h1~h6)を使用しなければいけない。
section
章を作成するためのタグ。中には見出しタグ(h1~h6)を使用しなければいけない。
aside
サイドバーなどの補足情報を作成するためのタグ。
例えば、このような感じでレイアウトを行います。
See the Pen
header,footerなど by si (@s158)
on CodePen.
主なインライン要素
a
リンクを表すためのタグ。
aは「Anchor」の略。
span
特に意味を持たないタグ。divのインライン版のようなもの。
img
画像を表すためのタグ。
strong
テキストの強調を表すためのタグ。太字で表示される。
small
テキストを一回り小さく表すためのタグ。
code
プログラムのソースコードを表すためのタグ。
See the Pen
a by si (@s158)
on CodePen.
インライン要素なので、全て横並びになってるのが分かりますね！
まとめ
- ブロックは高さと横幅が指定出来るが、インラインは指定できない
- ブロックは隣り合った要素が下に回り込むが、インラインは横に並ぶ
- ブロックとインラインの良いとこ取りをした「インラインブロック」という要素がある
- インラインブロックを使いたい場合は「display: inline-block;」を指定する
- header,footer,mainなどのタグを上手く使用すればSEO対策を行える
参考記事
- articleとsectionとasideの違いと使い方
- 【mainタグ】初心者でも使い方を完全にマスター！
- なぜ header main footer aside タグを使うのか？SEO 対策になるのか？
- html5のarticle・section等、まとめる要素まとめ
