SoyaBlog

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

HOME>CSS>inline、block、inline-blockについてと違い
ブログ投稿日時:
ブログ更新日時:
inline、block、inline-blockについてと違い

inline、block、inline-blockについてと違い

  1. この記事の目的
  2. inline要素について
  3. block要素について
  4. inline-block要素について
  5. それぞれの要素の違い
  6. 今回のまとめ
1.

この記事で学べること

この記事ではinline要素、block要素、inline-block要素についての解説とそれぞれの要素の違いについて学んでいければと思います。

2.

inline要素について

インライン要素はブロックレベル要素の内容として用いられる要素です。

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

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

・ 要素が横に並ぶ

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

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

インライン要素を使うときは基本的にブロック要素の中で(一部)として使います。

インライン要素の主要なタグ
spanタグ、aタグ、imgタグ、brタグ、strongタグ、bタグ、subタグ、supタグ など
3.

block要素について

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

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

・ 要素が縦に並ぶ

・ 幅と高さを指定できる

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

ブロック要素の主要なタグ
divタグ、pタグ、h1~h6タグ、ulタグ、olタグ、liタグ、dlタグ、dtタグ、ddタグ など
4.

inline-block要素について

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

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

・ 要素が横に並ぶ

・ 幅と高さが指定できる

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

5.

それぞれの要素の違い

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

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

各要素の特徴と違い

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

6.今回のまとめ

この記事ではinline要素、block要素、inline-block要素について解説しました。

各要素の特徴と違いを理解して使い分けてることができればコーディングがよりできるようになります。

もし忘れそうな方はこの記事をブクマしていただけると嬉しいです。

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