HTML において、ブロック要素は縦に並ぶという性質を持っています。これはブロック要素が文書構造においてひとつの塊や段落として扱われるため、前後に改行が挿入されるためです。これを横並べにしたければ、本来であればインライン要素に分類されるタグに変更するのが筋だと思うのですが、WordPress や各種ブログサービスでは出力されるタグが固定されているため、ブロック要素を横並べにしなければならない場面もあるかもしれません。
例えば、ブログの上部に設置する「グローバルナビゲーション」や記事一覧で数が多くなったときに下のほうに表示される「ページネーション」などは、WordPress では ul と li を使って実現されます。ul と li はブロック要素的なレイアウトなので、特に設定をしなければ縦に並んでしまいます。
当ブログでは今まで float を使って要素を横に並べていたのですが、display:inline-block; を使用しても同じことができるということなので、どのように設定すればよいのか調べてみました。
inline-blockでカスタマイズ
冒頭でページネーションを例として挙げたので、これを意識してデザインをカスタマイズしてみたいと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul class="pagination"> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#">6</a> </li> </ul> |
普通にリストです。ちなみに、pag「e」nation と記述してしまいそうになりますが、pag「i」nation だそうです。発音も「パジネイション」、または「パージネイション」だそうですが、まあ日本国内ならページネーションで問題ないでしょう。
お馴染みのリストですが、これに inline-block を適用します。
1 2 3 | .pagination li { display: inline-block; } |
こうなります。
list-style:none; を指定しなくてもリストマーカーが無効になってくれるのが便利です。
inline-block を指定された要素は幅や高さを設定できるので、ページネーションぽくしてみます。
1 2 3 4 5 6 7 8 | .pagination li { display: inline-block; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; } |
こうなります。
数字リンクを縦方向に中央に配置する方法ですが、ページネーション的に数字は必ず一行であることを利用して line-height で調整することにしました。要は height と line-height の値を同じにすればよいのですが、くわしくはこちらをご覧ください。
vertical-alignとtext-alignは違うのだよ | Naokix.net
inline-blockの隙間問題
上のスクリーンショットを見ると、li 同士の間に隙間があいてしまっています。これを float:left; で横並べにした場合と比較します。
これは inline-block の解説ページなどで必ず触れられる問題ですが、原因は li の後ろの改行を半角スペースとして読み込んでしまっていることによります。これを解決するにはいくつか方法があります。
一列で記述する
改行が原因であるので、これを削除するために一列で記述してしまう方法です。
1 2 3 | <ul class="pagination"> <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li> </ul> |
閉じタグを省略する
HTML5 では閉じタグを省略して記述することができるので、これを利用して解決する方法です。
1 2 3 4 5 6 7 8 | <ul class="pagination"> <li><a href="#">1</a> <li><a href="#">2</a> <li><a href="#">3</a> <li><a href="#">4</a> <li><a href="#">5</a> <li><a href="#">6</a> </ul> |
スタイルシートの設定で解決する
上のふたつの解決方法は、WordPress や各種ブログサービスのような出力される HTML が固定されている場合、使うことができません。そこで CSS で次のように設定すればよいです。
1 2 3 4 5 6 7 | .pagination { letter-spacing: -1em; } .pagination li { letter-spacing: 0em; } |
inline-block を指定した li に letter-spacing:0em; を、li の親要素に letter-spacing:-1em; を指定します。親要素の letter-spacing で隙間を失くし、子要素のほうで元に戻してあげるわけですね。
実際には、ページネーションの li の間にはスペースを設けるのが一般的なので、見て見ないふりをするのであればこの設定は必要がなくなります。ただし、その場合には後ほど述べるページネーションを中央に配置する際に、この隙間分のズレが生じることを忘れないでください。まあ、たいした問題ではないのかも。
一応、細かく調整。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .pagination { letter-spacing: -1em; } .pagination li { display: inline-block; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; letter-spacing: 0em; margin-right: 10px; } .pagination li:last-child { margin-right: 0; } |
こうなります。
テキスト以外もクリックできるようにしたい
マウスを近づけるとわかると思いますが、今のままでは数字の上にまでマウスを持ってこなければリンクをクリックすることができません。枠の中ならどこでもクリックできたほうがユーザーにとって便利です。リンクを display プロパティでブロック要素に変換、ついでにリンクの下線も削除してしまいましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .pagination { letter-spacing: -1em; } .pagination li { display: inline-block; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; letter-spacing: 0em; margin-right: 10px; } .pagination li:last-child { margin-right: 0; } .pagination li a { display: block; text-decoration: none; } |
こうなります。
ページネーションをブログの中央に配置する
本来であれば、inline-block で要素を横に並べる解説で終わるはずだったのですが、書き進めていくうちになんだかページネーションのカスタマイズ記事になってしまっていたので、カスタマイズを最後までまっとうしたいと思います。なぜこうなった。
ブロック要素を中央に配置するのは比較的簡単です。中央にしたい要素の幅が指定されている必要がありますが、margin:0 auto; を指定すれば済みます。
1 2 3 4 5 | <div class="parent"> <div class="child"> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 | .parent { width: 300px; height: 100px; background: #AEFF35; } .child { width: 100px; height: 50px; background: #FFCD35; margin: 0 auto; } |
当ブログにもページネーションを設置しており、当然記事の中央に配置されるように設定をしています。
ここまでの説明と当ブログのスクリーンショットを見て勘の鋭い方は気づかれたと思いますが、ページネーションは一定数の記事が投稿されるまでは幅の決まっていない要素と見ることができます。この場合には margin:0 auto; を指定して中央に配置するという方法を使うことができません。
解決方法は、inline-block を指定した li の親要素である ul に対して、text-align で center を指定するものです。今までの CSS の ul に一行追加するだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .pagination { letter-spacing: -1em; text-align: center; /*ここを追加するだけ*/ } .pagination li { display: inline-block; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; letter-spacing: 0em; margin-right: 10px; } .pagination li:last-child { margin-right: 0; } .pagination li a { display: block; text-decoration: none; } |
インラインブロックという名称のとおり、テキストのようなインライン要素と同等に扱えるということなのでしょうか。ブロック要素内のテキストを中央に配置する方法と同じですね。スタイルシートでブロック要素を中央揃えにするときに苦労した私としては、なんだか一周回った感があるのですが。
おまけ
ページネーションを中央に配置するために text-align を使用しましたが、古い IE に対応するために position プロパティを使って中央に配置するソースコードも見かけるかと思います。実は、その場合には 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 22 23 24 | <div class="test"> <div class="parent"> <ul class="pagination"> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#">6</a> </li> </ul> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .test { width: 500px; height: 150px; border: 1px solid #AAA; } .parent { overflow: hidden; } .pagination { list-style: none; } .pagination li { float: left; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; margin-right: 10px; } .pagination li:last-child { margin-right: 0; } .pagination li a { display: block; text-decoration: none; } |
float の場合、最終的に解除しなければならないので、ページネーションを div タグで囲って overflow:hidden; を指定する必要があります。
そのほか、リストマーカーを無効にすること、letter-spacing の設定が必要なくなるなど、細かいところを除けばあとは同じです。いまのところこんなかんじです。
これを中央に配置するには次の部分を追加します。
1 2 3 4 5 6 7 8 9 10 | .pagination { float: left; position: relative; left: 50%; } .pagination li { position: relative; left: -50%; } |
li で横並べにするための float を設定しているので、ul に float を設定しなくてもいいのではないかと思うかもしれません。試しに削除してみると、中央に配置されなくなります。原因はよくわからない。
最終的にはこうなります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .parent { overflow: hidden; } .pagination { list-style: none; float: left; position: relative; left: 50%; } .pagination li { float: left; position: relative; left: -50%; width: 35px; height: 35px; text-align: center; line-height: 35px; border: 1px solid #FF9900; margin-right: 10px; } .pagination li:last-child { margin-right: 0; } .pagination li a { display: block; text-decoration: none; } |
私は inline-block と text-align で設定するほうがわかりやすいので好きですね。
Comment