親要素全体をクリック可能にする恐らく一番簡単な方法

カード化したコンテンツ全体をリンク（クリック可能）にしたいと考えた時、どのようにしていますか？

よくやるし、よく紹介されているのは以下のようなHTMLで、子要素Aのリンクを全体に広げる方法ですね。

<div class="oya-content">
    <div class="ko-content-a">
        <a href="">子コンテンツの内容A</a>
    </div>
    <div class="ko-content-b">
       子コンテンツの内容B
    </div>
</div>

親要素に「position:relative;」を、リンクのある子要素Aに「position:absolute;」を付けて、その要素を全体に広げた上で、子要素Aの位置を指定するみたいな感じで実現します。

でもこれだと、子コンテンツの内容Aの位置指定がすごく面倒で、いろいろな画面サイズの状況に合わせようとするととてもスタイルコードが気持ち悪くなります。

また、「display:flex;」などを使った場合にはどんどんややこしくなるという事態も発生します。

そこで今回は、別の方法を使って、親要素全体をクリック（リンク）にする方法を2つ紹介します（個人的におすすめなのは【方法2】です）。

本ページで紹介する手法は一例です。HTMLコーディングとして正しいかどうかは、自身で調べて判断ください

【方法1】コンテンツ全体をリンクタグで囲む

これかなり力業で、ひと昔前までは全く推奨されていませんでした。でもいつの間にか許容される（特に問題視されなくなる）ようになって、以下のような書き方をしているのをたまに見かけます。

<a href="">
    <div class="oya-content">
        <div class="ko-content-a">
            子コンテンツの内容A
        </div>
        <div class="ko-content-b">
            子コンテンツの内容B
        </div>
    </div>
</a>

構文としては、アンカーテキストの部分がdivで囲まれたコンテンツということになるので、これでもOK（多分）なのですが、以前は．．みたいな注釈付きなので、個人的にはできれば使用したくない手法でもあります。

aタグにclass属性を追加してそれに対するスタイルコードを記述すれば、そのコンテンツだけに何かの装飾等を加えることもできます

【方法2】アンカー（リンクテキスト）なしリンクを使用する

こちらが個人的には推奨する方法、スタイルコードのdisplay要素にあまり影響されずにうまくいく方法です。

このような形でHTMLを書きます。

<div class="oya-content">
    <a href="リンク先URL" aria-label="リンクの目的・内容（アンカーの代わり）"></a>
    <div class="ko-content-a">
        <a href="">子コンテンツの内容A</a>
    </div>
    <div class="ko-content-b">
       子コンテンツの内容B
    </div>
</div>

基本的な手法は冒頭のよくある形と変わらないので、以下のようにスタイルコードを書いて親要素と子要素の関係、リンクの要素を親要素全体に反映させます。

.oya-content{
position:related;
}

.oya-content a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

この手法を使う上でのポイントは以下の4つです。

• 親要素の直下に完成したaタグを入れる
• aタグにはアンカー（リンクテキスト）を入れない、他の部分にはaタグを使わない
• アンカーの代わりに「aria-label」属性を追加する
• ホーバー時の装飾はaタグ以外を指定する

まずpositionで親子関係を作るので、親要素の直下にリンクを入れる構造にします。

そして、aタグはこの1か所だけにし、他の場所では使わない（使う場合は両方にclassを追加して明確に分ける）ようにし、アンカーがないので、Google PageSpeed Insightsなどで「リンクに識別可能な名前が指定されていません」と言われてしまわないよう、「aria-label」属性を付加して、このリンクの意味を明示します（これはtitle属性でも大丈夫なようです）。

最後に、例えばホーバー時に背景色を変えるなどの変化をさせたい時は、通常はaタグに対して疑似要素を用いてコントロールしますが、この方法ではコンテンツにaタグが乗っている形なので、直接aタグに疑似要素（:hover）でスタイルを指定すると、コンテンツの中身には作用せず、設定した背景色でおおわれてしまいますから、必ず元のclassへ疑似要素を追加してスタイルコードを書くようにしましょう。

以上、なかなかありそうでなさそうで、さてこれが本当にいい方法なのかという疑問は残るものの、手っ取り早く分かりやすく、かつより確実にコンテンツ全体にリンクを設定する方法でした。