画像の一部にリンクバナーを張る
画像の一部にリンクバナーを張る
box0(背景)の上に box0,box1 を配置して、そのboxの中に要素を配置する。
box0,box1 は、行の関係で上下の関係は変化させないという考え方。
box0,box1 それぞれの内要素は、margin float(右寄せ左寄せ)などで、上下左右位置を決めることができる。
もちろん、ピクセル単位での固定は不可能。なぜならレスポンシブに対応できなくなるから。
レスポンシブを意識した場合、画像のサイズは、背景の幅との割合で指定しておかないと、リサイズができなくなるので注意が必要。
※レスポンシブで表示させる画像は、できれば width:n%; を指定しておくと多くの場合リサイズしてくれる。
<img src=”http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png” style=”width:30%;”>
<div class="box0"> <div class="box1"> <div id="btnimg0"> <a href="http://www.google.co.jp/" target="_blank"> <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" /> </a> </div> </div> <div class="box2"> <div id="btnimg1"> <a href="http://www.google.co.jp/" target="_blank"> <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" /> </a> </div> <div id="btnimg2"> <a href="http://www.google.co.jp/" target="_blank"> <img src="http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png" onmouseover="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnr.png';" onmouseout="this.src='http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/btnb.png'" border="0" /> </a> </div> </div> </div> <style> .box0{ display: block; margin: 0 auto 10px; max-width: 577px; height: 438px; background-color:#fff; border: 5px solid #1978d8; border-radius: 10px; background: url('http://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2016/04/Fotolia_36208288_M.jpg') top right no-repeat; background-size: cover; } .box1::after, .box2::after { content:""; display: block; clear: both; } .box2{ margin:90px 20px; } #btnimg0{ width:50%; } #btnimg1{ float:left; width:50%; } #btnimg2{ float:left; width:50%; } </style>
スポンサーリンク