1 概要
2 aタグで実装する:内部のテキストをリンク表示する
- 2.1 コード
- 2.2 解説
- 2.3 実行結果
- 2.4 うまく動作しない例 - 入れ子のリンク
3 aタグで実装する:内部のテキストをリンク表示しない
- 3.1 コード
- 3.2 解説
- 3.3 実行結果
- 3.4 うまく動作しない例 - div枠内にテキストリンクがある場合
4 JavaScriptで実装する
- 4.1 コード
- 4.2 解説
- 4.3 実行結果

div枠全体をリンクする

divなどのブロック要素全体をリンクにするコードを紹介します。

概要

divなどのブロック要素をクリックした際に、指定したページに遷移したい場合があります。この記事ではdivなどのブロック要素全体をリンクにするコードを紹介します。

aタグで実装する:内部のテキストをリンク表示する

div枠内のテキストをリンクのスタイルで表示してよい場合は、div枠全体をaタグで囲みます。

コード

以下のCSS,HTMLファイルを作成します。

DivLink.css

.DivLink{
    position:relative;
    width:280px;
    height:96px;
    background-color:#fffbb6;
    border:1px solid #ff6a00;
}

DivLink.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="DivLink.css" />
</head>
<body>
  <a class="Link" href="https://www.ipentec.com">
    <div class="DivLink">
      この枠全体がリンクになります。
    </div>
  </a>
</body>
</html>

解説

div枠でリンクになる枠を作成します。DivLinkクラスには枠の背景色や境界線の色を指定しています。
リンクはAタグで指定しています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。
枠内のテキストに下線が表示され、リンクの表現になっていることが確認できます。

リンクの文字列上にマウスポインタを移動すると、マウスポインタが人差し指の形状になります。

文字列以外の場所でも、マウスポインタの形状は人差し指の形状になります。

クリックすると、aタグのhref属性に記述した遷移先のページに切り替わります。

うまく動作しない例 - 入れ子のリンク

div枠内にリンクがある場合はうまく動作しません。
下記のコードを作成します。

DivLinkNest.css

A:visited {
  color: #0072ff;
  text-decoration: none;
}

A:link {
  color: #0072ff;
  text-decoration: none;
}

A:hover {
  color: #ff6a00;
  text-decoration: underline;
}

A:active {
  color: #ff6a00;
  text-decoration: underline;
}

.DivLink{
    position:relative;
    width:280px;
    height:96px;
    background-color:#fffbb6;
    border:1px solid #ff6a00;
}

DivLinkNest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="DivLinkNest.css" />
</head>
<body>
  <a class="Link" href="https://www.ipentec.com">
    <div class="DivLink">
      この枠全体がリンクになります。<br />
      説明です。<br />
      <a href="https://www.google.co.jp">リンクです</a>
    </div>
  </a>
</body>
</html>

上記のHTMLを表示すると下図の画面が表示されます。

2つのリンクはそれぞれリンク先に遷移できます。

しかし、枠内でリンクの文字列がない余白部分はリンクにならず、クリックしてもリンク先に遷移しません。

aタグで実装する:内部のテキストをリンク表示しない

コード

下記のコードを作成します。

DivLink100p.css

.DivLink{
    position:relative;
    width:280px;
    height:96px;
    background-color:#fffbb6;
    border:1px solid #ff6a00;
}

.DivLink .Link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

DivLink100p.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="DivLink100p.css" />
</head>
<body>
  <div class="DivLink">
  この枠全体がリンクになります。
  <a class ="Link" href="https://www.ipentec.com"></a>
  </div>
</body>
</html>

解説

div枠でリンクになる枠を作成します。DivLinkクラスには枠の背景色や境界線の色を指定しています。
リンクはAタグで指定しています。親のdiv枠でposition: relativeが設定され、内部のAタグのLinkクラスでposition: absolute; とdisplay: block;を指定することで、親のdiv枠の座標が利用されます。top:0 left:0 width:100% height:100% を指定していますので、親のdiv枠の左上座標からdiv枠の幅と高さ全体の大きさとなるリンクを表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。
枠内のテキストはリンクの表現にならずに表示されます。

マウスポインタをdiv枠内部へ移動します。マウスポインタの形状が指の形状に変化し、リンクであることが確認できます。文字列上でも、文字列のない部分でもマウスポインタの形状は変化します。

クリックするとAタグで指定したリンク先のページが表示されます。

うまく動作しない例 - div枠内にテキストリンクがある場合

上記の実装で正しく動作する場合もありますが、div枠内に別の遷移先のリンクがある場合にはうまく動作しません。

DivLinkDoNotWork.css

A:visited {
    color: #0072ff;
    text-decoration: none;
}
A:link {
    color: #0072ff;
    text-decoration: none;
}
A:hover{
    color:#ff6a00;
    text-decoration:underline;
}
A:active {
    color: #ff6a00;
    text-decoration: underline;
}

.DivLink {
    position:relative;
    width: 280px;
    height: 96px;
    background-color: #fffbb6;
    border: 1px solid #ff6a00;
}

.DivLink .Link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

DivLinkDoNotWork.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="DivLinkDoNotWork.css" />
</head>
<body>
  <div class="DivLink">
    この枠全体がリンクになります。<br />
    説明です。<br />
    <a class="Link" href="https://www.ipentec.com"></a>
    <a href="https://www.google.co.jp">リンクです</a>
  </div>

  <hr />
  <a href="https://www.google.co.jp">Div枠の外のリンクです</a>

</body>
</html>

先のコードと同様ですが、div枠内と枠の外にテキストリンクを配置しています。
上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。

div枠の外にあるテキストリンク上ににマウスポインタを移動します。スタイルシートの設定に従って、リンクのスタイルが変更されます。

リンクをクリックするとテキストリンクのAタグに指定したURLに遷移します。

マウスポインタをdiv枠内に移動すると、マウスポインタの形状が指の形状に変わります。クリックするとリンク先に遷移します。

一方div枠内のテキストリンクの上にマウスポインタを移動してもリンクのスタイルは変化しません。
テキストリンクをクリックしてもテキストリンクのAタグに設定したURLには遷移せず、divタグ全体に設定したリンク先に遷移してしまいます。

JavaScriptで実装する

先に紹介したAタグの実装では、div枠内にテキストリンクがある場合に意図したとおりの動作にならない場合があります。div枠内のテキストリンクも正しく動作するようにするためにはJavaScriptで実装します。

コード

DivLinkJS.css

A:visited {
    color: #0072ff;
    text-decoration: none;
}
A:link {
    color: #0072ff;
    text-decoration: none;
}
A:hover{
    color:#ff6a00;
    text-decoration:underline;
}
A:active {
    color: #ff6a00;
    text-decoration: underline;
}

.DivLink {
    position: relative;
    cursor: pointer;
    width: 280px;
    height: 96px;
    background-color: #fffbb6;
    border: 1px solid #ff6a00;
}

DivLinkJS.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="DivLinkJS.css" />
  <script type="text/javascript">
    function DivFrameClick() {
      document.location.href = "https://www.ipentec.com";
    }
  </script>
</head>
<body>
  <div class="DivLink" onclick="DivFrameClick();">
    この枠全体がリンクになります。<br />
    説明です。<br />
    <a href="https://www.google.co.jp">リンクです</a>
  </div>

  <hr />
  <a href="https://www.google.co.jp">Div枠の外のリンクです</a>

</body>
</html>