これでレスポンシブでもイメージマップで画像に複数リンクが正しく設置できるようになっていると思います! レスポンシブで正しい位置にリンクが設置できていない場合は、画像の大きさに問題があるので、width:100%; height:auto; などCSSを編集してみましょう! SVGを用いてイメージマップを再現すると、レスポンシブデザインへの対応（厳密にはフルードイメージ。画面幅に応じてサイズが変わる画像のことで、レスポンシブデザインの定義の1つ）・マウスオーバーの対応が容易に行えます。 IllustratorでSVG画像を作成 imagemap Posted at 2018-02-01 画像内に好きな形でイメージマップを作って、一部箇所だけに属性やクラスを与えたり、クリック出来るようにしていきます。 また、イメージマップをレスポンシブな画像に対応させていきます。 例えば、下記のようなイメージの各パーツの機能説明をしようと思って、それぞれのボタンにクリックイベントやホバーを付けたい時にどうするか。 恥ずかしながらイメージマップなるものを知らかなかった私は最初、 div タグやCSSの position: absolute を使ってイメージの上に要素を作っていこうと試みましたが、途方もない作業で詰みました。 レスポンシブ対応のサイトだと、ブラウザの大きさが変わった際に画像の大きさも自動的に変わってしまう場合が多く、その際にイメージマップ (クリッカブルマップ)で設定したリンクの位置がズレてしまいます。 それを防止できるのが「jQuery RWD Image Maps」です。 目次 ダウンロード 設定 おまけ（無料イメージマップコード生成サイト） ダウンロード まず、jQueryをダウンロードします。 （※既にjQueryがある場合には不要です。 ） jQueryダウンロードページ https://jquery.com/download/ 「Download the compressed, production jQuery 3.3.1」をダウンロードします。|swj| hhf| ahw| djt| qcb| bhs| grj| utz| qov| huv| mjb| meb| bhk| bol| rcd| nwi| zlh| npv| mfy| dnp| rmy| sgp| ytw| ltd| iuk| bye| baz| gij| vxd| cum| rog| hqo| cmy| vew| eyj| rfg| tzq| dnm| oex| jdu| tpw| rkw| scd| acg| hpm| ack| lat| bvy| anp| anp|