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

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

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

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

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

Contents

リスト表示を横並びのメニュー表示へ
1. まずは横並びの表示へ変えてみる
2. 一行に収まらないメニュー表示
tableプロパティを使って一行のメニュー表示へ
今回のまとめ

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

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

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

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

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

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

/* ul のクラスを menu1 としてます */
ul.menu1 {
    margin: 0!important;
    padding: 0!important;
    display: block;

    /* 分かりやすくするために外枠を付ける */
    border: 1px solid gray!important; 
    /* 横幅いっぱいの表示 */
    width: 100%;
}
ul.menu1 li {
    float: left; /* 横並びにするためにfloat指定 */
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.menu1 li a {
    padding: 10px; /* リンク要素自体に大きさを持たせる */
    border: 1px solid white;
    text-decoration: none;
    display: block;
    background: #e4e4e4;
}
/* 分かりやすいようにマウスオーバーで文字色と背景色を変更 */
ul.menu1 li a:hover {
    color: white;
    background: #983434;
}

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

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

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

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

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

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

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

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

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

ul.menu2 {
	display: table; /* tableプロパティ指定 */
    margin: 0!important;
    padding: 0!important;
    border: 1px solid gray!important;
    width: 100%;
}
ul.menu2 li {
    display: table-cell;  /* 子要素にtable-cell指定 */
}

/* 以下クラス名が異なるだけで内容は同じ */
ul.menu2 li a {
    padding: 10px;
    border: 1px solid white;
    text-decoration: none;
    display: block;
    background: #e4e4e4;
}
ul.menu2 li a:hover {
    color: white;
    background: #983434;
}

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

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

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

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

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

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

height:100%の活用１（高さいっぱいのリンクにならない！）

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

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

ul.menu2 li {
    display: table-cell; /* 子要素にtable-cell指定 */
}
ul.menu2 li a {
    padding: 10px;
    border: 1px solid white;
    text-decoration: none;
    display: block;
    background: #e4e4e4;
    height: 100%; /* 高さ目いっぱいになるように height:100% を指定 */
}

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

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

height:100%の活用２（高さいっぱいのリンクになった！）

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

ul.menu2 li {
    display: table-cell; /* 子要素にtable-cell指定 */
    height: 1em; /* ←　高さ１文字分を追加*/
}
ul.menu2 li {
    padding: 10px;
    border: 1px solid white;
    text-decoration: none;
    display: block;
    background: #e4e4e4;
    height: 100%; /* 高さ目いっぱいになるように height:100% を指定 */
}

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

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

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

ul.menu2 {
    display: table;

    margin: 0!important;
    padding: 0!important;
    display: block;
    border: 1px solid gray!important;
    width: 100%;
}

ul.menu2 li {
    display: table-cell;
    width: 20%;
    text-align: center;

    float: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.menu2 li a {
    height: 100%;
	
    padding: 10px;
    border: 1px solid white;
    text-decoration: none;
    display: block;
    background: #e4e4e4;
}
ul.menu2 li a:hover {
    color: white;
    background: #983434;
}

やったね！b^-^)v

今回のまとめ

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

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

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

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

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

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

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

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

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

無料メールマガジンの詳しい内容を見る！