マンガでわかるホームページ作成

aタグの中にdivは可能【注意点も説明】

「クリック範囲を大きくするためにaタグの中にdivを入れたいんだけどインライン要素であるaタグの中にブロック要素であるdivって入れちゃダメなんだっけ?」

この記事ではaタグの中にdivを入れてもいいのか、について解説します。

結論:aタグの中にdivを入れることは可能

結論から言うとaタグの中にdivタグを入れることは可能です。

divタグどころかpタグやhタグもaタグの中にいれることができます。

これは無理やりなのではなく、html5から可能になった正式なものです。

これによりクリック範囲を大きくすることができます。

aタグの中にdivを入れる例

aタグにdivやhタグ、pタグを入れる例を作ってみました。

aタグをカードのようにして、その中に画像やタイトル、説明を入れるという作りはよくあるものです。

写真タイトル

写真の説明写真の説明写真の説明写真の説明写真の説明

<style>
a.cardsample{
    display: block;
    width: 200px;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 10px;
    background: #eaedf4;
    color: #333;
    text-decoration: none;
}
.cardsample div{
    background: #FFF;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.cardsample h3{
    margin: 10px 0;
    text-align: center;
}
.cardsample p{
    font-size: 85%;
    line-height: 1.25;
    margin: 0;
    padding: 0;
}
</style>
<a href="#" class="cardsample">
    <div>
        <img src="https://csshtml.work/wp-content/uploads/1.jpg">
    </div>
    <h3>写真タイトル</h3>
    <p>写真の説明写真の説明写真の説明写真の説明写真の説明</p>
</a>

従来のやり方だと、画像、タイトル、説明それぞれにaタグでリンクを設定する必要があります。面倒でくどいだけでなくアクセシビリティ上もよくありません。

aタグを一回にすることで無駄なく、かつ利用しやすいインターフェイスにもできます。

注意点1:aタグをブロック要素にしよう

aタグ内にdivを入れる場合、aタグをインライン要素のままでも利用できますが、思ったようにデザインできなかったり崩れのもとになります。

下記はaタグ内にdivを入れた上でaタグがインラインのままCSSを指定した例ですが明らかにおかしな表示になっています。

divの中
divの中

<style>
a.example{
    border: 1px solid #333;
    padding: 10px;
}
a.example div{
    border: 1px solid red;
}
</style>
<a href="#" class="example"><div>divの中<br>divの中</div></a>

aタグに「display:block」を指定しブロック要素にすることで思った通りのデザインにすることができます。

divの中
divの中
<style>
a.example2{
    /*コレ*/display: block;
    border: 1px solid #333;
    padding: 10px;
}
a.example2 div{
    border: 1px solid red;
}
</style>
<a href="#" class="example2"><div>divの中<br>divの中</div></a>

なお「display:block」に限らず、flexやinline-blockでも大丈夫です。

注意点2:CMSによってはaタグ内にdivやpなどのブロック要素があると崩される

CMS内でhtmlソースを直接編集し、aタグ内にdivタグを入れた場合、CMSによっては崩されることがあります。

これはhtmlを整理する機能が働いているためですが、html5に対応していないものと思われます。

こんなときは無理にdivを入れるのではなく、spanタグを入れましょう。

そしてこのspanタグを「display:block」でブロック要素にしてしまえば、機能上はdivと同じになります。

まとめ

aタグの中にdivを入れることは可能です。

その際aタグをブロック要素にしましょう。

CMSによってはaタグの中にdivを入れられないのでspanタグを入れてブロック要素にしましょう。

以上、aタグの中にdivを入れることは可能【注意点も説明】でした。

関連記事