【CSS】aタグのクリック範囲を親要素いっぱいに広げる方法

2021年07月25日

普通にaタグでリンクを作ると文字部分しかクリックできません。

liを使ってメニューを作るときはliいっぱいにaタグが広がってほしいですよね？

CSSでaタグのクリック範囲を親要素いっぱいに広げる方法を解説します。

【ベース】何もしない状態
【幅をいっぱいにする】aタグにdisplay:blcok
【高さをいっぱいにする】親にdisplay:flex
【まとめ】aタグの範囲を親に合わせる方法

【ベース】何もしない状態

aタグはよくメニューで使われます。よってliの中にaタグを入れることがよくあります。

下記はaタグに何もしていない状態です。

緑背景がliの部分、水色背景がaタグのクリック部分です。

<style>
.example{
    padding: 0;
    list-style: none;
}
.example li{
    border: 1px solid #333;
    background: #83b278;
    padding: 10px;
    margin: 0;
}
.example li a{
    background: #e0f4fd;
}
</style>
<ul class="example">
    <li><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
    <li><a href="#">テキストテキスト</a></li>
    <li><a href="#">テキスト</a></li>
</ul>

これをベースにaタグのクリック範囲を広げてみましょう。

※2行になったときの影響を確認するためわざと長いテキストにしています。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】

htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。

この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

【幅をいっぱいにする】aタグにdisplay:blcok

横幅を親要素いっぱいにするにはaタグにdisplay:blcokを指定します。

<style>
.example2{
    padding: 0;
    list-style: none;
}
.example2 li{
    background: #83b278;
    margin: 0;
}
.example2 li a{
    /*追加*/display: block;
    /*移動*/padding: 10px;
    /*移動*/border: 1px solid #333;
    background: #e0f4fd;
}
</style>
<ul class="example2">
    <li><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
    <li><a href="#">テキストテキスト</a></li>
    <li><a href="#">テキスト</a></li>
</ul>

display:blcokはブロック要素にするCSSです。

ブロック要素にすると横幅がいっぱいになり、クリック範囲もその範囲内ずべてになります。

さらにliに指定していたpaddingとborderをaタグに移します。

【高さをいっぱいにする】親にdisplay:flex

【liを横並べ】liの親にdisplay:flex

ulにdisplay:flexを指定するとliを横並べできます。

しかし、下記のようになりaタグのクリック範囲が縦には広がりません。

<style>
.example3{
    /*追加*/display: flex;
    padding: 0;
    list-style: none;
}
.example3 li{
    /*追加*/width: 100%;
    background: #83b278;
    margin: 0;
}
.example3 li a{
    display: block;
    padding: 10px;
    border: 1px solid #333;
    background: #e0f4fd;
}
</style>
<ul class="example3">
    <li><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
    <li><a href="#">テキストテキスト</a></li>
    <li><a href="#">テキスト</a></li>
</ul>

【aタグの高さをいっぱいにする】aタグの親にdisplay:flex

aタグの親(li)にdisplay:flexを指定することでaタグの高さがいっぱいになります。

<style>
.example4{
    display: flex;
    padding: 0;
    list-style: none;
}
.example4 li{
    /*追加*/display: flex;
    width: 100%;
    background: #83b278;
    margin: 0;
}
.example4 li a{
    display: block;
    /*追加*/width: 100%;
    /*追加*/box-sizing: border-box;
    padding: 10px;
    border: 1px solid #333;
    background: #e0f4fd;
}
</style>
<ul class="example4">
    <li><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
    <li><a href="#">テキストテキスト</a></li>
    <li><a href="#">テキスト</a></li>
</ul>

display:flexとセットで使うalign-itemsというCSSがあります。

align-itemsは初期状態（特に指定しない状態）で要素の高さを親要素に合わせる特性があります。

liにdisplay:flexを指定することで子要素(aタグ)の横幅がテキストに合わせて最小になります。

よってaタグに「width: 100%」と「box-sizing: border-box」を指定して横幅いっぱいにします。

【aタグのテキストを中央寄せ】aタグにdisplay:flex

aタグのテキストを上下左右中央寄せするには、aタグに下記CSSを指定します。

display: flex
justify-content: center
align-items: center
text-align: center

<style>
.example5{
    display: flex;
    padding: 0;
    list-style: none;
}
.example5 li{
    display: flex;
    width: 100%;
    background: #83b278;
    margin: 0;
}
.example5 li a{
    /*削除display: block;*/
    /*追加*/display: flex;
    /*追加*/justify-content: center;
    /*追加*/align-items: center;
    /*追加*/text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #333;
    background: #e0f4fd;
}
</style>
<ul class="example5">
    <li><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
    <li><a href="#">テキストテキスト</a></li>
    <li><a href="#">テキスト</a></li>
</ul>

align-itemsはdisplay:flexをセットで使い、子要素の縦位置を調整できるCSSです。

align-items: centerを指定すると上下中央になります。

justify-contentはdisplay:flexをセットで使い、子要素の横位置を調整できるCSSです。

justify-content: centerを指定すると左右中央になります。

justify-content: centerは1行テキストなら左右中央にしますが、2行以上になると中央寄せしなくなります。

2行以上のテキスト用にtext-align: centerも指定しましょう。

align-itemsとjustify-contentを効かせるためにaタグに「display: flex」を指定する必要があります。

このときaタグの「display: block」は削除しましょう。

aタグに「display: block」がかかっていると「display: flex」が効かないためです。