先日、サイト内の隙間をなくす方法を以下の記事でご紹介しました。→サイト内の隙間をCSSでなくす方法
でも、回りに聞いてみたらdisplay:inline-block;で出来てしまう隙間に困っている方が多いとのこと。この隙間を解決するための4つの方法をご紹介します。
linline-blockの隙間をなくす4つの方法
inline-blockのliを横並びにする
通常、皆さんはメニューを書くときにどうしているでしょうか。僕は以下のようにしています。
|
1 2 3 4 5 |
<ul> <li>list1 <li>list2 <li>list3 </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
li { display: inline-block; /* IE 6/7 */ /display: inline; /zoom: 1; width: 100px; height: 100px; border: 1px solid #ccc; list-style: none; text-align: center; line-height: 100px; margin: 0; } |
まぁ、1つめの方法ではCSSは変更しないので、このままで結構です。
では、これをどうするのか。はい、こうしちゃいます。
|
1 2 3 |
<ul> <li>list1</li><li>list2</li><li>list3</li> </ul> |
なぜかこうすると隙間が消えます。一番オーソドックスな方法なのではないでしょうか。
liの閉じるタグを無くしてしまう。
こっちはびっくり驚きの方法です。なんと、閉じるタグを無くしてしまうのです。実際に書いてみると以下になります。
|
1 2 3 4 5 |
<ul> <li>list1 <li>list2 <li>list3 </ul> |
こんなんで隙間なくなっちゃうの？とは思うんですけど、なくなります。
でも、この方法だと多分SEOに影響がでそうですね。HTML5では閉じるタグがなくても表示に影響はないのですが、Googleは推奨していません。
初めの方法で直す方が無難かもしれません。
ul（liの親の要素）のletter-spacingにマイナスの値をつける
letter-spacingというのは、文字の間隔を決めるCSSのプロパティです。基本的にはあまり使わないプロパティですが、隙間を埋めるためだけには使えます。記述は以下です。
|
1 2 3 |
ul { letter-spacing: -0.5em; } |
ただし、このままliをなにも記述しないと文字の表示がおかしくなってしまうので、以下の記述もしっかりとつけてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
li { display: inline-block; /* IE 6/7 */ /display: inline; /zoom: 1; width: 100px; height: 100px; border: 1px solid #ccc; list-style: none; text-align: center; line-height: 100px; letter-spacing: normal; /* 追加 */ } |
一番したの記述を追加しています。ulでプロパティの値を変更してしまっているので、戻す作業は必須です。
ul（liの親の要素）にfont-size:0;をいれる。
はい、これも以下のように記述します。
|
1 2 3 |
ul { font-size: 0; /* 追加 */ } |
こちらも再度は書きませんが、liの要素を元に戻す記述が必要です。font-sizeをしっかりと追加しておきましょう。
まとめ
隙間で一番苦しむinline-blockについての隙間のなくし方をご紹介しました。一番良い方としてはやっぱりCSSを変更するのが無難ですかね・・・HTMLの方法は裏技的なイメージがあります。しっかりとそのような所も気にしておきましょう。
