グローバルナビゲーションや SNS ボタン、ページネーションを実現する場合、div や li といった要素を横に並べることになります。このとき、float や inline-block を使うことになるのですが、inline-block を使って横並べにする場合には、ひとつ注意しなければならないことがあります。
floatの場合
要素の横並べでは定番の float です。検索エンジンで「要素 横並べ」などで検索すると、たくさん情報が出てくるので初心者でも使いやすい方法です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <ul> <li>担仔麺</li> <li>排骨飯</li> <li>蛤蜊湯</li> <li>臭豆腐</li> <li>愛玉</li> </ul> ul { list-style: none; overflow: hidden; } li { float: left; width: 150px; height: 25px; border: 1px solid #FFAE35; text-align: center; line-height: 25px; } |
こうなります。
ただし、ページネーションのように幅が決まっていないものを float で横並べにし、それをブログ記事中央に配置しようとすると、スタイルシートでの指定が煩雑になってしまうのが難点です。これを避けるには、inline-block を使って要素を横並べにするのがおすすめです。
inline-blockの場合
inline-block を使って要素を横並べにするには次のようにします。
1 2 3 4 5 6 7 8 | li { display: inline-block; width: 150px; height: 25px; border: 1px solid #FFAE35; text-align: center; line-height: 25px; } |
ところが、このままだと問題が発生します。隙間が空いてしまうのです。
これは、li タグの後ろにある改行を半角スペースとして認識してしまうという inline-block の仕様が原因です。
解決方法１：リストの改行をなくす
HTML の記述方法として、li タグの後ろにある改行を消去し、一行に納めてしまうというものです。改行を半角スペースとして認識するのなら、改行をなくしてしまえという発想です。
1 2 3 | <ul> <li>担仔麺</li><li>排骨飯</li><li>蛤蜊湯</li><li>臭豆腐</li><li>愛玉</li> </ul> |
解決方法２：閉じタグを省略する
すべてのタグで使える方法ではありませんが、HTML5 では閉じタグを省略することが可能です。今回の li は閉じタグを省略すると、次の li の開始タグの前に自動的に閉じタグを入力してくれるので、このようなことが可能になっています。
1 2 3 4 5 6 7 | <ul> <li>担仔麺 <li>排骨飯 <li>蛤蜊湯 <li>臭豆腐 <li>愛玉 </ul> |
解決方法３：親要素にfont-size:0;を指定する
今回の例で言えば、ul の font-size をゼロにします。ただし、そのままだとリストのすべての文字の font-size がゼロになってしまうので、li でフォントサイズを再指定する必要があります。
1 2 3 4 5 6 7 8 | ul { font-size: 0; } li { display: inline-block; font-size: 16px; } |
ただし、この方法はfont-sizeを％指定で設定したい場合にいろいろと面倒くさいので、次のletter-spacingによる方法がおすすめです。
解決方法４：親要素にletter-spacing:-1em;を指定する
親要素で文字間隔をマイナスにして、子要素で再設定するという方法です。先程はフォントサイズで隙間を埋めましたが、こちらは文字間隔の指定によって行っています。
1 2 3 4 5 6 7 8 | ul { letter-spacing: -1em; } li { display: inline-block; letter-spacing: 0; } |
今回は子要素で letter-spacing:0; を指定し直していますが、ブログによっては読みやすくするために文字間隔を広めにとっている場合もあるので、そこは適宜調整してください。
ネットで調べてみると、次のように設定している場合が多いかと思います。
1 2 3 4 5 6 7 | ul { letter-spacing: -.4em; } li { letter-spacing: 0; } |
もちろんこれでも動作するのですが、アンドロイドアプリを HTML で作成した場合、文字間隔を -0.4em で指定するとアプリが落ちることがあるようです。
親要素で文字間隔をマイナスに設定し、それを子要素で元に戻すというポイントさえ押さえておけば問題ないので、極論すると次のように設定しても結果は同じになります。
1 2 3 4 5 6 7 | ul { letter-spacing: -100em; } li { letter-spacing: 0; } |
お好みの値を採用してください。
inline-blockで横並べにしたものを中央に配置する
float、inline-block のどちらで要素を横並べしても結果は同じですが、inline-block の場合には横並べしたものを中央に配置するのが簡単であるというメリットがあります。スタイルシートで一行追加するだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | ul { letter-spacing: -1em; text-align: center; /* 一行追加するだけ */ } li { display: inline-block; width: 150px; height: 25px; border: 1px solid #FFAE35; text-align: center; line-height: 25px; letter-spacing: 0; } |
シンプルで見やすいスタイルシートを目指すなら inline-block がおすすめです。こちらでもくわしく解説しているので、あわせてよろしくお願いします。
inline-blockで要素を横並びにする | Naokix.net
Comment