回答編集履歴
1
前提条件が変わったため追記。
test
CHANGED
|
@@ -107,3 +107,39 @@
|
|
|
107
107
|
</div>
|
|
108
108
|
|
|
109
109
|
```**動くサンプル：**[https://jsfiddle.net/9mjrchcj/2/](https://jsfiddle.net/9mjrchcj/2/)
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
**追記：**
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
map要素は相対配置ができないので、上記サンプルのように a要素を相対配置するのが手早いです。（コードはリンク先参照）
|
|
124
|
+
|
|
125
|
+
**動くサンプル：**[https://jsfiddle.net/9mjrchcj/4/](https://jsfiddle.net/9mjrchcj/4/)
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
また、JavaScriptのライブラリを使って解決する方法もありますが、map要素で書かれたコンテンツが既に大量にあるのでなければHTMLとCSSで解決できる方法を優先すべきとは思います。
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
【レスポンシブに対応した画像内リンク (イメージマップ) のやり方 - Qiita】
|
|
138
|
+
|
|
139
|
+
[http://qiita.com/AkiraAlex/items/4da92072bfccc84fa6f4](http://qiita.com/AkiraAlex/items/4da92072bfccc84fa6f4)
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
【レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」 | OZPAの表4】
|
|
144
|
+
|
|
145
|
+
[http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/](http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/)
|