シリーズ第18回は、ブロックとインラインの変更についてです。ブロック要素をインライン要素に、インライン要素をブロック要素のようにする方法です。HTMLの要素はそのままで、CSSのプロパティによるブロックとインラインの変更方法をかんたん解説しています。
ブロックとインラインの変更の概念
前回はブロック要素（例：div）とインライン要素（例：span）の違いについて解説してきました。CSSで同じスタイルをあてても、HTMLの要素がブロックかインラインかによって表示や挙動が異なることを確認できたと思います。
シリーズ第17回は、ブロックボックスとインラインボックスについてです。これまでの数回でCSSのボックスモデルに関連した情報を取り上げてきました。基本的な考えとして、HTMLの各要素を1つのボックスとしてとらえて、CSSでスタイルをあてていく[…]
今回はHTMLはそのままで、CSSのプロパティによってブロックとインラインを変更します。その時に使うのがdisplayプロパティです。
しかし、これは要素そのものが変更されるということではありません。むしろ、要素をブロック要素とインライン要素のどちらとして扱うかを設定するということです。単に表示の型を変更しているにすぎません。詳しく見ていきましょう。
displayプロパティ
displayプロパティはとても奥の深いプロパティです。実際、displayについてのMDNリファレンスを見てみると、非常にたくさんの情報があります。この記事では、ブロックとインラインの変更に関する点だけに的を絞っています。
取り上げるのは、次の3つの宣言です。
- display: inline;
- display: block;
- display: inline-block;
display: inline; の挙動
これは、ブロックをインラインへ変更するためのプロパティです。
前回（第17回）で使ったHTMLとCSSファイルを利用して、display: inline; を記述します。
開発者ツールで確認してみましょう。HTML（画像左下）を見ると、本来ならブロック要素であるdivにより「プログラミング」が囲われています。しかし、CSS（画像右下）でdivに対してdisplay: inline; が指定されています。
表示は画像の上の通りです。ブロック要素ですがインライン要素のように表示されているのが分かります。padding,margin,borderはきいていますが、改行が入らずに表示されています。インラインのように他の要素を考慮しないので、続く文章の邪魔をしています。
では、逆にインラインをブロックに変更するとどうでしょうか。
display: block; の挙動
これは、インラインをブロックに変更するプロパティです。
HTML：
今度はインライン要素であるspanで「プログラミング」を囲んでいます。
CSS：
CSSでspanに対して、display: block; を記述しています。表示はどうなるでしょうか。
インライン要素であるspanですが、display: block; によりブロック要素のように表示されています。やはりpadding,margin,borderはきいてますが、他の要素を考慮に入れたブロックのような表示です。
例えば、本来はインライン要素のimgで考えてみましょう。imgに対してdisplay: block; を記述すると、表示はブロック要素のようになります。その上、widthとheightプロパティによってimg画像の幅と高さを指定できるようになります。これはよく使われる方法です。
しかし、これによって要素のコンテンツモデルが変更される訳ではありません。前述の通り、表示の型を変更しているにすぎません。そのため、例えばspan要素を display: block; によりブロック表示に変更しても、その中にdiv要素を含めることができるようになる訳ではありません。この考え方は覚えておきましょう。
両方のスタイルを兼ね備えたプロパティ
これは、インラインでありブロックでもあるような表示ができるプロパティで、display: inline-block; と呼ばれます。
display: inline-block; の挙動
実際の表示で確認すると分かりやすいでしょう。
先程と同じHTMLファイルですが、CSS（画像右下）でdisplay: inline-block; が記述されています。
表示はインラインとブロックの両方のスタイルが兼ね備わっていますね。インライン要素のように他の要素の邪魔をせず、ブロック要素のように改行するのではなく文字が回り込んで続いています。加えて、やはりpadding,margin,borderはきいてます。
大変便利なプロパティですね。これも実際のプロジェクトで時々使う方法です。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第18回】はいかがでしたか。今回は、ブロックとインラインの変更についてでした。
変更と言っても、要素そのものの変更ではなく、CSSのプロパティにより表示の型を変更する方法です。displayプロパティを使用して、ブロック要素をインライン要素に、インライン要素をブロック要素のように見せることができます。便利なので覚えておきたいですね。
では、次回もお楽しみに！