web系エンジニアを目指す私、siが学習のアウトプットをメインにプログラミングについての記事を書いていきます。

【HTML初心者必読】ブロック・インライン・インラインブロックの違いについて

 
この記事を書いている人 - WRITER -

 

こんにちは!

web系エンジニアを目指して学習中のsiと申します^ ^

 

この記事の対象者

  • ブロック・インライン・インラインブロックの違いを知りたい方
  • 主なHTMLタグの使い方を知りたい方

 

各要素の違い

 

まずは表で確認してみましょう!

要素種類 高さ・横幅の指定 デフォルトの高さ デフォルトの横幅 他要素との並び方
ブロック 可能 要素内の中身による 親要素と同じ 下に並ぶ
インライン 不可能 要素内の中身による 要素内の中身による 横に並ぶ
インラインブロック 可能 要素内の中身による 要素内の中身による 横に並ぶ

3つの要素があることが分かりますね。

 

次は、これらの要素が実際にどのような表示になるか確認してみましょう!

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つのページに1つしか記述することが出来ない。

 

footer

フッターを作成するためのタグ。1つのページに1つしか記述することが出来ない。

 

main

ページ内の主要コンテンツを作成するためのタグ。1つのページに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対策を行える

 

参考記事

 

この記事を書いている人 - WRITER -

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© .i DO WHAT I WANT , 2022 All Rights Reserved.