質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • HTML

    11803questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5247questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2685questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,392

sagume

score 14

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

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

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

◎HTML

<!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>


◎CSS

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


・ウインドウサイズを縮める前
イメージ説明
・ウインドウサイズを縮めた後
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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


画像の幅がわかる場合。

img {
  display: block;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
}
div {
  max-width: 350px; /* 画像の幅 */
  margin: 0 auto;
}
body {
  margin: 0;
}
<img src="https://placehold.jp/24/cc9999/993333/350x250.png" alt="">
<div><a href="#">テキストリンクです。</a></div>

動くサンプル:https://jsfiddle.net/9mjrchcj/1/


画像の幅がわからない場合。

img {
  display: block;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0 auto;
}
.wrap {
  text-align: center;
}
.inner {
  display: inline-block;
  text-align: left;
}
body {
  margin: 0;
}
<div class="wrap">
<div class="inner">
<img src="https://placehold.jp/24/cc9999/993333/350x250.png" alt="">
<a href="#">テキストリンクです。</a>
</div>
</div>

動くサンプル:https://jsfiddle.net/9mjrchcj/2/


追記:

map要素は相対配置ができないので、上記サンプルのように a要素を相対配置するのが手早いです。(コードはリンク先参照)
動くサンプル:https://jsfiddle.net/9mjrchcj/4/


また、JavaScriptのライブラリを使って解決する方法もありますが、map要素で書かれたコンテンツが既に大量にあるのでなければHTMLとCSSで解決できる方法を優先すべきとは思います。

【レスポンシブに対応した画像内リンク (イメージマップ) のやり方 - Qiita】
http://qiita.com/AkiraAlex/items/4da92072bfccc84fa6f4

【レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」 | OZPAの表4】
http://ozpa-h4.com/2015/10/29/jquery-rwd-image-maps/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/13 11:01

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

    キャンセル

  • 2016/09/13 14:11

    追記しました。

    キャンセル

  • 2016/09/16 00:32

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

    度重ねてすみませんが、お教え頂けるとありがたいです。

    キャンセル

  • 2016/09/16 01: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/

    キャンセル

  • 2016/09/16 22:56

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

    キャンセル

  • 2016/09/20 21: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 検証用*/
    }

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/12 17:11

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

    キャンセル

  • 2016/09/13 17:19

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

    キャンセル

  • 2016/09/15 16:11

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

    キャンセル

同じタグがついた質問を見る

  • HTML

    11803questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7728questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5247questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2685questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。