インライン要素とブロックレベル要素の違いと特徴

インライン要素とブロック要素の違い

ホームページやブログを作っているとブロックレベル要素やインライン要素という言葉をよく耳にしますよね。

要素(h1やpなどの事)の多くはブロックレベル要素とインライン要素に分けられ、中にどの要素を入れられるか(h1やpなどの中に何を入れられるか)などの決まりがあります。 そしてブロックレベル要素とインライン要素には、それぞれの特徴や違いなどがあるんです。

このページではそれぞれの違いや特徴などを紹介していきたいと思います。

目次
基本的なルールについて
インライン要素ではできない事
ブロックレベルとインラインを入れ替える

ブロックレベル要素とインライン要素の特徴

インライン要素とブロックレベル要素の特徴の説明

二つの特徴を簡単にいうと、ブロックレベル要素は「縦に積まれる」インライン要素は「横に並ぶ」っていう所です。

例えば上の画像のようにpタグ(ブロック要素)は何個並べても、横には並ばずに、縦に並んでいきますよね。 逆にリンクする時に使うaタグなどのインライン要素は、複数並べても横に並んでいきます。

こんな感じで、ほぼ全ての要素がこのルールに従って並べられるので、覚えておきましょうね(^^♪

ではブロックレベル要素とインライン要素に含まれるタグをそれぞれ書いていきますね。 ここではよく使うのだけ厳選して紹介します。

ブロックレベル要素(縦に積まれるもの)

<address>,<blockquote>,<center>,<dir>,<div>,<dl>,<fieldset>,<form>,<h1>~<h6>,<hr>,<isindex>,<menu>,<noscript>,<noframes>,<ol>,<p>,<pre>,<table>,<ul>

見出し、段落、リスト、テーブルなどが該当します。

インライン要素(横に並ぶ)

<a>,<abbr>,<acronym>,<applet>,<b>,<basefont>,<big>,<br>,<button>,<cite>,<code>,<dfn>,<em>,<font>,<i>, <iframe>,<img>,<input>,<kbd>,<label>,<object>,<q>,<s>,<samp>,<select>,<small>,<span>,<strike>,<strong>,<sub>,<sup>,<textarea>,<tt>,<u>,<var>

ブロックレベル要素内の文章の一部となる要素で、リンク、強調、略語などで使うタグが該当します。

それぞれの要素は大体こんな感じになります。(他にも置換要素などありますが、ここでは省略) タグ自体は覚える必要はないので、並び方だけはおさえておきましょうね(^^♪

※タグについて詳しく知りたい場合はHTMLリファレンスをご覧ください。

基本的なルールについて

タグを記述していく場合、知っておいた方がいいルールというのがあります。

ルールといってもとっても簡単! 下の二つの事を守るだけです。

  • ブロックレベル要素の中にはブロックレベル要素・インライン要素を入れてもOK
  • インライン要素の中にブロックレベル要素を入れる事はできない

守るべきことはたったこれだけです。 これだけだとちょっとイメージしづらいと思うので、記述例を紹介しますね。

<h1><span>テキスト部分</span></h1>

h1はブロック要素でspanはインライン要素です。

ブロック要素の中にインライン要素が入っているので、正しい記述ということになります。

<span><h1>テキスト部分</h1></span>

spanはインライン要素で、h1はブロック要素です。

この場合はインライン要素の中にブロック要素が入っているため、間違った記述という事になります。

基本的には上記の例のように記述してもらえれば、問題ないです。 ただHTML5の場合は一部例外があります。

例えばインライン要素のaタグなんですが、通常であれば下のように記述するのは間違いとなります。

<a><p>テキスト</p></a>

この場合インライン要素(aタグ)の中にブロック要素(pタグ)が入っています。 通常であれば、間違った記述という事になるんですが、HTML5であれば正しい記述という事になります。

ただこういう例外的なのは一部なので、最初は覚える必要ないです。 まー覚えてもいいと思いますが、めんどいですよねw

なのでまずは最初に紹介した基本的な2つのルールしっかり守るようにしましょうね(^^♪

インライン要素ではできない事

最後にブロック要素ではできるけど、インライン要素ではできない事を紹介しますね。

インライン要素では、指定しても反映されない。というより指定できないものがあります。 それは主に下の4つです。

インライン要素では以上の4つは基本的には指定しても効きません ただしこっちも例外があるんです。

同じインライン要素でもimgタグ、inputタグ、textareaタグの3つはブロックレベル要素と同じ指定をすることができます。 なのでもちろん、width、height、margin、paddingの指定もしっかりと効きます。

ブロックレベルとインラインを入れ替える

tee160822

最後と言いましたが、もう一つだけ紹介しますね( ̄▽ ̄)

ブロックレベル要素とインライン要素の違いや特徴を紹介してきましたが、実はそれぞれを入れ替える事ができるんです。 例えばインライン要素であるspanをブロックレベル要素にしたり、ブロックレベル要素であるpタグをインライン要素化したりできちゃいます。

入れ替え方は簡単でdisplayプロパティを使うだけ。

span {display: block;}

例えばspanをブロックレベル要素にしたい場合は上のように記述します。 これをするだけでインライン要素だったものでもブロックレベル要素として扱う事が可能になるんです。

なのでmarginやpaddingも効きますし、widthやheightだって設定できるようになります。 ただしインライン要素の特徴は失います。

ちなみにその逆でブロックレベル要素をインライン要素として扱うこともできます。

p {display: inline;}

例えばp(ブロック要素)をインライン化したい場合は上のように記述します。 こうする事で、ブロック要素の特徴は失いますが、インライン要素のように横に並んでいったりするようになります。 つまりインライン要素と同じように扱う事ができるようになります。

以上「インライン要素とブロック要素の違いと特徴」についてでした(^^)/

頂いたコメント

  1. はまぞふ より:

    ゆうさん、こんにちは。
    はまぞふです。

    htmlを記載するときは、ブロックレベル要素とインライン要素と
    あまり意識せずに作っていましたが、
    違いを明確に知ることが出来ました^^

    ブロックレベル要素とインライン要素を入れ替えることが出来るのは、
    知りませんでした^^;

    そんな事が出来るんですね^^
    今後の参考にさせて頂きます。

    応援完了です^^

    • ゆう。 より:

      はまぞふさん、お久しぶりです(^^)/

      ブロック要素とインライン要素の違いは覚えておくと結構便利ですよ(^^)/

      あとdisplayプロパティはグローバルナビ作る時とか、
      リンクボタン?みたいなの作る時、よく使うと思うので、よければ試してみて下さいね(^^♪

      いつも応援ありがとうございます!!