2018/11/29ブロック要素、インライン要素の違いを理解しようHTMLの要素(h1タグやstrongタグ等)は、大きく分けてブロック要素とインライン要素という2つのグループに分けることができます。各グループの違いがわかなければ、paddingを設定したけど反映されないなどの問題が発生し、イメージ通りのレイアウトを作成することができません。2つの違いを理解して、入門者からもう一つ上のレベルにステップアップしましょう。インライン要素をブロック要素へブロック要素ブロック要素は、親要素の幅一杯まで広がる要素で、特別な処理を行わなければ、ブロック要素の後は必ず自動改行され、次のブロック要素が横に並ぶことはありません。pタグはブロック要素なので、親要素の幅いっぱいに広がり、自動で改行されています。初期設定では、下の図の右側のようにブロック要素が横並びになることはありません。インライン要素は、ブロック要素とは異なり、親要素の幅一杯に広がることはなく、要素に含まれるコンテンツの大きさによってその幅が決まります。インライン要素は、通常ブロック要素の中に記述し、インライン要素の横にインライン要素が並ぶことができます。下記のようにブロック要素のpタグの中で、横並びでも存在することができるのがインライン要素です。aタグ、bタグ、strongタグ、buttonタグすべてインライン要素です。実際にHTMLを使ってブロック要素とインライン要素を確認してみましょう。color)を使って、block要素とinline要素を区別できるように下記の2つのクラスを使用します。aタグのinline要素には、inlineクラスを設定しています。他のサイトへのリンクを張るaタグなどがあります。class="inline">クリック</a>すると詳細がわかります。class="block">ブロック要素はpタグなどがあります。</p>ブラウザで確認するとブロック要素の背景色はブラウザの幅一杯に広がっており、ブロック要素ごとに改行が行われています。インライン要素は背景色の大きさがコンテンツの長さで決まっていることがブラウザの表示を見てもはっきりとわかります。ブロック要素とインライン要素の違いについてブロック要素とインライン要素の大きな違いの一つは、ブロック要素では自動で改行が行われ、インライン要素は自動で改行が行われないことでした。自動改行以外にもいくつかの違いがあるので、1つ1つみていきましょう。marginといったボックスモデルを理解していることがポイントになります。ボックスモデルがわからない人は、まずこちらからボックスモデルを確認して下記を読み進めることをお勧めしています。高さ(height)と幅(width)の設定の違いについてブロック要素は、高さと幅の変更を行うことができますが、インライン要素は、変更を行うことができません。インライン要素の高さと幅はコンテンツによって決まります。marginの設定の違いについてブロック要素は、marginの適用を上下左右で行うことができますが、インライン要素は、左右のみのmargin適用が可能で、上下への適用を行うことができません。paddingの設定の違いについてブロック要素は、paddingの適用を上下左右で行うことができます。インライン要素は、marginとは異なり、上下左右で適用することができます。設定を行えても上下部分については、上下の要素の領域にはみ出してしまいます。<p>これはブロック要素です。class="padding">これはインライン要素です。<p>これはブロック要素です。</p>識別しやすいようにpaddingは背景色(background-color)の設定も行っています。}paddingの左右は、左右の要素と重複しておらず、設定どおりの領域を確保していますが、上下に関しては、他の要素へ入っていることがわかります。ブロック要素とインライン要素の違いの理由ブロック要素とインライン要素に違いがあることがわかりました。この違いはどこから生じているのでしょう。答えは、displayプロパティの設定値によって、ブロック要素として動作するかインライン要素として動作するかが決まります。ブロック要素の代表であるhタグやpタグにはすべてdisplayプロパティにblockという値が初期値として設定され、インライン要素の代表であるaタグやstrongタグには、inlineという値が初期値として設定されています。これらの値は、固定値ではなく、自由に変更することができます。aタグのインライン要素のdisplayプロパティをblockにすることで、ブロック要素として扱うことができます。インライン要素をブロック要素へインライン要素であるaタグを利用して、インライン要素からブロック要素への変更を確認してみましょう。href="#">トップページへのリンク</a>背景色とmarginの設定を行っています。インライン要素では、marginの設定は、左右にしか適用されません。margin:30px;}インライン要素のため、marginの上下は適用されず、左右のみ適用されています。幅もコンテンツの長さに依存するので文字部分の長さだけ背景色が広がっています。displayプロパティをCSSに追加します。値は、blockを設定します。block;}ブロック要素になると親要素の幅一杯に広がり、marginもinline要素の時は左右のみでしたが、上下にもmarginが適用されていることを確認することができます。インライン要素をブロック要素へ。