【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法

RELEASE / 2024.8.21 UPDATE / 2024.08.19

aタグの中でaタグを使用

css

HTML

入れ子

aタグは他のページへ遷移させる為に使う専用のタグです。
そしてこのaタグの中でaタグを入れたい状況というのは結構あるんですよね。
しかし、単純にaタグの中でaタグを使うとブラウザが勝手にタグ構造を書き換えてしまい、思ったようなことが出来ません。
そんな時は、ちょっとコーディング方法を工夫することで実装することが出来ます。
この記事ではaタグの中でaタグを使いたい状況の時に実際に使いたいコーディング方法をご紹介したいと思います。

この記事の目次を表示

1 普通にコーディングしてみる
2 aタグの中で別のaタグを使いたい時
- 2.1 【方法1】position:absoluteを使う
- 2.2 【方法2】objectタグを使う
3 まとめ

普通にコーディングしてみる

まずは何も考えず普通にaタグの中でaタグを使ったコーディングを見てみましょう。

用意するHTMLはこちら。

<div class="item">
    <a href="#">
        <figure class="item__image"><img src="https://irodori-design-web.com/blog_image/3422/3422-1.jpg"></figure>
        <div class="item__category"><a href="#">カテゴリ1</a></div>
        <p class="item__title">【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法</p>
    </a>
</div>

このHTMLにCSSで簡単にレイアウトを反映した実装サンプルはこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

検証モードでソースを確認してみると以下のようになっていることがわかります。

<div class="item">
    <a href="#">
        <figure class="item__image"><img src="https://irodori-design-web.com/blog_image/3422/3422-1.jpg"></figure>
    </a>
    <div class="item__category">
        <a href="#"></a>
        <a href="#">カテゴリ1</a>
    </div>
    <p class="item__title">【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法</p>
</div>

全体を囲っているはずのaタグが勝手に書き換えられて、タイトル部分がaタグの範囲外になってしまっています。
そのため、リンクが設定されている個所は画像部分とカテゴリ部分のみでタイトル部分はリンク設定から外れてしまっています。

そして、謎のaタグがひとつ生成されてしまうせいでCSSの指定もおかしくなってしまいます。

aタグの中で別のaタグを使いたい時

【方法1】position:absoluteを使う

aタグの中で別のaタグを使いたい時に最適な書き方がこちらの方法です。

まずは実際のHTMLを見てみましょう。

<div class="item">
    <a href="#"></a>
    <figure class="item__image"><img src="https://irodori-design-web.com/blog_image/3422/3422-1.jpg"></figure>
    <div class="item__category"><a href="#">カテゴリ1</a></div>
    <p class="item__title">【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法</p>
</div>

そして、CSSはこのようにします。
コメントアウトで「/* 追加する部分 */」となっている個所がポイントです。

/* 追加する部分 */
.item {
    position: relative;
}
.item > a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.item__category a {
    position: relative;
    z-index: 2;
}
/* 追加する部分 */

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
a {
    color: #000;
    text-decoration: none;
}
.item {
    width: 300px;
}
.item > a {
    display: block;
}
.item__image {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
}
.item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.item__category a {
    border: 1px solid;
    margin-bottom: 10px;
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    font-size: 80%;
}
.item__category a:hover {
    color: #fff;
    background: #000;
}
.item__title {
    font-weight: 700;
}

これを反映した実際のサンプルはこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

先ほどのサンプルとは違い、タイトル部分まで正しくリンク設定されるようになりましたね。
全体を囲うaタグにposition:absoluteを設定し、横幅と高さを100%にするのことでclass="item"全体がリンクとしてクリック出来るようになります。

カテゴリ部分は別のaタグでリンクとしてクリック出来るようにするため、position:relativeとz-index:2を設定しています。

これにより、全体リンクの上に配置され、カテゴリ部分のリンクも有効になります。

【方法2】objectタグを使う

もうひとつの方法としてobjectタグを使う方法があります。

HTMLは以下のようにします。

<div class="item">
    <a href="#">
        <figure class="item__image"><img src="https://irodori-design-web.com/blog_image/3422/3422-1.jpg"></figure>
        <object class="item__category"><a href="#">カテゴリ1</a></object>
        <p class="item__title">【HTML／CSS】aタグの中でaタグを使いたい時のコーディング方法</p>
    </a>
</div>

一番最初の例でdivタグが使われていたclass="item__category"の部分をobjectタグに変更します。

これだけでaタグの中でaタグを使うことが出来るようになります。

実はaタグの中でaタグを使うにはこの方法だけだと思います。
でも、先ほどの【方法1】の時、「aタグの中で別のaタグを使いたい時に最適な書き方がこちらの方法です。」と【方法1】が最適とご紹介しました。

objectタグを使う方が確実にaタグの中でaタグを使うことが出来るのに最適でないのかというと、objectタグは本来、「外部リソースを埋め込む際に使用するタグ」とされています。

そのため、HTMLの意味を考慮すると「この部分でobjectタグの使用は適切ではない」となります。

ただ、HTMLの構造を変更することなく、objectタグに書き換えるだけなので、それらのリスクを理解したうえで使用する分には問題ないと思います。