この投稿では、スタイルシートcssによく出てくる、displayプロパティの適切な使い方について説明させていただいております。
displayには、様々なプロパティがあって、どこでどれを指定すればよいかわからなくなるときがあります。でも、基本を押さえておけばしっかり使いこなすことができます！
目次
displayプロパティとは
displayプロパティは、要素の表示形式を指定するのに使います。大きく分けて、ブロック要素とインライン要素に分かれます。
ブロック要素
ブロック要素は、幅いっぱいに表示されます。次のような、ブロック要素の画像とテキストが並ぶ場合、テキストは画像の下にまわります。ボーダーを付けているので、わかりやすいと思います。
html
<div class="block-item"><img src="pass-to-image/mylogo.png" /></div> 坂商デザイン制作
css
.block-item {
display: block;
border: 1px solid #eee;
}
インライン要素
インライン要素は、1行に連続して表示されます。そして、ボーダーは画像の高さに関係なく、1行の高さになっていることがわかります。インライン要素は、高さを指定できない要素です。
html
<div class="inline-item"><img src="pass-to-image/mylogo.png" /></div> 坂商デザイン制作
css
.inline-item {
display: inline;
border: 1px solid #eee;
}
インライン-ブロック要素
インライン-ブロック要素は、1行に連続して表示され、要素の高さを持てるようになります。
html
<div class="inline-block-item"><img src="pass-to-image/mylogo.png" /></div> 坂商デザイン制作
css
.inline-block-item {
display: inline-block;
border: 1px solid #eee;
}
inline-blockの用例
ナビメニューによく見られる、横並びのリストを例にinline-blockの使い方をおさらいしたいと思います。
通常のlist-item
通常のリストでメニューを作成すると、次のようになると思います。displayは、list-itemという形式で、折り返されます。
html
<ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul>
css
なし
inline要素でのナビ
inline要素にすると、横並びになります。しかし、ボーダーはpaddingの高さを無視してテキストのまわりに引かれます。
html
<ul> <li class="inline-menu"><a href="#">メニュー1</a></li> <li class="inline-menu"><a href="#">メニュー2</a></li> <li class="inline-menu"><a href="#">メニュー3</a></li> </ul>
css
.inline-menu {
display: inline;
border: 1px solid #eee;
}
.inline-menu a {
display: inline;
padding: 20px;
}
inline-block要素のナビ
inline-block要素にすると、ボーダーが高さを認識し、ナビメニューらしいスタイルにすることができました。
html
<ul> <li class="inline-menu"><a href="#">メニュー1</a></li> <li class="inline-menu"><a href="#">メニュー2</a></li> <li class="inline-menu"><a href="#">メニュー3</a></li> </ul>
css
.inline-block-menu {
display: inline-block;
border: 1px solid #eee;
}
.inline-block-menu a {
display: inline-block;
padding: 20px;
}
記事のまとめ
以上の基本がしっかりわかっていれば、どのようなときにどのdisplayプロパティにすれば良いか、疑問に思わずWeb制作を進められると思います！
ちなみに、displayプロパティが、inlineやinline-blockの要素は、要素間に改行があると、改行が半角スペースになって要素間についてしまいます。このスペースがいやだという場合、解決策として親要素に、font-size: 0;を指定することでスペースが消えます。子要素のfont-sizeは指定しなおす必要があります。
html
<ul class="nav-menu"> <li class="inline-menu"><a href="#">メニュー1</a></li> <li class="inline-menu"><a href="#">メニュー2</a></li> <li class="inline-menu"><a href="#">メニュー3</a></li> </ul>
css
.nav-menu {
font-size: 0;
}
.inline-block-menu {
display: inline-block;
border: 1px solid #eee;
}
.inline-block-menu a {
display: inline-block;
padding: 20px;
font-size: 16px;
}
