CSSだけで画像上の複数リンクをレスポンシブにする方法

webで作ったシステムの取扱説明を作っていて、こんな画像を作ってテキストを添えて説明していました。

f:id:hamochikuwa440:20210322225819p:plain

実は、当初、画像の説明番号にポインタがきたら説明文を出すようにできればと考えたんですが、HTMLの<map>と<area>を使うと、画像の座標をきっちりと決めて設定しないと使えない。なのでウインドウの幅に合わせて画像サイズを変えると、リンクの場所がずれてしまう。座標は％使えないから解決できないと思っていたんです。

まあ、だいたい説明書ってこんな感じだし、読んで分かればいいか…と諦めていたんですが、画像サイズが小さくなるとテキストが読みづらいし、これではweb使う意味が無い気がすると思い、前の記事の応用でなんとかしてみることにしました。

まず、設計イメージです。

f:id:hamochikuwa440:20210323020138p:plain

余計ややこしいでしょうか？

ポイントとしては、

要素①の背景に画像をセットする
要素①の縦横比率を画像に合わせる
要素②以降はposition:absolute

です。これをすることで、リンクとなる要素②、③をstyleでleft、topを親要素に対して％で指定できます。

親要素の画像縦横比が変わらないのであれば、パーセンテージも変わらないので、リンク元要素も画像サイズとともに移動してくれるという仕組みです！

大きさに差が出てくると多少ずれますが、これがなかなか使えます。

今回は、ポインタが番号についたら説明文を出す仕様なので、要素②と要素③をhoverとチルダで関連づけます。
この②と③をまとめてコピーしてパーセンテージを変えていけばリンク元はどんどん増やせるということです。リンクさせるだけならhoverは不要ですから②だけコピーで簡単に増やせます。数の多い地図の都市リンクなどに応用できそうですね。

まとめて下に今回のコードを出しますと

CSS側
/*===要素の縦横比の設定（大定番の方法）====*/
.img_parent{
  position        : relative;
  width           : 100%;
}
/*疑似要素から上をずらして固定*/
.img_parent:before{
  content         : "";
  display         : block;
  padding-top     : 63% /*これが縦比率になります。*/
}
.img_child{
  border-radius   : 2%;
  display         : block;
  position        : absolute;
  top             : 0;
  left            : 0;
  bottom          : 0;
  right           : 0;
}
/*
===要素の縦横比率終わり　ここまでで要素1と思ってください=====

===リンクの配置用ここから====
*/
.img_box1{/*リンク元、先程の図の要素2*/
  position        : absolute;
  background      : transparent;
  display         : block;
}
.b1_hide{/*説明文用、先程の図の要素3*/
  border-radius   : 20%;
  text-align      : left;
  background      : #ffffff;
  border          : 2px solid #CC3300;
  color           : #000000;
  position        : absolute;
  padding         : 5px;
  line-height     : 1em;
  display         : none;
}
.img_box1:hover~.b1_hide{/*ポインタが要素2合った時に要素3を表示*/
  display         : block;
}

HTML側（書き出しは省略）
<--要素1-->
<div class="img_parent">
  <div class="img_child hide" style="background:url(説明用画像.png);
  　　　　background-size:100%;background-repeat:no-repeat;">
<--要素2-->
<--位置調整のため、わざと位置のstyleだけこちら-->
    <div class="img_box1" style="left:30%;top:6%;">
        <img src="番号などの画像.png">
    </div>
<--要素3-->    
    <div class="b1_hide" style="left:30%;top:16%;"> 
       <p>説明文を出す<p> 
    <div>
 <div>
<div>

コードの間抜きをしているので何か足りなかったら申し訳ないです。
ここのポイントは、要素①の背景設定と、要素②、要素③の上、左の位置決めをHTMLでしていることですね。このほうが画像の変更、位置の変更などの調整が楽です。あと、画像の読み込みは、ファイル名のあと、？以降のクエリをPHPで<?php echo date('Ymd-Hi');?>をやっておくとキャッシュも更新できますね。

また、リンク先を増やす時のCSSですが、この方法だと位置決めはHTMLでやっているので、カンマで列記できます。たとえば、４個にした場合、

.img_box1,.img_box2,.img_box3,.img_box4{
  position        : absolute;
  background      : transparent;
  display         : block;
}

.b1_hide,.b2_hide,.b3_hide,.b4_hide{
  border-radius   : 20%;
  text-align      : left;
  background      : #ffffff;
  border          : 2px solid #CC3300;
  color           : #000000;
  position        : absolute;
  padding         : 5px;
  line-height     : 1em;
  display         : none;
}
.img_box1:hover~.b1_hide,.img_box2:hover~.b2_hide,
.img_box3:hover~.b3_hide,.img_box4:hover~.b4_hide{
  display         : block;
}

このようにできます。

そうして作成したページのイメージをGifにしました！最近こっているのでww

これがポインタが番号にのった時に表示するイメージ

f:id:hamochikuwa440:20210323011918g:plain