displayプロパティの謎

あ、みなさまどうもこんにちは。

というわけでやってまいりました、とっても面倒くさい『display』プロパティの項目です。

これがCSSでかなりややこしいところで初心者の方のちょっとした壁みたいになってしまっています。しかもCSSをマスターするにあたってとても重要な項目なのでスルーすることはできません。ちょっと大変ですが頑張っていきましょう。

まずは『display』プロパティというものを解説していきたいと思います。

『display』プロパティは要素の表示形式を変更できるプロパティです。

値はblock、inline、table-row、table-cellと様々取れるのですが、今回は『block』と『inline』について解説していきます。

値に『block』と記述するとその要素は『ブロックレベル』としてレンダリングされ、値に『inline』と記述すると『インラインレベル』としてレンダリングされます。

まずCSSの記述例は以下のような形になりますね。これはそれほど難しくないかと思います。

.block_erem {
    display: block;
}
.lnline_elem {
    display: inline;
}

ではブロックレベルとインラインレベルってなんなのかということを確認していきましょう。

まず前提条件としてブラウザでHTMLファイルを表示した際、全ての要素は四角いボックス(要素ボックス)としてレンダリングされており、その表示されている要素がブロックレベルなのかインラインレベルなのかでレイアウトに違いが生まれます。
※昨今のCSS3では角丸のボックスも生成できるようになってますが当記事では基本的なレイアウトがされているものとして解説していきます。

基本的なレイアウトとして、ブロックレベルの要素はデフォルトの状態での横幅の大きさは親要素の100%の幅でレンダリングされ、前後に改行が入ります。インラインレベルの要素は内容物の横幅によって横幅が可変します。前後に改行は入りません。

以下はブロックレベル要素であるp要素を連続して並べたものです。要素のデフォルトの背景色は透明で視覚的に確認できないので背景色と文字色を変更しています。

<p style="background-color: red; color: white;">ひとつめのp要素だよ</p>
<p style="background-color: blue; color: white;">ふたつめのp要素だよ</p>

これをレンダリングさせて表示させてみると以下のようになります。

サンプルをみてみる。

前後に改行がはいり、要素の大きさは横いっぱいになっているのがわかるかと思います。

続いてインラインレベル要素であるspan要素を連続して並べてみましょう。

<span style="background-color: red; color: white;">ひとつめのspan要素だよ</span>
<span style="background-color: blue; color: white;">ふたつめのspan要素だよ</span>

レンダリングさせるとこうなります。

サンプルをみてみる。

先ほどのp要素と違って横が詰まって表示され、文が同じ行に収まっているように見えますね。

これがブロックレベル要素とインラインレベル要素のレイアウトの差です。表示されている要素の上下に改行が入るかどうかと横幅が親要素の大きさになるかならないかというところに注目ですね。

さて、この『display』プロパティのさらにややこしいところですが、要素によって初期値に差があります。これまで勉強したdiv要素やp要素の『display』プロパティの初期値は『block』、span要素やimg要素の初期値は『inline』となっています。

そしてこの『display』プロパティに指定された値によって反映されるCSSプロパティと反映されないプロパティが存在します。

例えば前回の記事で勉強した『text-align』プロパティはインラインレベル要素に記述しても反映されません。『display:block』となっているブロックレベル要素などに記述した場合に、包含された『display:inline』となっているインラインレベル要素の位置を変更するプロパティとなっています。
※インラインブロック要素も『text-align』プロパティで位置変更が可能ですが当記事では割愛します。

こんな感じでブロックレベルやインラインレベルの話はちょっとややこしいです。

ただ、ブロックレベルやインラインレベルの話は噛み砕いていうと『HTMLページのどの位置に表示されるか』ということと『他のCSSプロパティに影響を与える』というだけの話だったりしますので「このCSSプロパティはブロックレベル要素にしか効かなくて逆にこれはインライン要素しか効かないんだな」という風に丸暗記しちゃうのもありです。丸暗記せずともCSSプロパティが反映されない時は「あ、原因はdisplayの値っぽいな(ｷﾘｯ」と発想できれば十分です。

というわけでブロックレベル要素とインライン要素について解説しました。

ここまでの解説を見たけれどもイマイチ実感できない、という方がほとんどだと思います。その際も気にせず先の記事へ進んでください。今後勉強していくCSSプロパティにdisplayの値が影響するものが多数あるのでいずれ慣れていくかと思います。当サイトでもあとで沢山でてきます。

ちょっとやっかいな項目になるので初心者の方にはちょっと面倒くさく感じてしまうと思いますがめげずに頑張っていきましょう。

続いての記事では高さと幅を変更するCSSプロパティについて学んでいきましょう。

ではではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア