CSS

on Note

a要素をボックスいっぱいにしようとしたら高過ぎた

a要素(リンク)を、高さ(height)を指定した親要素にあたるボックスに対して、いっぱいの高さになるようにCSSで指定したが、a要素が親要素よりも高くなってしまう(親要素に納まらない)という失敗を記事にしました。

その時記述したHTML及びCSSと、どうすればa要素が親要素に対してサイズが合うかを説明します。

まず、横幅だけを指定した親要素に対して、a要素をいっぱいに広げる場合の説明をします。次に親要素に高さ(height)も指定して、a要素の高さもそれに合わせる場合の説明と、段階的に説明します。

今回の失敗は非常に初歩的なものですが、同じ失敗をする方の参考になればと思います。

a要素のサイズを親要素の横幅に合わせる

今回は、リスト(ul要素)を作成し、li要素の子要素にa要素を設置しました。メニューとしてリンクのリストを作ったわけです。尚、リスト状のメニューは横並びにしています。

a要素をli要素いっぱいに広げたサイズにし、ボタンのようなリンクにしています。HTMLCSSは次の通りです。

<ul>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
ul {
    display: flex;
    list-style-type: none;
}

li {
    width: 200px;
    border: solid 1px #888;
    margin: 10px;
    border-radius: 3px;
}

a {
    display: block;          /*block指定ことでli要素の横幅に合わせる*/
    padding: 8px;
    text-align: center;      /*コンテンツ部(文字の部分)を中央寄せ*/
    text-decoration: none;
    background-color: #efefef;
}

これは次のように表示されます。

メニューの背景色でわかるように、a要素のサイズはli要素のサイズに合っています。

a要素にdisplay: block;を指定することでブロックレベルとなり、親要素であるli要素に対して同じ横幅となります。ただdisplay: block;の指定だけでは横幅が合うだけです。

次に、親要素であるli要素に高さも指定した場合、どうなるかを見てみます。

高さを指定した親要素にa要素の高さは合うか

先程のスタイルに、li要素に高さ(height)を指定してみます。

ul {
    中略
}

li {
    width: 200px;
    height: 100px;
    中略
}

a {
    display: block;
    padding: 8px;
    中略
}

li要素へのheight: 100px;の指定によって次のように変わります。

li要素に高さが出ました。しかしa要素に高さがないので、背景色でわかるようにli要素に対してa要素の高さが足りません。この場合、a要素にもheightを指定すれば良いだけです。そしてその値はというと、親要素に対して(この場合li要素に対して)いっぱいにしたいので「100%」とします。

ul {
    中略
}

li {
    width: 200px;
    height: 100px;
    中略
}

a {
    display: block;
    padding: 8px;
    height: 100%;
    中略
}

結果、次のように表示されます。

a要素に高さは出ましたが、今度は逆にa要素が高くなり過ぎました。これが今回の失敗でして、基本的なことを忘れていました。ポイントは、a要素にpaddingを指定しているところです。

a要素の高さを親要素に合わせる

横幅の指定にwidth、高さの指定にheightを指定する場合、widthやheightは、コンテンツ領域に対しての指定になる、という点は覚えておかなくてはなりません。今回の場合は、「メニュー」という文字領域に対してheightを指定したことになるので、余白の部分、今回の例ではpadding: 8px;の分がはみ出したわけです。

これを解決するのがbox-sizing: border-box;です。heightを指定したa要素に、同時にbox-sizing: border-box;を指定することで、height: 100%;が、ボーダーまでを含んだものになるのです。

ul {
    中略
}

li {
    width: 200px;
    height: 100px;
    中略
}

a {
    display: block;
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
    中略
}

これで次のように変わります。

これでa要素の高さがli要素に合う形となりました。

まとめ

今回の失敗は、a要素の高さを、親要素であるli要素に合わせようとしたが、基本的なことを忘れていた為に合わなかったという内容です。

高さ(height)を設定した親要素に対してa要素の高さも合わせる場合は、a要素にheight: 100%;を指定します。

この時、a要素にpaddingやborderを指定するのなら、a要素にbox-sizing: border-box;も指定しないとpaddingやborderの分が親要素よりも高くなってしまいます。

widthやheightは、元々はコンテンツ領域に対して働きかけるプロパティだからです。