今回はCSSのdisplayについてまとめようと思います。
displayはCSSのプロパティの1つです。大まかには、要素(主に子要素)の表示形式を決めるものです。
displayには3つ覚えておきたい値があります。
block、inline、inline-blockです。
それぞれまとめていきます。
block
blockは要素が横までいっぱいに広がり、縦に並んでいく表示形式です。 下記のようなイメージで並びます。
要素の幅や高さを指定することができます。
また、blockの場合、text-align:centerやvertical-align:middleを指定しても、要素が真ん中に表示されるようにはなりません。
要素の中身のテキストを中央揃えにすることはできます。
下記のように設定しても中央揃えにはならないです。
<p class="block">要素</p>
.block {
background: orange;
width: 80px;
text-align: center;
}
blockの要素を中央に配置したいときにはmargin-right:auto; やmargin-left:autoという指定により横に中央配置にすることができます。
.block {
background: orange;
width: 80px;
text-align: center;
margin-right:auto;
margin-left:auto;
}
inline
inlineの要素どうしの間には改行が入らず、横に並んでいく形式です。 テキストと同じように右端までたどり着くと改行されます。
inlineは文中の一部として使われることがあります。 たとえば、下記のようにテキストの装飾やリンクなどの要素に用いられます。
<p>これは<a href="https://test.com/">aタグ</a>と<span>spanタグ</span>です。</p>
a {
background: green;
color:white;
}
span {
background: orange;
}
inlineの要素は、CSSで幅と高さを指定することができません。 inlineの要素の幅と高さは要素の中身に応じて決まります。 つまり、テキストの長さや文字の大きさにより幅と高さが自動で決まります。
また、marginは左右のみ利用可能なので、上下の余白は指定できないと思っていいと思います。 下記のように要素がかぶる場合も発生します。
<p>これから書くのは<span class="example">margin20pxのspanタグ</span>の例文です。</p>
<p>これから書くのは<span class="example2">このように要素がかぶる場合もありえます</span>!</p>
.example {
margin: 20px;
background: skyblue;
}
.example2 {
padding: 30px;
background: skyblue;
}
横方向のpaddingとmarginはきちんと指定されています。 一方、上下のmarginは無効になっています。 上下のpadding指定は反映されていますが、前の行とかぶってしまいます。
inlineの要素の表示位置に関してはtext-alignやvertical-alignを指定することができます。 ただし、inlineの要素にtext-alignを指定するときには、親要素に対して指定する必要があります。
<div class="test">
<span>inline align</span>
</div>
.test {
/*親要素のdivに対して指定する*/
text-align:center;
}
span {
background: skyblue;
}
inline-block
inline-blockはinlineとblockの間を取ったようなものです。 大まかには、要素の並び方はinline的で、要素の中身はblock的な性質を持ちます。
inline-blockの並びはinlineと同じで改行が入らず、横に並んでいきます。
要素の中身はblockと同じで幅と高さ・余白も上下左右に指定できます。
また、text-alignとvertical-alignの指定もできます。
横に並べる場合にはinline-blockを使うのが細い調整ができそうです。
その他
今まで主要な値について説明してきました。
ここではCSS3から使えるようになったflexについて確認していきます。
display: flexを設定することでinline-blockなどと同じように横並び(並列)にすることができます。
ただし、flexは親要素に設定して対象の子要素の並びを設定します。
下記のように指定します。
<div id="flexbox">
<div class="box-item">1</div>
<div class="box-item">2</div>
<div class="box-item">3</div>
<div class="box-item">4</div>
<div class="box-item">5</div>
</div>
#flexbox{
display:flex;
width: 100%;
height:auto;
padding:10px;
}
.box-item{
background:orange;
text-align: center;
padding:15px 40px;
}
子要素の中に要素がある場合(孫要素)、影響を受けないので横並びにはならず通常の配置になるので注意してください。
さらにdisplay:flexにはjustify-content: space-betweenで等間隔で配置やflex-directionで並びの向きを指定することができます。
多くの設定値があるのでここでは割愛しますが、参照に載せているサイトでは視覚的にも結果が確認できます。
また、親要素に指定するのか子要素に指定するのかがわかるようになっているので一度確認してみてください。
