グローバルナビなど、要素を横並びにする際はdisplay:flex;で横並びにする事が多いかと思います。
ですが、inline-blockで横並びにする場面がたまにあるので、使い方と注意点をまとめてみました。
inline-blockの特徴
inline-blockはブロック要素とインライン要素の両方の特性をもった要素になります。
詳しい特徴は以下の通りです。
- 内包するコンテンツにより横幅が変動する
- 横幅、高さが指定できる
- 横並びに配置、縦位置をvertical-align:center;で中央に配置が出来る
- padding、marginで余白を指定できる
上記のように、ブロック要素とインライン要素の両方の特性をもっています。
そのinline-block要素の横並びのやり方を紹介していきます。
横並びにするには
例として、グローバルナビでの横並びについて説明します。
<nav>
<ul>
<li>メニュー1</li>
<li>メニュー2<br>メニュー2</li>
<li>メニュー3</li>
</ul>
</nav>CSSは以下のように記述します。
横並びにする要素にdisplay:inline-block;を指定し、vertical-align:middle;で縦位置中央に揃えています。
ul {
text-align: center; /* メニュー全体を中央揃え */
}
ul li {
display: inline-block;
vertical-align: middle; /* 縦位置中央揃え */
padding: 10px;
margin: 0 10px;
background-color: #E4E4E4;
}すると、以下のように表示されます。
- メニュー1
- メニュー2
メニュー2 - メニュー3
一部の要素が複数行になったとしても、vertical-align:center;で縦中央に揃うようになります。
要素同士の間に余白が入る場合の対策
上記のようにdisplay:inline-block;で横並びにした際に、inline-blockを指定した要素の右側や下側に若干の余白が入ってしまう場合があります。これはHTMLのソースが原因で、これを解消するには以下のようにいくつかやり方があります。
- inline-blockの親要素のfont-size:0;を指定する
- <li>の終了タグ</li>を記述しない
- 終了タグ</li>の後の改行しない
- inline-blockの要素同士の改行部分にコメントアウトを記述する
inline-blockの親要素のfont-size:0;を指定する
ul {
font-size: 0; //親要素のフォントサイズを0にする
text-align: center;
}
ul li {
font-size: 14px; //フォントサイズを改めて指定する
display: inline-block;
vertical-align: middle;
padding: 10px;
margin: 0 10px;
background-color: #E4E4E4;
}この方法だと、親要素のフォントサイズが0になってしまうのでフォントサイズを%やremなどで指定している場合は使えない方法になります。
その他の対策方法
<!-- <li>の終了タグ</li>を記述しない -->
<nav>
<ul>
<li>メニュー1
<li>メニュー2<br>メニュー2
<li>メニュー3
</ul>
</nav>
<!-- 終了タグ</li>の後の改行しない -->
<nav>
<ul>
<li>メニュー1</li><li>メニュー2<br>メニュー2</li><li>メニュー3</li>
</ul>
</nav>
<!-- inline-blockの要素同士の改行部分にコメントアウトを記述する -->
<nav>
<ul>
<li>メニュー1</li><!--
--><li>メニュー2<br>メニュー2</li><!--
--><li>メニュー3</li>
</ul>
</nav>上記のようにその他の対策はいくつかあります。
終了タグを記述しないのはHTMLの記述ルールとしては正しくないかと思うので、改行をしないかコメントアウトで繋いでしまうのが良いのかなと思います。
さいごに
いかがでしたでしょうか。
display:flex;が使用できるのであれば、その方が楽ですし管理もしやすいです。
ですが、inline-blockを使用する場面もたまにありますので覚えておいた方がいいかと思います。
