はじめに
画像がURLのリンクになっており、さらに画像に文字を重ねるというものを今回実装しました。
制作に際し、なかなか上手く出来ず悩むこともありましたので、自身の備忘録及び今後実装を考えている方の参考になればと思い、投稿させて頂いております。
見本
HTML
流れとしては、以下の３点になります。
① ６個のBOXを囲う大枠のdiv classを作成する。
② ①の中にdiv class="box"を6個作成する。
③ 更に②の中にリンク先と画像に載せる文字を用意する。
index.html.erb
<divclass="genre-content"><divclass="box"><%=link_togenres_cake_pathdo%><pclass="genre-name cake">ケーキ</p><%end%></div><divclass="box"><%=link_togenres_macaron_pathdo%><pclass="genre-name macaron">マカロン</p><%end%></div><divclass="box"><%=link_togenres_chocolate_pathdo%><pclass="genre-name chocolate">チョコレート</p><%end%></div><divclass="box"><%=link_togenres_parfait_pathdo%><pclass="genre-name parfait">パフェ</p><%end%></div><divclass="box"><%=link_togenres_cafe_pathdo%><pclass="genre-name cafe">カフェ</p><%end%></div><divclass="box"><%=link_togenres_shaved_ice_pathdo%><pclass="genre-name ice">かき氷</p><%end%></div></div>● 一塊のdivの内の構成
index.html.erb
<divclass="box"><%=link_to(リンク先指定)do%><pclass="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投稿をさせていただきました。
私自身もプログラミング初心者ですが、同じ様な立場の方に少しでも参考になればと思います。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。