リンクを全体に広げる方法【CSS】

css HTML/CSS

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスエンジニアとして活動しています。

今回は、aタグのリンクを全体に及ぼすためのcssについて解説していきます〜

この記事は以下のような人向けです。

リンクを要素全体に広げたいんだけど、どうしたらいい?

では、参りましょう〜。

スポンサーリンク

 元になるHTML

まず、今回リンクを全体に広げたいパーツのHTMLがこちらです。

CSSで装飾すると、こんな感じです。

See the Pen NmJNpX by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

スタイルは綺麗ではないですが、こんな感じのパーツになります。

今は、リンクが全然効いていませんが、赤文字部分(<a class=”” href=”#”></a>)のリンク部分を<div class=”recipe_box”></div>全体に広げるのが、今回の目標です。

トマトとマッシュルームとパプリカの料理

レシピを見る

 追加するCSS

リンクを全体に広げるために加えるCSSは以下の2つです。

  1. 親要素をrelativeにする
  2. aタグの要素をabsoluteにして、大きさ等を調整する

親要素の追加CSS

aタグの追加CSS

これだけで完了です。

codepenで見るとこんな感じ。

See the Pen bJZpxM by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.

完成形はこちらです。(親要素に「opacity: 0.5;」を追加しています。)

 

トマトとマッシュルームとパプリカの料理

レシピを見る

簡単だね!

 まとめ

以上、リンクを全体に広げる方法の紹介でした〜。

簡単に実装できますね!

現場で意外と使える場面が多々あるので、参考にしてみてください〜。

以上でなっちる先生の授業を終わります〜。

素敵なプログラミングライフを!

スポンサーリンク
HTML/CSS
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました