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などは、インライン要素にあたります。
でも、これらをブロックとインラインに分ける意味は何でしょうか?
なんとなく存在は知っていても、概念がはっきりしない方も多いと思います。

そこで、今回はブロック要素とインライン要素について、説明させて頂きます。

>>Python資格の取得をおすすめする4つの理由

ブロック要素について

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

例えば、メイン画像、ニュース一覧、ブログの記事詳細、ヘッダー、フッター、もっと細かい単位でのコンテンツを含め、ある一定領域を囲うタグがブロック要素にあたります。
ブロック要素の特徴としては、使うと次のコンテンツが改行されます。
CSSで何か特殊な処理をしない限り、改行は必ず発生します。
headerやfooterタグ、divやsectionタグなどは、全て使うと改行されますよね。
これらは、コンテンツを囲うブロック要素です。

ただ、全てのブロック要素を覚える必要はありません。
なんとなく、ブロック要素とはこういうものだという概念を覚えておけばOKです。

>>Pythonって何ができるの?Excelにも使えます!

インライン要素について

インライン要素は、基本的に文章中、文字の一部を装飾するタグです。
例えば、ある文章があって、特定の単語だけ赤くしたい場合がありますよね。
そんな時、spanタグ等で囲んで、classをつけて装飾することになります。
もしブロック要素を使ってしまったら、改行されてややこしくなるでしょう。
だから、インライン要素では改行されません。

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

インライン要素にcssを上手く効かせるには、ある指定をする必要があります。
対象の要素にcssでinline-blockを指定することです。
すると、inline要素の改行されない特徴を残しながら、cssを効かせられます。
なお、最低限覚えておくべきインライン要素は下記の2つです。

まず、spanタグです。

<span>〜〜〜〜</span>

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

そして、bタグです。

<b>〜〜〜〜〜</b>

こちらは、太字になるタグです。

基本的に、この2つを覚えておきましょう。
何度も試して、自由に使い分けられるように慣れてみてください。

>>J Career Schoolならビジネススキル・ITスキルの講座が受け放題・質問し放題

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

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

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

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

ウエヤマ ショウタ

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

ウエヤマ ショウタ

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

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

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

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

 詳しくはこちら