SoyaBlog

これを見れば解決しそうや

HOME>CSS>インライン要素、ブロック要素、インラインブロック要素についてと違い
ブログ投稿日時:
ブログ更新日時:
インライン要素、ブロック要素、インラインブロック要素についてと違い

インライン要素、ブロック要素、インラインブロック要素についてと違い

  1. この記事の目的
  2. インライン要素について
  3. ブロック要素について
  4. インラインブロック要素について
  5. それぞれの要素の違い
  6. 今回のまとめ
1.

この記事で学べること

この記事ではインライン要素、ブロック要素、インラインブロック要素について解説しています。

各要素の特徴や違いについて学んでいきましょう。

2.

インライン要素について

インライン要素はブロック要素の中 (一部として) で用いられる要素です。

インライン要素は主に文章の一部として扱われます。教科書に引いてあるラインマーカーなどに近いイメージです。

インライン要素の主な特徴は下記の通りです。

・ 要素が横に並ぶ

・ 幅と高さが指定できない

・ 上下の余白が調整できない (※左右の余白は調整可能)

インライン要素の主なタグは下記の通りです。

インライン要素の主なタグ

spanタグ、aタグ、imgタグ、brタグ、strongタグ、bタグ、subタグ、supタグ など

3.

ブロック要素について

ブロック要素は情報のかたまりやコンテンツをまとめるための要素です。

ブロック要素の主な特徴は下記の通りです。

・ 要素が縦に並ぶ

・ 幅と高さを指定できる

・ 余白を自由に調整できる

ブロック要素の主なタグは下記の通りです。

ブロック要素の主なタグ

divタグ、pタグ、h1~h6タグ、ulタグ、olタグ、liタグ、dlタグ、dtタグ、ddタグ など

4.

インラインブロック要素について

インラインブロック要素は、ブロック要素とインライン要素の中間の要素です。

インラインブロック要素の主な特徴は下記の通りです。

・ 要素が横に並ぶ

・ 幅と高さが指定できる

・ 余白を自由に調整できる

5.

それぞれの要素の違い

ここまでインライン要素、ブロック要素、インラインブロック要素について見てきました。

各要素の特徴と違いを見比べてみましょう。

各要素の特徴と違い

各要素の特徴と違いを理解して使い分けていきましょう。

6.

今回のまとめ

この記事ではインライン要素、ブロック要素、インラインブロック要素について解説しました。

インライン要素はブロック要素の中 (一部として) で用いられる要素です。

ブロック要素は情報のかたまりやコンテンツをまとめるための要素です。

インラインブロック要素は、ブロック要素とインライン要素の中間の要素です。

各要素の特徴と違いを理解して使い分けれるようにしていきましょう。

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