CSSの初歩に欠かせないブロック要素とインライン要素とは?

ブロック要素とインライン要素って何?という疑問に答えます。コーディングを勉強し始めた時にまずこの違いに苦しむと思います。わたしも苦しんだ1人で、基礎はわかったけど実際にコーディングしてみたらこれらの要素が意外と大事だった、と気づかされました。CSSをコーディングする上で欠かせないブロック要素とインライン要素の基礎知識をこの記事で学んでいってください。

※HTML5段階ではブロック要素とインライン要素は古い呼び方ですが、コーディング上の役割としては必要な知識なのでぜひ本記事で学んでいってください。

ブロック要素とインライン要素とは?

ブロック要素とインライン要素、そもそもこれらはなんのことかというと、HTMLのいろんなタグを役割ごとに付けられた呼び名のようなものです。カテゴリー分けした時の呼び名ですね。

どのようにカテゴリーわけされているのかというと、ブロック要素タグで囲まれた部分はそれ一つで箱のような役割を持っていて、インライン要素タグで囲まれたものは文章の一部のような役割を持っています。サイトを作る上で文章や画像を配置していくと思いますが、これらがどのように配置されてどのように装飾できるのかが、ブロック要素かインライン要素かで決まってきます。

 
名もなき男
で、結局のところ要素を意識して何の意味があるの?

ブロック要素とインライン要素はHTMLの話ですが、CSSでレイアウトを整えたり装飾する時にブロック要素やインライン要素の意味が本領を発揮します。HTMLやCSSを練習でコーディングする時にあると思いますが、例えばグローバルナビゲーションのボタンをコーディングするとします。背景に色を付けたりその色の部分をボタンっぽく整えたりしようとしたら、ただ文章の背景だけが配色されてボタンっぽくならない!なんてことも。一概にこれ!とは言えませんが、ブロック要素やインライン要素を意識しないとこういうことがあります。

 
名もなき男
妙に具体的だな。さてはそんな失敗をしたことがあるのか…?

わたしはProgateでHTMLの基礎を学んで、今度はCSSの勉強がてらサイトのTOPページをコーディングしてみようとしたらこの問題に出会いました。もちろんProgateではブロック要素やインライン要素の話はされていましたし、それらが重要であることも記載がありました。ただ、いざ自分でゼロからコーディングしてみて初めてその重要性がわかったわけです。

  • ブロック要素…サイトのレイアウト上で箱のような役割。タグはdiv、h1〜h6、p、ul、ol、liなど
  • インライン要素…文章の一部としての役割で、デザイン装飾がほぼできない。タグはa、span、img、input、textareaなど。

ブロック要素の特徴

それぞれの要素の役割がわかったところで、まずはブロック要素の特徴について説明していきます。

  • 横幅と高さの指定ができる(marginやpaddingの指定ができる)
  • ブロック要素同士の並び方は、改行が入って縦に積まれていく
  • 例えば背景色を変更したら、ブロック要素であるところ全体の色が変わる

かなりざっくりですが、まとめるとこのような特徴があります。コーディングをして最初に苦戦するであろうものが余白の設定でしょう。ブロック要素で囲まれた部分はmarginやpaddingの設定ができるので、割と自由に配置ができます。

また、要素同士は縦に並んでいくので、例えばliタグなんかを使ってグローバルナビゲーションを作ろうと思ったら、最初は縦に並んでいます。これを横並びにしようと思ったらfloat: left;などを使って横並びにするわけですね。

背景色などを変えようと思ったら、想像以上に広範囲の場所の色が変わるなんてこともありますよね。この場合はインライン要素とうまく使い分けたりする必要があります。サイトの表示に箱でどんどん区画を分けていって、必要なところだけ装飾ができるように細かく分類していけばOKというわけです。

インライン要素の特徴

次にインライン要素の特徴を説明します。

  • 横幅と高さの指定ができない(marginやpaddingの指定ができない)
  • インライン要素同士の並び方は、改行が入らず横に並んでいく
  • 例えば背景色を変更したら、インライン要素になっているところの文や画像の背景だけ色が変わる

極端な言い方をすると、文や画像だけをピンポイントで装飾されます。ブロック要素とは大きく違って配置場所も融通が効かず、色などの装飾もごく限られた範囲でしかされません。

ただ、サイト制作をする上でaタグやimgタグは必須で使うので、インライン要素は使わなければなりません、インライン要素をどのようにうまいこと装飾していくかというと、inline-block要素にすればいいのです。どういうことかというと、aタグは絶対使わなきゃならない、けどaタグのところをブロック要素みたいに装飾して場所を変えたり余白を設定したいなんていう時に、インライン要素にブロック要素の自由さを付け足すのです。

インライン要素でありながらブロック要素の役割を持っているということですね。この場合、aタグにclass指定をして、そのclassにdisplay: inline-block;と指定してあげればOK。あとは装飾したいCSSのコードを打ち込んであげればいろんな装飾ができるわけです。今回は基礎理解のためにこのような説明をしましたが、実際は親要素と子要素の関係やデザインの優先度などでそううまくはいかないので、親要素と子要素、コードの上書きなどを加えて理解する必要があります。

ブロック要素やインライン要素という呼び方は古い?

ここまでゴリゴリに説明してきてあれなんですが、実はブロック要素とインライン要素という呼び方は古いで、HTML4くらいの呼び名です。

 
名もなき男
ここまで読んだ時間を返せコラ…!

ちょっと待ってください!焦らず続けて読んでください。

ブロック要素やインライン要素はタグを分類した時のカテゴリーわけと言いましたが、今はフローコンテンツやセクショニングコンテンツなどという風にさらに細かく分類されています。とは言え、タグごとの役割を考える上では、ブロック要素とインライン要素という考え方は全然無駄じゃなく、ちょっと古い書籍ならば普通にブロック要素とインライン要素という呼び名で説明がされています。

役割自体はおおまかにブロック要素とインライン要素に基づいているので理解しておいた方が得だと思います。

ブロック要素とインライン要素を理解するためには?

なんとなくこれまででブロック要素とインライン要素の理屈はわかったと思います。が!わかった=できるとならないのがコーディングの難しさ。結局のところどうすればいいのかというと、実際に自分でゼロからコーディングしてみるのが一番です。

本当にこれに尽きます。正直、Progateとかで一生懸命基礎を学んで知識を付けても、その後すぐに思い描くようなデザインをコーディングできるわけではないです。見本を見つけて、それをゼロからコーディングして、検証してパクって、それでもうまくいかないところを調べて…というのを積み重ねていって初めてHTML・CSSのなんたるかがわかります。最初は書いたコードがうまくいかなくて、うまくいかない問題をたった一つ解決するのに数時間かかり、見た目上は何にも変化せず1日が終わるなんてこともしばしば。

けれど、これを超えない限りはコーディングをマスターできないので、根気強く続けることが大切です。この記事を読んでいる方は何かしらの理由でHTML・CSSを会得しようとしているはずなので、強い意思を持って続けていってください。ゲームなどと同じで、経験値をつめば必ず報われます、絶対。

心折れずに頑張ってコーディングをマスターして、明るい未来を掴んでください!わたしもまだまだなので継続的に頑張ります。

正直どの教材でも大差ないと思いますが(←失礼)、わたしが読んでて良かった本を2冊ほど以下に記載しておくのでご参考ください。実践形式で自分でコーディングができて内容も基礎から充実しているのでおすすめです。

CSSの初歩に欠かせないブロック要素とインライン要素とは?
最新情報をチェックしよう!