【初心者必見】CSSでblock-inlineの使い方を詳しく解説
「CSSのinline-blockを使ってみたい」
こう思う方も多いのではないでしょうか。
本記事をお読みいただくと以下が分かります。
- CSSでblock-inlineの使い方が分かる
HTMLやCSSに少し慣れてくると、よりユーザにとって見やすいサイト設計を進めていく段階だと思います。是非本記事をお読みいただき理解を深めてください。
CSSのdisplayとは
本題に入る前に、CSSのdisplayについて説明します。displayは要素の「表示形式」を指定するプロパティです。
このdisplayに対してとれる値として、主に次の4つがあります。
・block
・inline
・inline-block
・none
タグごとにdisplayの初期値は決まっていて、大抵のタグはblockもしくはinlineが初期値です。本記事ではinline-blockがメインになりますが、簡単にblockとinline、noneの解説もしていきます。
block
それでは、簡単にblockの主な特徴を紹介していきます。blockは例えばpタグの初期値として設定されています。
要素は縦に追加される
以下の例のようにpタグを追加していくと、ブロックは縦に追加されていきます。
<p class="block_1">ブロック1</p> <p class="block_2">ブロック2</p>
.block_1 {
background: green;
}
.block_2 {
background: blue;
}
コピーアンドペーストでいいので上記のコートを試してみてください。「ブロック1」「ブロック2」が縦に追加されているのが分かります。
幅と高さを指定することができる
blockの要素では、幅と高さを指定することができます。先ほどと同様に初期値がblockであるpタグの例を見てみましょう。
<p class="block_1">ブロック1</p> <p class="block_2">ブロック2</p>
.block_1 {
background: green;
width: 100px;
height: 100px;
}
.block_2 {
background: blue;
width: 100px;
height: 100px;
}
HTMLは先ほどと全く同じで、CSSにもwidthとheightを追加しただけです。
余白を指定できる
blockの要素では上下左右の余白も指定することができます。そのためには、padding（要素の内側の余白）とmargin（要素の外側の余白）を指定してあげる必要があります。
先ほどと同様、pタグの例を見ていきましょう。
<p class="block_1">ブロック1</p> <p class="block_2">ブロック2</p>
.block_1 {
background: green;
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
}
.block_2 {
background: blue;
width: 100px;
height: 100px;
}
今回は1つ目のブロックにだけ余白を設定してみました。paddingを消した場合、marginを消した場合両方試してみてください。余白の設定の感覚がお分かりいただけると思います。
inline
それでは続いて、inlineの特徴です。inlineは例えばspanタグの初期値として設定されています。
要素は横に並ぶ
先ほどのblockは縦に並びましたが、inlineは横に並びます。
<p><a>aタグ</a>と<span>spanタグ</span>を並べてみます</p>
a {
background: blue;
color:yellow;
}
span {
background: green;
}
こちらもコピーアンドペーストでいいので試してみてください。「aタグ」と「spanタグ」という文字に背景色や文字色がついて、それらは横向きにきちんと並んでいることが分かると思います。
blockの中で用いられることが多い
inlineは基本的にblockの中で使われることが多いです。ここは文字だけだと伝わりづらいと思いますので、現時点では「そういうものか」と思っていただければ大丈夫です。
blockのように幅や高さは指定できない
inlineはblockのように幅や高さを指定することはできません。試しに先ほどのaタグとpタグの文章に、幅や高さを指定してみましょう。
<p><a>aタグ</a>と<span>spanタグ</span>を並べてみます</p>
a {
background: blue;
color:yellow;
width:200px;
height: 200px;
}
span {
background: green;
}
aタグ部分に幅と高さを指定してみましたが、サイズをいくつにしても見た目が変わらないことがお分かりいただけると思います。
none
最後にnoneについてです。noneを指定された要素はブラウザ上で非表示になります。具体例を見ていきましょう。
<p class="sample">ここを非表示にします。</p>
.sample {
display :none;
}
CSSの設定をするまでは「ここを非常時にします」というテキストが表示されていますが、CSSの設定をすると非常になることがお分かりいただけると思います。
ここまでblockとinline、noneの主な特徴を紹介してきました。続いて、本題のinline-blockについて解説します。
CSSのinline-blockとは
inline-blockはその名の通り、inlineとblockの間を取ったようなものです。具体的に言うと、要素の並びやinlineに近く、要素の中身はblockのような特徴を持ちます。
幅や高さの指定ができる
blockと同様、幅や高さの指定をすることができます。それでは、早速具体例を見ていきましょう。
<body> <span id="sample">inline-blockについて</span> </body>
#sample {
height: 300px;
width: 500px;
background-color: skyblue;
}
実は上記の例では幅や高さの設定が効きません。試しにcssのheightとwidthのサイズを自由に変えてみてください。見た目が何も変わらないことがお分かりいただけると思います。
それでは、ここにinline-blockを指定してみましょう。
<body> <span id="sample">inline-blockについて</span> </body>
#sample {
display: inline-block;
height: 300px;
width: 500px;
background-color: skyblue;
}
いかがでしょうか。display:inline-blockを追加することでwidthとheightが効いていることが分かると思います。
余白を指定できる
こちらも、早速具体例を見ていきましょう。
<body> <span id="sample">inline-blockについて</span> </body>
#sample {
margin: 30px;
height: 300px;
width: 500px;
background-color: skyblue;
}
上記のコードを試すと、左右の余白（margin）はつきますが上下の余白は反映されていません。それではinline-blockを指定してみましょう。
<body> <span id="sample">inline-blockについて</span> </body>
#sample {
display: inline-block;
margin: 30px;
height: 300px;
width: 500px;
background-color: skyblue;
}
先ほどと同様、display:inline-blockを追加することで上下の余白も反映されます。
横に並ぶ
inline-blockは要素を横に並ぶ特徴を持つので、本記事の冒頭で紹介したblockについても、inline-blockを使うことで横に並べることができます。
それでは、まずは通常通り縦に並ぶblockを見ていきましょう。
<body> <div id="box1"></div> <div id="box2"></div> </body>
#box1 {
height: 150px;
width: 150px;
background-color: skyblue;
}
#box2 {
height: 150px;
width: 150px;
background-color: yellow;
}
こちらの例では通常のblock通り、縦に水色と黄色のボックスが縦に並んでいることが分かると思います。それではinline-blockを指定してみましょう。
<body> <div id="box1"></div> <div id="box2"></div> </body>
#box1 {
display: inline-block;
height: 150px;
width: 150px;
background-color: skyblue;
}
#box2 {
display: inline-block;
height: 150px;
width: 150px;
background-color: yellow;
}
いかがでしょうか。box1とbox2の両方にdisplay: inline-blockをつけることで、boxが横に並びました。
まとめ
いかがでしたでしょうか。displayの主な4種類としてblock,inline,none,inline-blockを紹介しました。
コード自体は非常にシンプルに書けることがお分かりいただけたと思います。
是非本記事をきっかけに、ユーザが読みやすいサイト設計を進めてください。
