knowledge 【 HTML×CSS 】インライン要素とブロック要素の違い
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

【 HTML×CSS 】インライン要素とブロック要素の違い

知識と経験|2018年10月16日

2018年10月16日
  • このエントリーをはてなブックマークに追加

HTMLとCSSの使い方で、多い質問がインライン要素とブロック要素です。

例えばdivやsection、ulやdlなどは、ブロック要素にあたります。
spanやstrongなどは、インライン要素にあたります。

でも、これらをブロックとインラインに分ける意味は何でしょうか?

なんとなく存在は知っていても、概念がはっきりしない方も多いと思います。
そこで、今回はブロック要素とインライン要素について、説明させて頂きます。

ブロック要素について

ブロック要素とは、コンテンツのエリアを作る要素です。

例えば、メイン画像、ニュース一覧、ブログの記事詳細、ヘッダー、フッター、もっと細かい単位でのコンテンツを含め、ある一定領域を囲うタグがブロック要素にあたります。

ブロック要素の特徴としては、使うと次のコンテンツが改行されます。
CSSで何か特殊な処理をしない限り、改行は必ず発生します。

headerやfooterタグ、divやsectionタグなどは、全て使うと改行されますよね。
これらは、コンテンツを囲うブロック要素です。

ただ、全てのブロック要素を覚える必要はありません。
ブロック要素は、頻出タグのほとんどにあたります。

なんとなく、ブロック要素とはこういうものだという概念を覚えておけばOKです。
覚えるべきタグはどちらかと言うとインライン要素です。

インライン要素について

インライン要素は、基本的に文章中、文字の一部を装飾するタグです。
例えば、ある文章があって、特定の単語だけ赤くしたい場合がありますよね。

そんな時、spanタグ等で囲んで、classをつけて装飾することになります。
もしブロック要素を使ってしまったら、改行されてややこしくなるでしょう。
だから、インライン要素では改行されません。

そう考えると「インラインである」という意味も、明確になるのではないでしょうか。

インライン要素は基本的にpaddingやmarginが効きません。
float含め、多くのcssタグが効かないものと考えましょう。
基本的には文章中の言葉を修飾するものです。

インライン要素にcssを上手く効かせるには、ある指定をする必要があります。
対象の要素にcssでinline-blockを指定することです。
すると、inline要素の改行されない特徴を残しながら、cssを効かせられます。

なお、最低限覚えておくべきインライン要素は下記の2つです。

<span>〜〜〜</span>

まず、spanタグです。
これだけでは、特に何もおきません。
CSSで装飾して、初めて意味がうまれます。

<strong>〜〜〜</strong>

そして、strongタグです。
こちらは、太字になるタグです。
基本的に、この2つを覚えておきましょう。

何度も試して、自由に使い分けられるように慣れてみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら