【HTML&CSS】aタグの中身の文字列を自由に調整する・クリック範囲を広げる

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、aタグの中身の文字列を自由に調整する・クリック範囲を広げる方法について解説していきます。

以前に、aタグのCSSカスタマイズ方法をご紹介しましたが、より簡単な方法を発見したのでご紹介します。

【aタグ CSS】クリック範囲を広げる・下線を消す・文字色を変えない

1 aタグの中でdivタグを使用する
2 プログラミング学習・エンジニア転職関連の情報
3 おすすめ書籍(HTML&CSS編)
4 Twitterやってます！Follow Me！
5 参考・引用
6 最近の投稿

aタグの中でdivタグを使用する

aタグのCSSをカスタマイズする際に、aタグの中で divタグを使用することで、自由にStyleを調整できることに気づきました。

「display: block」を使わなくても、クリック範囲が横幅いっぱいになる！
「color:inherit」を使用せず、文字色を設定できる！

などなどいいことづくめです。

<style>
    .nochage-nolife-io-link {
        /* aタグ特有の下線を消す */
        text-decoration: none;
    }

    .nochage-nolife-io {
        color: white;
        background-color: orange;
        width: 500px;
        margin-top: 100px;
        text-align: center;
    }
</style>

<a class="nochage-nolife-io-link" href="https://masanyon.com/">
    <div class="nochage-nolife-io">『No Change No Life I/O』</div>
</a>