シェアする
The Mystery of the display Property - Japanese Only
あ、みなさまどうもこんにちは。
というわけでやってまいりました、とっても面倒くさい『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の値っぽいな(ｷﾘｯ」と発想できれば十分です。
昔のHTMLでの要素は大きく分けて『ブロックレベル要素』と『インライン要素』に分けられていましたが、HTML5ではこれら全て廃止となりました。
これはHTML側の管轄としての概念が廃止になった、というだけの理由ですのでこれまで解説したとおりCSS側のレイアウトの決定要素としてブロックレベル要素とインライン要素の概念は残っています。
今まで存在していたブロックレベル要素とインライン要素などという種類分けは、各要素ごと設定されている『display』プロパティの初期値という扱いになりました。
一言で言うと「HTML5では全てのレイアウトはCSSの記述に委ねるよ！」という事です。
というわけでブロックレベル要素とインライン要素について解説しました。
ここまでの解説を見たけれどもイマイチ実感できない、という方がほとんどだと思います。その際も気にせず先の記事へ進んでください。今後勉強していくCSSプロパティにdisplayの値が影響するものが多数あるのでいずれ慣れていくかと思います。当サイトでもあとで沢山でてきます。
ちょっとやっかいな項目になるので初心者の方にはちょっと面倒くさく感じてしまうと思いますがめげずに頑張っていきましょう。
続いての記事では高さと幅を変更するCSSプロパティについて学んでいきましょう。
ではではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
