• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / CSS初心者 / 10.ブロックレベル要素とインライン要素について

10.ブロックレベル要素とインライン要素について

池田祐太郎 | 2013年10月24日 公開

知っておくとCSSの組み立てがラクになる、「ブロックレベル要素とインライン要素の違い」について説明します。
これらはHTMLのタグの種類です。HTMLタグにはすべて「要素」があります。要素っていうとなんか難しく聞こえるんですがなんのことはなく、「このタグがどういう種類か?」ということです。
それが2種類あり「ブロック要素」か「インライン要素」どちらか。
例えばh1、p、div、ulはブロックレベル要素。span、a、img、bgはインライン要素です。

目次

  • 1 ブロックレベル要素とは
    • 1.1 大事なのは「要素が横幅100%になる」
  • 2 インライン要素とは
    • 2.1 余白部分はどこ?
  • 3 まとめ

ブロックレベル要素とは

要素が横幅100%に拡がり、前後に改行が入るHTMLタグをブロックレベル要素と分類します。単純にブロック要素といったりも。
まずは以下の例を見てみましょう。

例:

サンプル文字

サンプル文字

サンプル文字

赤い背景色の「サンプル文字」と書かれたエリア、これがブロック要素のエリアです。要素が100%に広がってますね。前後に文字がありますがbrなどで改行をしてないが改行してくれています。

大事なのは「要素が横幅100%になる」

先ほどの例の赤い部分。これがブロック要素のエリアです。わかりやすいように赤く色をつけましたが、つけないと右側に余白があるように見えます。以下のように。

背景色無しの例:

サンプル文字

これだと「右側に余白があるから、次に続く要素を右に持っていきたい」と考えてなんとか右にもってこようとします。しかしこれはブロック要素。前後に改行が入るためすぐ後ろにタグを書いても右側にはきてくれません。

サンプル文字

右側にもってくる文章