2019/06/10)この記事ではインライン要素とブロックレベル要素について解説していきます。くまなんか聞いたことはあるけど、よくわかんないだよなあざらし最初は分かりづらい考え方だよね。大切な概念だからしっかりと学んでいこう!いきなり重要なことを述べますが、「インライン要素」「ブロックレベル要素」という概念はHTML5ではなくなりました。現在では、「表示形式がインライン」、「表示形式がブロック」という風に呼んでいます。いった点も踏まえて、この記事では最新のHTML5に基づいた解説を行っていきます。現在のWEBサイトはほぼHTML5で作成されているので、こちらの解説で最新の考え方をインプットしていきましょう。この記事を読むことで下記のようなことが理解できると思います。「インライン要素」、「ブロックレベル要素」は、長年HTMLで使われてきた概念なので、そのような考え方があると教わった方も多いと思います。「インライン要素」、「ブロックレベル要素」という概念は古い考え方で、現在のHTML5ではそういう呼び方はしなくなりました。HTML5では、「表示形式がインライン」もしくは「表示形式がブロック」などのように捉えています。考え方も変わってきているので、以前の考え方で覚えてしまった人は、この解説を呼んで知識をアップデートしましょう。あざらしWEBの世界はいろんな技術が発展、更新されていくから、常に知識をアップデートするという意識が大切だよインライン要素、ブロックレベル要素とはなんだったのか?インライン要素、ブロックレベル要素について、昔と今で何が変わったのか簡単に解説します。あざらしわかりやすさを重視して、簡略化してざっくり解説するね!雰囲気を掴んでくれたらOKだよ!HTML5以前のHTMLでは、要素は「ブロックレベル要素」と「インライン要素」に分類されていました。ブロックレベル要素とインライン要素の違いは大きく分けて次の二つでした。要素を配置できる場所が違うデフォルトの見た目や、適用できるスタイルが違う要素を配置できる場所が違ったHTMLにおける要素の配置のルールは、ブロックレベル要素かインライン要素かで決められていました。「インライン要素のなかにブロック要素を置いてはいけない」のように決められていて、そのルールに従ってHTMLをマークアップしていました。デフォルトの見た目や、適用できるスタイルが違ったブロックレベル要素かインライン要素かで、CSSの「display」というプロパティのデフォルト値が違いました。displayは表示形式を表していて、表示形式が違うと見た目や適用できるスタイルが違ってきます。ブロックレベル要素だとデフォルト値が「block」インライン要素だとデフォルト値が「inline」となっていました。あざらし表示形式が違うとどんな風に見た目が変わるのかはあとで詳しく説明するよ!とりあえず表示形式が違っていたんだ〜くらいで覚えておいてねちなみに、displayの値はCSSで変更が可能です。HTML5からインライン要素、ブロックレベル要素が廃止された先ほど挙げた2つの特徴のうち、1つ目が変わり、2つ目が残りました。残ったHTML5から、要素を配置できる場所は「コンテンツモデル」という新しい概念によって定義されることになりました。コンテンツモデルというのは、要素を7つくらいのこグループに分け、それぞれの配置ルールや使い方を定義したものです。コンテンツモデルについてはHTML5における要素の分類(コンテンツ・モデル)を参照してください。コンテンツモデルが定義された事で、「インライン要素」や「ブロックレベル要素」という分け方をしなくなったので、これらの概念はなくなりました。表示形式のブロック、インラインは残った一方で2つめの「デフォルトの見た目や、適用できるスタイルが違う」という考え方は現在も残りました。それぞれの要素は、デフォルトの表示形式があり、「display」プロパティを使って変える事ができる点も変わりません。デフォルトの表示形式が何になっているかは、大体が以前までの要素と同じなので、慣れている人はわかりやすいと思います。違いをまとめると要するに、HTML5以前は、要素ごとにインライン要素、ブロック要素と振り分けられていて、それによって配置できる場所やスタイルが決められていました。対して現在は、配置のルールはコンテンツモデルを使うため、インライン要素・ブロック要素という概念はなくなりました。表示形式としての「インライン」や「ブロック」は残っていて、要素によってデフォルトの値が決まっています。あざらしインライン要素やブロックレベル要素という概念はもう捨てようブロックとインラインの違いくまブロックとインラインでどう違うの?あざらし表示形式が違うと、見た目や適用できるスタイルが違うんだ!ひとつずつ解説していくよ!要素の表示形式にはインラインやブロック、その他にも数種類あり、それぞれが全く別の性質を持っています。表示形式はとても重要な概念で、これを理解していなければ思ったとおりの見た目に仕上げる事ができません。ここでしっかりと理解しておきましょう。表示形式を変更するにはCSSのdisplayプロパティを使って下記のように書きます。キーワード;表示形式を指定するキーワードには「ブロック」や「インライン」を代表にいくつかの種類が用意されています。ここではよく使われる基本的な値4種類を紹介します。非表示にするこの4つは頻繁に使う値なので、特徴も含めて理解しておきましょう。表示形式ブロックの特徴は下記の通りです。要素の横幅は自動的に親要素いっぱいに広がる要素の前後で改行され、次に続く要素はその要素の下に配置されるマージンやパディングを上下左右に指定するできる横幅(width)や高さ(height)を指定することができるポイントは(横幅を指定しなければ)親要素いっぱいに横幅が広がる点です。次に続く要素は改行されてから表示されます。使うp要素もデフォルトの表示形式がブロックの一つのため、どんなに短文でも要素自体の長さは親要素いっぱいに広がっています。背景色や境界線をつけると要素が広がっている事が確認できます。ブロックは最も一般的な表示形式といえます。ブロックの要素がレンガのように積み重なってWEBページが構成されています。表示形式がデフォルトでブロックの要素には下記のようなものがあります。表示形式インラインの特徴は下記の通りです。横幅は中身の長さによって自動的に伸び縮みする改行はされず、次に来る要素は横に並ぶ横幅(width)や高さ(height)は要素の中身によって自動的に決まるため、指定することができないマージンやパディングは、左右は指定できるが上下は効果なし※ただしimg、input、textareaなどの一部のタグは横幅・高さや余白の設定が可能です。インラインは横幅が要素の長さによって変わります。短かい要素であればその分の横幅になります。改行が挿入されず、次の要素は横に並びます。文章内に要素を差し込む場合などに使われ、a要素やspan要素が代表的です。インラインのマージンやパディングについて表示形式がインラインの場合、上下に余白を設定することができません。厳密にいうと、マージンの上下は設定しても効果がなく、パディングの上下は前後の要素に余白がめり込みます。いずれにしても、インラインの表示形式の要素で上下の余白を設定しようとしても思った通りにならない事が多いので、初めから設定しない方が良いででしょう。上下に余白を取りたい場合は、別の表示形式の「インラインブロック」を使いましょう。表示形式インラインブロックの特徴は下記の通りです。横幅は中身の長さによって自動的に伸び縮みする改行はされず、次に来る要素は横に並ぶ横幅(width)や高さ(height)を指定することができますマージンやパディングを上下左右に指定するできます表示形式インラインブロックはその名の通り、インラインとブロックを組み合わせたような振る舞いをします。設定できるインラインです。インラインのように横幅や縦幅は自動で伸び縮みし、改行が入らないため横に並びます。一方でブロックのように、横幅(width)や高さ(height)を指定することもできますし、余白の設定も上下左右できます。要素を横並びにしつつ、高さや余白も指定したい場合にとても便利な表示形式です。横並びのメニューを作成するときなどに表示形式インラインブロックはよく使われます。リストを横並びにするだけならインラインでも問題なくできますが、横幅を指定したり、上下に余白を設定したい場合はインラインブロックを使うと実現できます。例の通り、横幅(width)や高さ(height)が効いていますし、余白も上下左右効いているのがわかります。余白の設定方法について詳しく知りたい方は下記記事が参考になります。【css】marginとpaddingの使い方や違いを解説この記事ではCSSのmargin(マージン)とpadding(パディング)について、それぞれの使い方や違いをわかりやすく解説していきます。表示形式ノンの特徴は下記の通りです。指定された要素は非表示になるnoneを指定すると、その要素は非表示になります。簡単な例を見てみましょう。none;}メニュー1メニュー2メニュー3noneを指定した、メニュー2だけ表示されなくなった事がわかります。ノンの使いどころこれは表示・非表示を切り替えたい要素に便利です。「パソコンでは表示したいけれども、スマホの時は隠したい」というような場合などが考えられます。スマホの場合は画面が小さく、表示できる情報量が少なくなるので割とよく使われる手法です。非表示になっている場合でも、読み込み自体は行われているため、表示速度が早くなるということではないので注意しましょう。非表示にするすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。【イラスト解説】初心者のためのCSS入門!自作できるように解説html&CSS入門HTML5のセクションを区切る要素まとめhtml&CSS入門CSSで重なり順を変更!z-indexの使い方解説html&CSS入門cssのopacityを使って透明度を操作する方法を解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。