OfficeExcelゲームゲームのお話ホームウェブ制作HTML・CSS【CSS】aタグのクリックできる領域を親要素いっぱいに広げる方法2019年6月1日SHAREツイートシェアはてブLINEPocketwebサイトを作っているときに、最初はテキスト部分だけがリンクとして機能するように作ってたが、途中でボックス全体をクリックできるようにしたくなったという時ありませんか?デザインや仕様をしっかり組んでから作るから「そんなことねーよ!」と思う方もいるかもしれませんが、インブラウザデザイン(直接コードを書いてデザインを進める方法)で進めている場合は、上記のようなことが起こるかもしれません。いうことで今回は「aタグのクリックできる領域を親要素いっぱいに広げる方法」をご紹介いたします。領域を広げるのにpositionプロパティを使っていきます。コードを見ていきましょう。HTML今回は「box」と言う名前のdiv要素が親要素になります。このboxいっぱいにリンクを広げていくため、aタグはboxの子要素となるように配置します。href=""></a></div>CSS親要素のboxクラスにposition:relative。リンクとなるaタグにposition:absoluteを指定します。親要素に重なるようにtop/leftを0にし、全体を覆うために幅・高さを100%にします。*/}完成これでaタグが親要素いっぱいになっていると思います。実際に上記コードを利用したサンプルを作ってみたので、ぜひ確認してみてください。コメントをキャンセルメールアドレスが公開されることはありません。【jQuery】開閉ボタンの表示・非表示で中身の文字を切り替え...ヒロキWebデザイナーしています。