display:inline-blockの隙間の理由と消す方法

 グローバルナビゲーションや SNS ボタン、ページネーションを実現する場合、div や li といった要素を横に並べることになります。このとき、float や inline-block を使うことになるのですが、inline-block を使って横並べにする場合には、ひとつ注意しなければならないことがあります。

floatの場合

要素の横並べでは定番の float です。検索エンジンで「要素 横並べ」などで検索すると、たくさん情報が出てくるので初心者でも使いやすい方法です。

こうなります。

20161118_1

ただし、ページネーションのように幅が決まっていないものを float で横並べにし、それをブログ記事中央に配置しようとすると、スタイルシートでの指定が煩雑になってしまうのが難点です。これを避けるには、inline-block を使って要素を横並べにするのがおすすめです。

inline-blockの場合

inline-block を使って要素を横並べにするには次のようにします。

ところが、このままだと問題が発生します。隙間が空いてしまうのです。

20161118_2

これは、li タグの後ろにある改行を半角スペースとして認識してしまうという inline-block の仕様が原因です。

解決方法1:リストの改行をなくす

HTML の記述方法として、li タグの後ろにある改行を消去し、一行に納めてしまうというものです。改行を半角スペースとして認識するのなら、改行をなくしてしまえという発想です。

解決方法2:閉じタグを省略する

すべてのタグで使える方法ではありませんが、HTML5 では閉じタグを省略することが可能です。今回の li は閉じタグを省略すると、次の li の開始タグの前に自動的に閉じタグを入力してくれるので、このようなことが可能になっています。

解決方法3:親要素にfont-size:0;を指定する

今回の例で言えば、ul の font-size をゼロにします。ただし、そのままだとリストのすべての文字の font-size がゼロになってしまうので、li でフォントサイズを再指定する必要があります。

ただし、この方法はfont-sizeを%指定で設定したい場合にいろいろと面倒くさいので、次のletter-spacingによる方法がおすすめです。

解決方法4:親要素にletter-spacing:-1em;を指定する

親要素で文字間隔をマイナスにして、子要素で再設定するという方法です。先程はフォントサイズで隙間を埋めましたが、こちらは文字間隔の指定によって行っています。

今回は子要素で letter-spacing:0; を指定し直していますが、ブログによっては読みやすくするために文字間隔を広めにとっている場合もあるので、そこは適宜調整してください。

ネットで調べてみると、次のように設定している場合が多いかと思います。

もちろんこれでも動作するのですが、アンドロイドアプリを HTML で作成した場合、文字間隔を -0.4em で指定するとアプリが落ちることがあるようです。

親要素で文字間隔をマイナスに設定し、それを子要素で元に戻すというポイントさえ押さえておけば問題ないので、極論すると次のように設定しても結果は同じになります。

お好みの値を採用してください。

20161118_3

inline-blockで横並べにしたものを中央に配置する

float、inline-block のどちらで要素を横並べしても結果は同じですが、inline-block の場合には横並べしたものを中央に配置するのが簡単であるというメリットがあります。スタイルシートで一行追加するだけです。

シンプルで見やすいスタイルシートを目指すなら inline-block がおすすめです。こちらでもくわしく解説しているので、あわせてよろしくお願いします。

inline-blockで要素を横並びにする | Naokix.net

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


TOP