インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

横並びのメニュー項目の高さを揃えたい!CSSで子要素にheight100%、親要素に高さを指定するのがコツ

 2016/07/31   あとで読む

約 3 分で読めます

shutterstock_328511270ワードプレスなど、テーマのデザインカスタマイズでよく手を入れるのが、上段に表示されるグローバルメニューです。

背景色や文字色、枠や影付けなどは今ではCSSで簡単にできますが、メニュー項目の文字数の違いから、高さを揃えたりするのが結構難しかったりするんですね。

親のブロック要素の高さが可変で、その中にあるリンクa要素の高さを親要素の高さ目一杯に揃えたい!という場合には display: flex を利用すれば簡単ですが、まだ全てのブラウザで同じ表示がされてないような感じで(safariとか)どうもまだ使う気になれません。

ということで、ここでは tableプロパティを使っての対応はどうなるか、一緒に見てみましょう。

リスト表示を横並びのメニュー表示へ

まずは横並びの表示へ変えてみる

単純な例として、例えば以下の様なリストをグローバルメニューにしている、といった場合を見てみます。

このリストを横一列に並べる、といった場合によく見かけるCSSの設定は以下の様な感じです。

親要素は特に何か設定する、というわけではなく、子要素のliをfloatにして横並びにしてるんですね。

分かりやすくするために、親のulには外枠を付け、リンク要素に背景色を付けてます。

すると、先ほどのリスト表示が以下のように横並びのメニューで表示されます。

これはこれで良いですが、メニュー項目の名前が長かったりすると以下のように1行に収まらない、という問題が出てきます。

一行に収まらないメニュー表示

メニュー項目の名前が短ければこれで問題ない、というところですが、レスポンシブデザインなどで画面横幅を狭めたり、そもそもがメニュー項目の名前が長いと、1行に収まらなくなるんですね。

これでも別にメニューの項目名はしっかり見れるし、レイアウトが全体として崩れる訳ではないので良いですが、気持ち的にはやっぱり1行に収めたいですね。^-^;)

とうことで、そういった場合にはtableプロパティを使うと以下のように1行に収まります

tableプロパティを使って一行のメニュー表示へ

ulにdisplay:table、liにdisplay:table-cellを設定

上の例と違うのは、親要素の ul に display:table; その子要素 li に display:table-cell; を設定します。

いい感じになりましたね!^-^)

それでもメニューの横幅の最低値(min-width)を設定したり、そもそものメニュー項目の長さから、以下のように高さが揃わない場合が出てきます。

※)メニュー項目の横幅を5個分のメニューということで li要素にwidth: 20%; を指定してます。(table-layoutでの指定がどうもイマイチなため)

こういった場合には背景色を白色などに統一することで、一見この高さが揃ってないことが見えないようする、といったことはできますが、マウスオーバーで背景色に変化を与える場合には、やっぱり気になる人は気になる、みたいな感じです。

例えば背景色を白色などに統一すると以下のようになりますが、マウスオーバーしてみてください。

メニュー1,メニュー5等が、高さが揃ってないことが分かって、デザインにこだわりを持つ人は結構気になるところです。

height:100%の活用1(高さいっぱいのリンクにならない!)

このように高さがそろわない場合には、リンク要素aにheight 100%を指定すれば良いですが、このheightは、その上の親要素の高さが決まってないと有効にならないんですね。

単純に設定しても以下のとおり.

この場合、リンク要素の親であるliの高さが決まってないので、height:100%を指定しても、高さいっぱいのリンクになりません。

ということで、親の要素である li に何かしら高さを設定すればよいですね。

height:100%の活用2(高さいっぱいのリンクになった!)

ここで、親要素である li に高さが指定されたないため、リンク要素もheight:100%を指定してもボックス内の高さいっぱいのリンクにならない、ということから、暫定的に、というか例えば li に高さ1em(1文字分)を指定してみます。

すると、以下のようになります

ほっほー、マウスオーバーしても高さが揃っていることが分かりますね。

ここで最終的に設定したCSSは以下のとおりです。

やったね!b^-^)v

CSSでリストから表を作る方法!2列、3列、4列のレイアウトはこうすれば良いけど罫線が問題

今回のまとめ

ワードプレスのテーマのカスタマイズでは、上段に表示されるグローバルメニューが気になります。

ここで見たように、うまく高さ方向が揃わなくて、そもそものメニューの背景色の高さが揃わなかったり、同様にマウスオーバー時の背景色の高さがそろわない、ということで、個人的にはとても気になる所です。

色々と試行錯誤してましたが、何のことはなく、li要素に高さを指定すれば、リンク要素aのheight:100%が有効になる、ということだったんですね。

あと1年か2年ぐらい経てば(と希望してますが)ここで使用したtableプロパティではなくflexプロパティがどのブラウザでもしっかり表示できるようになってると思いますので、最終的にはflexプロパティで全て解決できるようになるでしょう。

CSSでリストから表を作る方法!flexプロパティを使えば2列、3列、4列のレイアウトは簡単過ぎる!

技術の進歩が早く、以前ではかなりテクニックを駆使して実現していたデザインも、どんどんと簡単になり、その分センスが問われる時代になってきています。

ブログも同じで、記事内容も単に書けばよかった時代から、その中身のセンスなどが問われる時代になってきているんですね。

是非良いデザイン、良い記事書いて、読者をジャンジャン楽しましちゃいましょう。

ブログで収益化をはかるには、是非以下のメルマガも見てみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です