【HTML/CSS】 初心者向け！画像をリンク先に指定する！

はじめに

画像がURLのリンクになっており、さらに画像に文字を重ねるというものを今回実装しました。
制作に際し、なかなか上手く出来ず悩むこともありましたので、自身の備忘録及び今後実装を考えている方の参考になればと思い、投稿させて頂いております。

開発環境

ruby 2.6.3
Rails 5.2.4.4

見本

HTML

流れとしては、以下の３点になります。
① ６個のBOXを囲う大枠のdiv classを作成する。

② ①の中にdiv class="box"を6個作成する。

③ 更に②の中にリンク先と画像に載せる文字を用意する。

index.html.erb

<div class="genre-content">
  <div class="box">
    <%= link_to genres_cake_path do %>
      <p class="genre-name cake">ケーキ</p>
    <% end %>
  </div>
  <div class="box">
    <%= link_to genres_macaron_path do %>
      <p class="genre-name macaron">マカロン</p>
    <% end %>
  </div>
  <div class="box">
    <%= link_to  genres_chocolate_path do %>
      <p class="genre-name chocolate">チョコレート</p>
    <% end %>
  </div>
  <div class="box">
    <%= link_to genres_parfait_path do %>
      <p class="genre-name parfait">パフェ</p>
    <% end %>
  </div>
  <div class="box">
    <%= link_to  genres_cafe_path do %>
      <p class="genre-name cafe">カフェ</p>
    <% end %>
  </div>
  <div class="box">
    <%= link_to genres_shaved_ice_path do %>
      <p class="genre-name ice">かき氷</p>
    <% end %>
  </div>
</div>

● 一塊のdivの内の構成

index.html.erb

<div class="box">
  <%= link_to (リンク先指定) do %>
    <p class="genre-name ice">(画像に載せたい文字)</p>
  <% end %>
</div>

SCSS

今回SCSSで作成しておりますが、CSSでも問題なく作成できます。

homes.scss

.genre-content {
  display: flex;
  flex-wrap: wrap; # 画面幅が小さくなった時に折り返しする
  justify-content: center; # 子要素のboxを中央寄せにする
  margin-bottom: 50px;
}

.box {
  width: 160px;
  height: 160px;
  margin-right: 10px;
}

.box:last-child {
  margin-right: 0px; # 最後のboxの余白を0にしないと、中央寄せが微妙にずれてしまう
}

.genre-name {
  text-align: center; # 左右の中央寄せ
  line-height: 160px; # 上下の中央寄せ
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background-size: cover;
}

.cake {
  background-image: image-url("******.jpg");
}

.macaron {
  background-image: image-url("******.jpg");
}

.chocolate {
  background-image: image-url("******.jpg");
}

.parfait {
  background-image: image-url("******.jpg");
}

.cafe {
  background-image: image-url("******.jpg");
}

.ice {
  background-image: image-url("******.jpg");
}

終わり

今回初めてのHTML、 CSS投稿をさせていただきました。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になればと思います。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。