現在地: トップページ » Web制作お役立ち » CSSのdisplay: block, inline, inline-blockはどれを使うべき?

CSSのdisplay: block, inline, inline-blockはどれを使うべき?

この投稿では、スタイルシート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;
}

飛騨高山で畑を耕しながら、フリーランスのWebデザイナーとして活動しています。自然や文化に触れながら、人を癒し和ませるデザインを追求しています!文章作成、イラスト作成、写真撮影やパソコン作業全般が得意で大好きです。工業高校→工業大学で機械や電気の勉強をしていましたが、これからは自然の時代!と思い、自然の中で楽しく元気に暮らし続けることを目標に頑張っています。スピリチュアル大好き。最先端は苦手。時事問題も苦手。新聞は好きです。12年間乗ったクラウンからCAST SPORTへ乗り換え。Mac,iPad,GRATINA 4G(au/京セラ),NIKON COOLPIX P6000,D7200使い。ヘンプアクセサリー作りが趣味。

コメントを残す

メールアドレスが公開されることはありません。