inline-blockで要素を横並びにする

 HTML において、ブロック要素は縦に並ぶという性質を持っています。これはブロック要素が文書構造においてひとつの塊や段落として扱われるため、前後に改行が挿入されるためです。これを横並べにしたければ、本来であればインライン要素に分類されるタグに変更するのが筋だと思うのですが、WordPress や各種ブログサービスでは出力されるタグが固定されているため、ブロック要素を横並べにしなければならない場面もあるかもしれません。

 例えば、よくブログの上部に設置されている案内リンクの「グローバルナビゲーション」や記事数の多くなったブログのインデックス下部に表示される「ページネーション」などは、WordPress では ul と li を使って実現されます。ul と li はブロック要素的なレイアウトになるので、特に設定をしなければ縦に並んでしまいます。

 当ブログでは今まで float を使って要素を横に並べていたのですが、display:inline-block; を使用しても同じことができるということなので、どのように設定すればよいのか調べてみました。

inline-blockでカスタマイズ

冒頭でページネーションを例として挙げたので、これを意識してデザインをカスタマイズしてみたいと思います。

普通にリストです。ちなみに、pag「e」nation と記述してしまいそうになりますが、pag「i」nation だそうです。発音も「パジネイション」、または「パージネイション」だそうですが、まあ日本国内ならページネーションで問題ないでしょう。

20161106_1_1

お馴染みのリストですが、これに inline-block を適用します。

こうなります。

20161106_1_2

list-style:none; を指定しなくてもリストマーカーが無効になってくれるのが便利です。

inline-block を指定された要素は幅や高さを設定できるので、ページネーションぽくしてみます。

こうなります。

20161106_1_3

数字リンクを縦方向に中央に配置する方法ですが、ページネーション的に数字は必ず一行であることを利用して line-height で調整することにしました。要は height と line-height の値を同じにすればよいのですが、くわしくはこちらをご覧ください。

inline-blockの隙間問題

上のスクリーンショットを見ると、li 同士の間に隙間があいてしまっています。これを float:left; で横並べにした場合と比較します。

20161106_1_4

これは inline-block の解説ページなどで必ず触れられる問題ですが、原因は li の後ろの改行を半角スペースとして読み込んでしまっていることによります。これを解決するにはいくつか方法があります。

一列で記述する

改行が原因であるので、これを削除するために一列で記述してしまう方法です。

閉じタグを省略する

HTML5 では閉じタグを省略して記述することができるので、これを利用して解決する方法です。

スタイルシートの設定で解決する

上のふたつの解決方法は、WordPress や各種ブログサービスのような出力される HTML が固定されている場合、使うことができません。そこで CSS で次のように設定すればよいです。

inline-block を指定した li に letter-spacing:0em; を、li の親要素に letter-spacing:-1em; を指定します。親要素の letter-spacing で隙間を失くし、子要素のほうで元に戻してあげるわけですね。

実際には、ページネーションの li の間にはスペースを設けるのが一般的なので、見て見ないふりをするのであればこの設定は必要がなくなります。ただし、その場合には後ほど述べるページネーションを中央に配置する際に、この隙間分のズレが生じることを忘れないでください。まあ、たいした問題ではないのかも。

一応、細かく調整。

こうなります。

20161106_1_5

テキスト以外もクリックできるようにしたい

マウスを近づけるとわかると思いますが、今のままでは数字の上にまでマウスを持ってこなければリンクをクリックすることができません。枠の中ならどこでもクリックできたほうがユーザーにとって便利です。リンクを display プロパティでブロック要素に変換、ついでにリンクの下線も削除してしまいましょう。

こうなります。

20161106_1_6

ページネーションをブログの中央に配置する

本来であれば、inline-block で要素を横に並べる解説で終わるはずだったのですが、書き進めていくうちになんだかページネーションのカスタマイズ記事になってしまっていたので、カスタマイズを最後までまっとうしたいと思います。なぜこうなった。

ブロック要素を中央に配置するのは比較的簡単です。中央にしたい要素の幅が指定されている必要がありますが、margin:0 auto; を指定すれば済みます。

20161106_1_7

当ブログにもページネーションを設置しており、当然記事の中央に配置されるように設定をしています。

20161106_1_8

ここまでの説明と当ブログのスクリーンショットを見て勘の鋭い方は気づかれたと思いますが、ページネーションは一定数の記事が投稿されるまでは幅の決まっていない要素と見ることができます。この場合には margin:0 auto; を指定して中央に配置するという方法を使うことができません。

解決方法は、inline-block を指定した li の親要素である ul に対して、text-align で center を指定するものです。今までの CSS の ul に一行追加するだけです。

インラインブロックという名称のとおり、テキストのようなインライン要素と同等に扱えるということなのでしょうか。ブロック要素内のテキストを中央に配置する方法と同じですね。スタイルシートでブロック要素を中央揃えにするときに苦労した私としては、なんだか一周回った感があるのですが。

おまけ

ページネーションを中央に配置するために text-align を使用しましたが、古い IE に対応するために position プロパティを使って中央に配置するソースコードも見かけるかと思います。実は、その場合には inline-block を使うことはできません。

当然、float を使って要素を横並べにするわけですが、まずは float によるページネーションのおさらい。

float の場合、最終的に解除しなければならないので、ページネーションを div タグで囲って overflow:hidden; を指定する必要があります。

そのほか、リストマーカーを無効にすること、letter-spacing の設定が必要なくなるなど、細かいところを除けばあとは同じです。いまのところこんなかんじです。

20161106_1_9

これを中央に配置するには次の部分を追加します。

li で横並べにするための float を設定しているので、ul に float を設定しなくてもいいのではないかと思うかもしれません。試しに削除してみると、中央に配置されなくなります。原因はよくわからない。

最終的にはこうなります。

20161106_1_10

私は inline-block と text-align で設定するほうがわかりやすいので好きですね。

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

スポンサーリンク

Comment

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

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP