リキッドデザインの画像の一部にリンクを貼りたい

先日、こちらのページより質問させて頂き
ウインドウサイズを変更しても、画像が全部表示される方法を教えて頂きました。

「縦横比は変えずに画像を拡大、縮小して表示したい」
https://teratail.com/questions/45505

この画像の一部分に、別のサイトへのリンクを貼りたくて、下記のコードをためしましたが
ウインドウサイズを拡大、縮小させると、リンクの部分が画像とずれてしまいます
画像を拡大、縮小させても、リンクがずれないようにする方法はないでしょうか？
また、この方法でなくとも、もっとよい方法がありましたら
ご教授お願いいたします。

◎ＨＴＭＬ

<!DOCTYPE HTML>
<HEAD>
<meta http-equiv="Content-Type" "content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="css/modern.css">
<TITLE>TEXT</TITLE>
</HEAD>
<BODY>
  <div>
	<img src="images/img1.png"  usemap="#link1">
	<map name="link1">
		<area shape="rect" coords="412,113,534,135" href="http://リンク先URL" alt="リンク先">
	</map>
  </div>
</BODY>
<HTML>

◎ＣＳＳ

BODY {
    font-family: 'meiryo ui' , 'MS UI Gothic' , 'ＭＳ ゴシック';
	margin:     0;
}
img {
    display:    block;
    max-height: 100vh;
    max-width:  100vw;
    margin:     0 auto;
}

・ウインドウサイズを縮める前

・ウインドウサイズを縮めた後

行動規範の内容に同意します

回答2件

ベストアンサー

map要素を使う理由がわからないのですが、テキストリンクを付けたいのであれば a要素でよいのでは？

画像の幅がわかる場合。

CSS
1img {
2  display: block;
3  max-height: 100vh;
4  max-width: 100vw;
5  margin: 0 auto;
6}
7div {
8  max-width: 350px; /* 画像の幅 */
9  margin: 0 auto;
10}
11body {
12  margin: 0;
13}

HTML
1<img src="https://placehold.jp/24/cc9999/993333/350x250.png" alt="">
2<div><a href="#">テキストリンクです。</a></div>
3```**動くサンプル：**[https://jsfiddle.net/9mjrchcj/1/](https://jsfiddle.net/9mjrchcj/1/)
4
5---
6
7画像の幅がわからない場合。
8```CSS
9img {
10  display: block;
11  max-height: 100vh;
12  max-width: 100vw;
13  margin: 0 auto;
14}
15.wrap {
16  text-align: center;
17}
18.inner {
19  display: inline-block;
20  text-align: left;
21}
22body {
23  margin: 0;
24}

HTML
1<div class="wrap">
2<div class="inner">
3<img src="https://placehold.jp/24/cc9999/993333/350x250.png" alt="">
4<a href="#">テキストリンクです。</a>
5</div>
6</div>
7```**動くサンプル：**[https://jsfiddle.net/9mjrchcj/2/](https://jsfiddle.net/9mjrchcj/2/)
8
9
10---
11
12**追記：**
13
14map要素は相対配置ができないので、上記サンプルのように a要素を相対配置するのが手早いです。（コードはリンク先参照）
15**動くサンプル：**[https://jsfiddle.net/9mjrchcj/4/](https://jsfiddle.net/9mjrchcj/4/)
16
17---
18
19また、JavaScriptのライブラリを使って解決する方法もありますが、map要素で書かれたコンテンツが既に大量にあるのでなければHTMLとCSSで解決できる方法を優先すべきとは思います。
20
21【レスポンシブに対応した画像内リンク (イメージマップ) のやり方 - Qiita】
22[http://qiita.com/AkiraAlex/items/4da92072bfccc84fa6f4](http://qiita.com/AkiraAlex/items/4da92072bfccc84fa6f4)
23
24【レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」 | OZPAの表4】
25[http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/](http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/)

投稿2016/09/12 19:44

編集2016/09/13 05:11

kei344

総合スコア69400

sagume

2016/09/13 02:01

すみません、例として載せた画像がよくなかったです。実際は画像の一部が「ここをクリック」みたいな文字になっていて、そこをクリックすると別ページへ飛びたいのですが、テキストと見せかけて絵の一部なので、リンクがずれてしまうという現象が起きています。画像を入れ替えてみました

kei344

2016/09/13 05:11

追記しました。

sagume

2016/09/15 15:32

返信が遅くなってしまってすみません知識が乏しくて理解するのに時間がかかってしまいました。ご教授頂いた方法で、map要素もjavascriptも使わずに画像内にリンクを設置することができました。他の方も書かれていたように、jsでmap要素をレスポンシブル対応にする事は出来たのですが、ローカル環境では良かったのですが、サーバーに上げたところ jsが無効になってしまったので、このような環境の場合に大変有効でした。ご教授頂いたCSSをHTMLに出てくる順番に並べ直して考えてみたのですが一部わからないところが出てしまったので、度々で恐縮なのですがお教えいただけないでしょうか？・質問その１ .wrap { text-align: center; /* ①インライン要素を中央寄せ */ } このCSSが指定されているdivの中には、ブロック要素であるdivがあり imgはその中にあるのにどうして中央寄せになるのでしょうか？・質問その２ .inner { display: inline-block; /* ②インライン要素のbox作る？ */ /* リンクの背景が指定した大きさになる */ この部分をblockにしてしまうと、せっかく大きさを指定したリンクの背景がウインドウの大きさに従って伸び縮みしてしまう。 inlineにすると、背景が消えてしまう。のはわかったのですが、なぜなのかがわからないこれは何を指定しているのでしょうか？度重ねてすみませんが、お教え頂けるとありがたいです。

kei344

2016/09/15 16:51

改めて説明するのが難しいですが、displayは要素の表示方法を現しています。・inline 　幅と高さを持たない要素。幅や高さは文字列の長さや文字/画像の大きさなど、内容物のサイズ。・block 　高さと幅を持ち、指定が無い場合幅は100%（親要素と同じ幅）になる。・inline-block 　高さと幅を持ちつつ inline の中に並べられる。幅や高さは文字列の長さや文字/画像の大きさなど、内容物のサイズ。厳密ではありませんがこういう感じかなぁ。なので.innerは inline-block になる事で幅がどうなっているかわからないimgにぴったりのサイズになります。（divはデフォルトでblock なので、幅が.wrapと同じになる）。で、その.inner要素を position: relative; で基点に設定、そうすることでposition: absolute;を設定している a要素を「画像の左から50%上から10%」のように指定できるようになります。下記内容は入門者向けかつ記述は古いですが、参考にしてみてください。また、入門書などでしっかりdisplayまわりは押さえたほうがよいと思います。【CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！】 http://taneppa.net/display-inline-block/

sagume

2016/09/16 13:56

重ねてご説明頂きありがとうございました。基本の部分がきちんとわかっていないと困ることが多いなとしみじみ思いました。上記に上げて頂いたサイトも含め、よく読んでみようと思います。あとでメモ書きを追記するかもですが、ここで一旦閉めます。ありがとうございました。

sagume

2016/09/20 12:49

/* css 教えてもらったものをちょっと変更 */ body { margin: 0; } .wrap { text-align: center; } .inner { display: inline-block; position: relative; } img { display: block; max-height: 100vh; max-width: 100vw; margin: 0 auto; } .inner a { display: block; position: absolute; width: 31%; height: 9.5%; top: 45%; left: 34%; background-color:red;　/* リンクの背景に色つける検証用*/ opacity: 0.2; 　　　　　/* 透明度0.2 検証用*/ }

行動規範の内容に同意します

詳しくないですけどjsで対応出来るみたいですよ
http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/

投稿2016/09/12 07:33

hyksm

総合スコア174

sagume

2016/09/12 08:11

ご返信ありがとうございます。上記ＵＲＬを見てみたのですが、「あとはふつうにimg要素にクリッカブルマップを設定するだけ。」の部分がわからないので、すみませんがそちらもご教授頂けるとありがたいです。

hyksm

2016/09/13 08:19

普通にという事なので <img src="images/img1.png" usemap="#link1"> <map name="link1"> <area shape="rect" coords="412,113,534,135" href="http://リンク先URL" alt="リンク先"> </map> このままでいんじゃないですか

sagume

2016/09/15 07:11

返信が遅くなってしまってすみません教えて頂いたあと、色々ためしてみたところ、たしかにその後の部分は普通に設定して出来ました。初心者なので些細な部分でつまずいてしまうことが多くて細かいところまでお聞きしてしまいました。

行動規範の内容に同意します

あなたの回答