Contents
display:「block」と「inline-block」の違い
まずはblockとinline-blockの違いを見ていきましょう。
blockは要素が横幅いっぱいに表示されます。
一方、inline-blockはその要素の幅に応じて、要素が詰めて表示されます。
上図のように、要素Cは要素A,Bの行に入り切らないので、自動的に改行されて表示されます。
「block」の使い方とサンプル
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <li> <div class="block">2019年8月8日</div> <div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div> </li> <li> <div class="block">2019年8月2日</div> <div class="block">新宿2号店をオープンしました</div> </li> </ul>< |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.block { display: block; } ul { padding: 0; margin: 0; } li { border-bottom: 1px solid #dedede; padding: 0 0 10px 0; margin: 0 0 10px 0; list-style-type: none; } |
表示
-
2019年8月8日タピオカミルクティ抹茶味の販売を開始しました
-
2019年8月2日新宿2号店をオープンしました
（注）divは初期値としてdisplayがblockを持っているので、cssでわざわざblockを指定しなくてもよいですが、ここではあえて書いています。
「inline-block」の使い方とサンプル
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li> <div class="inlineblock">2019年8月8日</div> <div class="tag inlineblock">新商品</div> <div class="inlineblock">タピオカミルクティ抹茶味の販売を開始しました</div> </li> <li> <div class="inlineblock">2019年8月2日</div> <div class="tag inlineblock">新店舗</div> <div class="inlineblock">新宿2号店をオープンしました</div> </li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.inlineblock { display: inline-block; } .tag { background: #ff9800; border-radius: 4px; color: #fff; font-size: 90%; padding: 2px 10px; } ul { padding: 0; margin: 0; } li { border-bottom: 1px solid #dedede; padding: 0 0 10px 0; margin: 0 0 10px 0; list-style-type: none; } |
表示
-
2019年8月8日新商品タピオカミルクティ抹茶味の販売を開始しました
-
2019年8月2日新店舗新宿2号店をオープンしました
初期値でblockを持っているhtmlタグ
divのように初めからblock要素を持っているタグがあり、その場合はcssでdisplay: block;を指定する必要はありません。
このように、初期値でblockをとる要素は次のようなタグがあります。
- <address> 住所など
- <article>記事など
- <aside> 脚注、補足情報
- <blockquote> 引用
- <details> 折りたたみ要素
- <dialog> ダイアログボックス
- <dd> 定義リストの内容
- <div> 文章
- <dl> 定義リスト
- <dt> 定義リストの見出し
問題1
次の場合は、どのように表示されるでしょうか？
HTML
|
1 2 3 |
<div class="block">りんご</div> <div class="block">みかん</div> <div class="block">メロン</div> |
CSS
|
1 2 3 |
.block { display: block; } |
それぞれブロックなので、表示は次のように、一行ずつ表示されます。
表示
りんご
みかん
メロン
問題2
では次の場合は、どのように表示されるでしょうか？
HTML
|
1 2 3 |
<div class="inlineblock">りんご</div> <div class="block">みかん</div> <div class="block">メロン</div> |
CSS
|
1 2 3 4 5 6 |
.block { display: block; } .inlineblock { display: inline-block; } |
りんごはinline-blockなので、右には次の要素が続くはずですが、
続くみかんが横幅100%なので、改行されて表示、
メロンも同様に一行ずつ表示されます。
表示
りんご
みかん
メロン
ぱっと見た感じ問題1と同じ結果ですが、ブラウザの「要素の検証」で見てみると、りんごは文字幅＝横幅ということがわかります。
問題3
さらに次の場合は、どのように表示されるでしょうか？
HTML
|
1 2 3 |
<div class="inlineblock">りんご</div> <div class="inlineblock">みかん</div> <div class="block">メロン</div> |
CSS
|
1 2 3 4 5 6 |
.block { display: block; } .inlineblock { display: inline-block; } |
今度は、りんごとみかんがinline-blockなので、右に詰めて表示され、
続くメロン横幅100%なので、改行されて表示されます。
表示
りんご
みかん
メロン