LINE2018.09.25スポンサーリンクこの記事では、「aタグで作ったリンクのクリック範囲を、親要素と同じサイズに広げたい」とお困りの方に、解決方法を紹介しています。スポンサーリンク目次デフォルトではどのように表示されるか?解決方法まとめデフォルトではどのように表示されるか?例えばliタグとaタグを使ってリンクのリストを作った場合、標準だと次のようになります。CodePen.背景色が緑になっている部分がリンクの範囲です。このままだとリンクのクリック範囲がバラバラのため、操作性がよくありません。block”を設定することです。することで、親要素と同じ範囲までaタグを広げることができます。aタグは元々「インライン要素」として定義されています。そのため、aタグで囲んだ部分しかリンクの範囲にはなりません。block”を指定することで、ブロックボックスとして描画するよう、ブラウザに指示できます。インライン要素インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。CodePen.先ほどとは違い、背景色がliタグと同じ範囲まで広がるようになりました。まとめliタグとaタグを使ってナビゲーションメニューを作るとき等、リンクの範囲を親要素と同じにしたいケースは、たびたび発生します。そんなときに、今回紹介した方法が役立てば幸いです。Constructor関連記事Firebase【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】この記事ではFirebaseを使うメリットについて紹介します。Firebaseでどのくらい簡単にWebアプリを公開できるかの一例として、Vue.jsで作ったアプリをFirebaseのHostingで公開する手順について解説します。Code】この記事では、フリーで使えるエディタの中でも、おすすめのエディタを紹介しています。エディタを選ぶときの4つのポイントを解説していますので、エディタ選びに悩んでいる方は参考にしてみてください。プログラミングをするときに必須となるエ...HTML&CSSたった4行のCSSでフッターを画面の最下部(一番下)に表示する方法【flexbox】この記事では、フッターを画面の最下部(一番下)に固定して表示する方法を紹介します。「フッターが画面の最下部に表示できず、困っている」という方は、以降で紹介している方法を試してみてください。今回はFlexboxを使って、要素を上下や左右に中央揃えする方法を紹介します。flex"を設定する必要があります。調整したい位置によって"display:...HTML&CSS【HTML】画像の上に画像やアイコン、文字を重ねて表示する方法【CSS】この記事では、「画像の上にアイコンや文字、画像を重ねて表示する方法」を紹介します。次の画像をご覧ください。この画像では、右下に「いいね」ボタンを表示しています。CSSやJavaScriptを使ってHTMLのDOMを修飾したり取得・操作したりする際、セレクタを指定することになります。セレクタはHTMLのタグであったり、id属性やclass属性だったりと様々な種類があります。Vue.jsを使って開発したりしてます。Constructor.お問い合わせプライバシーポリシ。