ゆるりと綴る日常のこと

すぐこのブログ
HTML＆CSS

【初心者向け】CSSのブロックレベル要素とインラインレベル要素の違いは？

📅

こんにちは、ただいまHTML＆CSSを学習中のすぐこです。

HTML＆CSSのCSSを学習していると出てくる、ブロックレベル要素とインラインレベル要素。

何が違うの？ むしろ何か違うの？

って思いませんか？

私も最初は全然見分けがつきませんでした。

ですが、実はとっても簡単に理解できちゃうんですよ。

今日はHTMLを始めたばかりのあなたのために、画像つきで分かりやすく説明していきますね。

なお、今回の記事を書くにあたり、Webサイトチャンネルさんの動画を参考にしました。

この記事はこんな人におすすめ

  • HTMLを勉強し始めたばかりの人

  • 独学でWeb制作を学んでいる人

  • 「要素」って何？というビギナー(ナカーマ)

ブロックレベル要素とインラインレベル要素って何？

ブロックレベル要素とは？

  • 文章の塊や区切りを作る要素です

  • 画面の幅いっぱいにドーン！と広がります

  • 上下にスペースができ、他の要素を押しのけます

ブロックレベル要素の例

  • ：万能選手！箱(要素のまとまり)を作る

  • **

    〜

    **：見出しを作る

  • ：段落を作る

インラインレベル要素とは？

  • 文章の一部として使用される要素です

  • テキストや他の要素の中に、スン……と溶け込むように表示される要素です

  • 他の要素と同じ行に並びます

インラインレベル要素の例

ブロックレベル要素＝積み木ブロック インラインレベル要素＝文(ライン)の中(イン)

と覚えると良いですよ。

実践！ブロックレベル要素とインラインレベル要素の見分け方

簡単な見分け方をご紹介します！

【ブロックレベル要素かな？チェックリスト】

□ 改行される □ 横いっぱいに広がる □ 高さと幅が設定できる

【インラインレベル要素かな？チェックリスト】

□ 文章の中に溶け込む □ 横に並ぶ □ 高さと幅が指定できない

例えば、width: 200px;を指定してみてください。

反映○＝ブロックレベル要素、反映✕＝インラインレベル要素です。

初心者目線の疑問｜こんなときどうする？Q&A!

ここでは、私が疑問に思ったことを書いています笑

もしかしたら、初心者のあなたも同じようなことを疑問に思うかも知れませんのでお役に立てればうれしいです。

Q1: ブロックレベル要素の中にインラインレベル要素を入れてもOK？

A1:OK！

部屋（ブロックレベル要素）の中に、家具や小物（インラインレベル要素）を置くイメージです。

**Q2: **ブロックレベル要素とインラインレベル要素の使い分けは？

A2:

  • ブロックレベル要素はレイアウトを分けるときに便利です。(例：セクションやコンテナ)

  • インラインレベル要素は文章内の特定部分を強調したり、リンクにしたりするときに使います。

**Q3:**要素の種類は変えられるの？

**A3:**変えられます！

変更するには、display プロパティを使います。

• インライン要素からブロック要素へ→display: block; • ブロック要素からインライン要素へ→display: inline;

Q4: display: block;とdisplay: inline-block;の違いは？

A4:

  • display: block;：要素をブロックレベル要素として扱います。

  • display: inline-block;：インラインレベル要素の性質を持ちつつ、幅や高さを指定できます。

inline-blockは、inlineかつblockと覚えましょう。

まとめ｜ブロックレベル要素→ドーン！インラインレベル要素→スン……

ブロックレベル要素とインラインレベル要素の違い、比べてみるとけっこうありますよね！

ブロックレベル要素＝画面の幅いっぱいに**ドーン！**と広がる

インラインレベル要素＝文章中に、**スン……**と溶け込むように表示される

初心者目線での一番の違いは、**デフォルトの状態で高さと幅が指定できるか？**だと考えています。

最初は難しく感じるかもしれませんが、部屋と小物、など身近なものに例えたり、私のように**オノマトペで考える(？)**と理解しやすいですよ。

挫折せずに理解するために、あなたも自分流の覚え方を開発してみると面白いかもしれません笑

今回の記事があなたの学習に役立てたらうれしいです！
← 記事一覧に戻る