1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【HTML / CSS】ブロック要素とインライン要素

Last updated at Posted at 2024-06-28

はじめに

学習したことを自分用の参考書のようにまとめていきます。

ブロック要素とは

ブロック要素とは、 "全幅になる" ものです。

幅や高さを指定できて、エリアを自由にコントロールすることができます。

下の画像は、h1タグ(ブロック要素)に背景を指定したものです。

スクリーンショット 2024-06-28 6.45.43.png

インライン要素とは

インライン要素とは、 "全幅にならない" ものです。

基本的には幅や高さを指定することができません。

ですが、幅や高さを指定したいときは、" display: inline-block; "を指定してあげることで、インライン要素にブロック要素の特徴を追加することで可能になります。

下の画像は、aタグ(インライン要素)に背景を指定したものです。

スクリーンショット 2024-06-28 6.50.00.png

使い分け

  • レイアウトの構造を作るときにはブロック要素を使用します。例えば、ページ全体のセクションやコンテナを定義するときです。

  • テキストやコンテンツの一部分を装飾するためにはインライン要素を使用します。例えば、特定の単語を強調したり、リンクを作成したりする場合です。

さいごに

いかがだったでしょうか。

他にもいろいろな記事を書いているのでぜひ読んでいただけたら嬉しいです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?