こんにちは！ライターのナナミです。
WEBサイトを作っていて、
なんてことありませんか？そんなあなたにとってもおすすめ、インラインブロック要素をご紹介します！この記事では
- インラインブロック要素とはどのようなものか
- CSSでの指定方法
- 具体的な活用例
- 注意するべきこと
まで、徹底的に掘り下げていきます。インラインブロック要素を覚えて、今まで苦戦していたレイアウトもさらさらっと書いちゃいましょう！
インラインブロック要素とは？
インラインブロック要素は、ブロック要素とインライン要素のいいとこどりをしている要素です。ブロック要素についてはこちら
インライン要素のリファレンス
http://www.htmq.com/htmlkihon/005.shtml
どのような役割や特徴があるのか、細かく見ていきましょう！
コンテンツの小さなまとまり
インラインブロック要素は、ブロック要素とインライン要素それぞれの特徴を併せ持っている要素です。ブロック要素よりも小さく、インライン要素よりも大きいまとまりを示す時に使用します。
- コンテンツのアウトラインがブロック要素
- コンテンツ自体の小さなまとまりがインラインブロック要素
- 文字や画像がインライン要素
という感じですね。
要素の幅は中身に合わせる
インラインブロック要素のデフォルトの幅は、要素の中身の幅に合わせた大きさになります。例えば、文字を10文字入れると…
HTML
<div class="inline-block_test">
1234567890
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
}
10文字分の幅になっていますね。5文字に減らしてみると…
HTML
<div class="inline-block_test">
12345
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
}
文字に合わせて要素自体も小さくなります。
高さや幅を指定できる
ブロック要素のように、高さを指定することができます。
HTML
<div class="inline-block_test">
高さや幅を指定できます
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
height: 300px; /* 高さ指定 */
width: 50%; /* 幅指定 */
}
余白の指定ができる
ブロック要素と同じく、余白の指定もしっかり行なうことができます。
HTML
<div class="inline-block_test">
余白を指定できます
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
padding: 50px; /* 余白指定 */
}
横並びにできる
インラインブロック要素最大の特徴がこれです！インライン要素と同じく、要素を横並びにすることができます。しかも、高さや余白の指定ができるので…
HTML
<div class="inline-block_test">
横並びにできます
</div>
<div class="inline-block_test">
横並びにできます
</div>
<div class="inline-block_test">
横並びにできます
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
padding: 20px; /* 余白指定 */
height: 100px; /* 高さ指定 */
}
こんな風に、ボックス状にしてレイアウトすることが可能です。
text-alignが使える
text-alignは、親要素に記述することでインライン要素を右揃えにしたり中央揃えにしたりできるプロパティです。インライン要素対応なので、インラインブロック要素も中央揃えなどにすることができます。
HTML
<div class="parent">
<div class="inline-block_test">
中央揃えにできます
</div>
</div>
CSS
.parent {
text-align: center; /* 子要素を左右中央揃えにする */
border: solid 2px; /* 枠線指定 */
padding: 20px; /* 余白指定 */
}
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
padding: 20px; /* 余白指定 */
}
vertical-alignが使える
vertical-alignはtableなどで横の要素との文頭の揃えを調整するプロパティです。このプロパティはインライン要素に使用することができます。つまり、インライン要素の特徴を持っているインラインブロック要素にも使えちゃいます。
HTML
<div class="inline-block_test">
上下中央揃えができます上下中央揃えができます
</div>
<div class="inline-block_test">
文字数を変えても
</div>
<div class="inline-block_test">
大丈夫！
</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
width: 100px; /* 幅指定 */
padding: 10px; /* 余白指定 */
vertical-align: middle; /* 要素を上下中央揃えにする */
}
インラインブロック要素のHTMLタグはない
ブロック要素やインライン要素は、それぞれ対応したHTMLタグが存在しています。
しかし、インラインブロック要素は、対応したHTMLタグはありません。使いたいときはCSSで指定する必要があります。
CSSでinline-blockを指定する
インラインブロック要素を使いたいときは、CSSを使って要素の種類を変更します。手順は簡単！要素の種類を指定するdisplayプロパティでinline-blockを指定するだけです。
HTML
<div class="inline-block_test">
ブロック要素だけど、インラインブロック要素になったよ
</div>
<span class="inline-block_test">
インライン要素だけど、インラインブロック要素になったよ
</span>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
width: 250px; /* 幅指定 */
}
ブロック要素だろうがインライン要素だろうが、全部インラインブロック要素になります。
inline-blockの使用例
横並びにできたり、余白の指定ができたり…インラインブロック要素は様々な場面で活躍してくれます。具体的な例を挙げてみましたので、参考にしてみてください。
グローバルメニュー
HTML
<header>
<ul class="global">
<li><a href="URL">項目名</a></li>
<li><a href="URL">文字数が多い項目名</a></li>
<li><a href="URL">項目名</a></li>
<li><a href="URL">項目名</a></li>
</ul>
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター
</footer>
CSS
header {
padding-bottom: 10px; /* 余白指定 */
}
.global {
padding: 0; /* ulタグのデフォルトCSSを打ち消し */
margin: 0; /* ulタグのデフォルトCSSを打ち消し */
list-style: none; /* ulタグのデフォルトCSSを打ち消し */
text-align: center; /* 子要素を左右中央揃え */
}
.global > li {
display: inline-block; /* インラインブロック要素にする */
width: 100px; /* 幅指定 */
vertical-align: middle; /* 要素を上下中央で揃える */
}
.global > li > a {
color: #222; /* 文字の色指定 */
background-color: #ccc; /* 背景色指定 */
text-decoration: none; /* 文字のデフォルトCSSを打ち消し */
display: inline-block; /* インラインブロック要素にする */
padding: 10px; /* 余白指定 */
width: 100%; /* 幅指定 */
box-sizing: border-box; /* 崩れ防止 */
}
main {
border: solid 2px; /* 枠線指定 */
padding: 50px 10px; /* 余白指定 */
}
footer {
background-color: #ccc; /* 背景色指定 */
padding: 10px; /* 余白指定 */
}
インラインブロック要素を使えば、グローバルメニューもこんなに簡単にできちゃいます。メニューの文字が長くて二行になってしまう場合でも、vertical-alignで中央に揃えられるのでバッチリです。
サムネイルを並べる
HTML
<div class="thumbnail">
サムネイルを並べるのも簡単
</div>
<div class="thumbnail">
文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ文字数が多いコンテンツ
</div>
<div class="thumbnail">
文字が多くても崩れない！
</div>
<div class="thumbnail">
簡単！
</div>
CSS
.thumbnail {
width: 32.3333%; /* 幅指定 */
display: inline-block; /* インラインブロック要素にする */
vertical-align: top; /* 要素を上揃えにする */
background-color: #ccc; /* 背景色指定 */
margin-bottom: 10px; /* 要素同士の隙間調整 */
padding: 10px; /* 余白指定 */
box-sizing: border-box; /* 崩れ防止 */
}
ポートフォリオサイトなどで、画像のサムネイルが並んでいたりしますよね。インラインブロック要素ならそれも簡単、高さが揃ってなくても綺麗に並んでくれます。
ピラミッド型に並べる
HTML
<div class="pyramid_parent">
<div class="pyramid_box">
一番上！
</div>
</div>
<div class="pyramid_parent">
<div class="pyramid_box">
二番目
</div>
<div class="pyramid_box">
二番目
</div>
</div>
<div class="pyramid_parent">
<div class="pyramid_box">
三番目だよ
</div>
<div class="pyramid_box">
三番目だよ
</div>
<div class="pyramid_box">
三番目だよ
</div>
</div>
CSS
.pyramid_parent {
text-align: center; /* 子要素を左右中央揃えにする */
}
.pyramid_box {
width: 200px; /* 幅指定 */
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
margin-bottom: 5px; /* 要素同士の隙間調整 */
padding: 30px; /* 余白指定 */
box-sizing: border-box; /* 崩れ防止 */
}
text-alignが使えるので、こんな感じのピラミッド型レイアウトもできちゃいます。ちょっと変わったレイアウトにしたいときに大活躍ですね。
横並びにした時の隙間を消す方法
インラインブロック要素は色々できて便利なのですが、横並びにした時に要素と要素の間に隙間ができてしまうという欠点があります。
しかしご安心を。この問題はHTMLやCSSで簡単に解消できちゃいます。ただ、どれも一長一短な方法なので、状況に合わせて使いわけるようにしましょう。
HTMLを改行しない
HTMLを書いているとき、下記のようにタグごとに改行して書くことが多いと思います。
HTML
<div class="inline-block_test">
要素と要素の
</div>
<div class="inline-block_test">
間に
</div>
<div class="inline-block_test">
隙間ができてしまう
</div>
これをあえて改行せずに書くことで、インラインブロック要素の隙間を無くすことができます。
HTML
<div class="inline-block_test">隙間をなくします</div><div class="inline-block_test">隙間をなくします</div><div class="inline-block_test">隙間をなくします</div>
CSS
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 10px; /* 余白指定 */
}
ただ、ソースコードが見づらくなるのが欠点ですね…
閉じタグを入れない
HTMLにおいて閉じタグを入れるのは当たり前ですね。
しかし<li>タグに限っては、下記のようにあえて閉じタグを入れないようにすると、隙間をなくすことができます。
HTML
<ul class="inline-block_parent">
<li class="inline-block_test">隙間をなくします
<li class="inline-block_test">隙間をなくします
<li class="inline-block_test">隙間をなくします
</ul>
CSS
.inline-block_parent {
margin: 0; /* ulタグのデフォルトCSSを打ち消し */
padding: 0; /* ulタグのデフォルトCSSを打ち消し */
list-style: none; /* ulタグのデフォルトCSSを打ち消し */
}
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 10px; /* 余白指定 */
}
閉じタグの部分はブラウザが自動解釈して補完してくれますが、不完全なコードなのには違いないので、おすすめな方法ではありません。また、divなどの他のタグでは使えない方法なので、あまり汎用的ではないでしょう。
ネガティブマージンを入れる
ネガティブマージンとは、marginをマイナスの値で指定する方法です。
HTML
<ul class="inline-block_parent">
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
</ul>
CSS
.inline-block_parent {
margin: 0; /* ulタグのデフォルトCSSを打ち消し */
padding: 0; /* ulタグのデフォルトCSSを打ち消し */
list-style: none; /* ulタグのデフォルトCSSを打ち消し */
}
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 10px; /* 余白指定 */
margin-right: -7px; /* 隙間をなくす */
}
手軽ですが、環境によって隙間の空き具合が違うので、うまくできない場合もあります。
親要素にfont-size:0;を入れる
インラインブロック要素にする要素を内包している要素、つまり親要素のフォントサイズを0にする方法です。
HTML
<ul class="inline-block_parent">
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
</ul>
CSS
.inline-block_parent {
margin: 0; /* ulタグのデフォルトCSSを打ち消し */
padding: 0; /* ulタグのデフォルトCSSを打ち消し */
list-style: none; /* ulタグのデフォルトCSSを打ち消し */
font-size: 0; /* 隙間をなくす */
}
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 10px; /* 余白指定 */
font-size: 16px; /* フォントサイズを復活させる */
}
もちろん子要素のフォントサイズも小さくなってしまうので、子要素には子要素用にフォントサイズを指定する手間があります。
親要素にletter-spacing: -1em;を入れる
letter-spacingとは、文字と文字の間のスペーシングを指定するプロパティです。これを親要素に指定することで、隙間を無くすことができます。
HTML
<ul class="inline-block_parent">
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
<li class="inline-block_test">隙間をなくします</li>
</ul>
CSS
.inline-block_parent {
margin: 0; /* ulタグのデフォルトCSSを打ち消し */
padding: 0; /* ulタグのデフォルトCSSを打ち消し */
list-style: none; /* ulのデフォルトCSSを打ち消し */
letter-spacing: -1em; /* 隙間をなくす */
}
.inline-block_test {
display: inline-block; /* インラインブロック要素にする */
background-color: #ccc; /* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 10px; /* 余白指定 */
letter-spacing: 0em; /* 文字同士の隙間を復活させる */
}
こちらも子要素に影響が出てしまうので、子要素にはletter-spacing: 0;を入れる必要があります。
オールドブラウザでの注意点
IE7以下では<div>などのブロック要素にインラインブロックがききません。IE7に対応したサイトを作成している場合、ブロック要素への指定を下記のようにしましょう。
CSS
セレクタ{
display: inline-block; /* インラインブロック要素にする */
*display: inline; /* IEに効かせるための小技 */
zoom: 1; /* IEの独自のレイアウト情報を有効にする */
}
CSSの学習だけで大丈夫？役割やできないことのおさらい
今回ご紹介したCSSやHTMLはすべてのプログラミングに必要なスキルです。
そのため、いまCSSを学習しているあなたは考えようによっては、更に発展したプログラミング学習の第一歩を既に踏み出しているといえます。
もしあなたの目的が、スマホアプリ開発やWEBサイト作成・オリジナルサービス開発などであれば、HTML/CSSの他にもRuby・Python・PHPなどのプログラミング言語を学習する必要があります。
いまいちどHTML/CSSでできることのおさらいをして、本当にあなたの目的にあった学習を進められているのか確認しておきましょう。
HTML/CSSの役割
基本的に全てのWebページは、HTMLで作られています。そのため、Web制作においてHTMLは欠かせません。
しかし、HTMLだけで作られたWebページは非常にシンプルな構造になってしまいます。そこで活用するのがCSSです。CSSはご存知のとおり、見た目を整え、ユーザーにわかりやすいWebデザインを作ることが出来ます。
例えば、
- テキストの色を変更する
- テキストで強調したい部分にマーカーを引く
- 余白の位置や幅を調整する
- 表のデザインを整える
などなど様々な装飾が可能です。HTMLとCSSを習得するだけでも、普段あなたがみているようなWebページを作成することができますよ。
HTML/CSSでできないこと
先程ご紹介したとおり、HTMLとCSSだけでも簡単なWebページを作成することは可能です。しかし、残念ながらこの2つの言語だけではWEBページに動きを加えたり、オリジナルアプリを開発することはできません。
こういった機能の追加やアプリ開発を行うためには、それぞれに適したプログラミング言語を習得する必要があります。もしあなたが目的をもった上で、CSSの学習をしているのならば、目的にあったプログラミング言語がどの言語なのかを確認したほうがいいでしょう。
目的はあるんだけど、必要なスキルがなにかよく分からない……。
調べたらCSSが必要らしかったから学習してるけど違うの？
あなたがこのように感じているならば、こちらの「プログラミング学習診断」をご活用ください。あなたの目的から必要な言語と簡易的な学習プランを提供いたします。
効率よく目的を達成したいなら、プログラミングスクールがおすすめ
CSSだけじゃなく、他にも色々学習するのは大変そうだな……。
ひとりで学習を続けるのはちょっと不安……。
といった悩みや不安をお持ちの方は、弊社「侍エンジニア」をご利用下さい。
侍エンジニアでは、
- 現役エンジニアによるマンツーマンレッスン
- 目的に合わせたあなた専用のオーダーメイドカリキュラム
- キャリアアドバイザーによる転職・就職支援
を受けることができます。現役エンジニアからあなたの目的に合わせて効率化されたカリキュラムを受けることで、より早く必要なスキルだけを身につけることができますよ。
という方はまず弊社の無料カウンセリングを受講ください。
業界屈指のコンサルタントが、効率的な学習方法や仕事獲得術、今後のキャリアまでさまざまな疑問にお答えいたします。遠方の方でもオンラインで受講できるのでお気軽にご利用ください。
まとめ
いかがでしたか？インラインブロック要素は指定も簡単だし、使い勝手の良い要素です。ぜひどんどん活用していってください！
