ぱんぶろ

パンジーの「いいね!」ブログ

divで囲まれた範囲全体をリンクにする小ワザ的な方法。スマホ世代はこっちの方が慣れてそう。

      2016/03/27  

medium_3296511112
photo credit: Wanderungen via photopin cc

divで囲まれた範囲全体をリンクにする方法を紹介します。
いっぱい書いてあるけど、そのコンテンツ自体がリンクになっているってやつですね。
(ちょっとイメージするための説明が難しい。)

ちょっとした小ワザを使います。

とはいっても簡単にできるので、
興味のある方はお試しを!
(CSSのコード紹介は、記事内ですぐに動作を確認できるのがいいですね♪)

スポンサード リンク

モデルとなるdivを書いてみる

まずは、モデルとなるHTMLlとCSSを作っていきましょう。
CSSは埋め込みで書いていきます。

冒頭で言ってた「いっぱい書いてあるけど」の部分です。

【コード】

<div id="test" style="border: 1px solid #aaa; overflow: hidden; margin: 0 10px 10px 0;">
<div id="test-left" style="float: left;">
<img src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150">
</div>
<div id="test-right" style="float: left;">
<p class="test-title" style="font-size: 14px; font-weight: bold;">タイトルタイトルタイトルタイトルタイトル</p>
<p class="test-descr">概要概要概要概要概要概要概要概要概要概要概要概要</p>
</div>
</div>

 

【実際の表示】

div_link_01

タイトルタイトルタイトルタイトルタイトル

概要概要概要概要概要概要概要概要概要概要概要概要

どうですか!
ブログの一覧の1つみたいじゃないですか?

当然ながら、どこにもリンクがありません。
では、このdiv全体(どこを押しても)リンク先へ飛ぶようにします。

divで囲まれた範囲全体をリンクにする方法

まずはダミーのリンクを用意

必要となるのは、ダミーのリンクですね。
ダミーと言っても、実際に飛ぶ先のリンクとなります。
(内容を記載しないのでこの言葉を使ってますが、こういうの何て言うのが正しいんですかね?)

ここでは例として、当ブログのトップページに飛ばすようにします。

コード記載場所は該当のdiv内であればどこでも可です。
今回は、id:testのdiv全体をリンクにしたいので、
その中の適当なところに追加します。
【コード】

<div id="test" border: 1px solid #aaa; overflow: hidden; margin: 0 10px 10px 0;">
<div id="test-left" style="float: left;">
<img src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150">
</div>
<div id="test-right" style="float: left;">
<p class="test-title" style="font-size: 14px; font-weight: bold;">タイトルタイトルタイトルタイトルタイトル</p>
<p class="test-descr">概要概要概要概要概要概要概要概要概要概要概要概要</p>
<a href="//www.panzee.biz/" target="_blank"> </a><!-- ダミーのリンク追加 -->
</div>
</div>

【実際の表示】

div_link_01

タイトルタイトルタイトルタイトルタイトル

概要概要概要概要概要概要概要概要概要概要概要概要

リンクに文字を入れてないので、当然ながら表示に変化はありません。

次にCSSをイジる

次に、CSSをいじっていきます。
使うのはposition属性の「relative」と「absolute」です。

では、まず完成形のコードを見てみましょう。
あとで解説します。
【コード】

<div id="test" style="position: relative; border: 1px solid #aaa; overflow: hidden; margin: 0 10px 10px 0;">
<div id="test-left" style="float: left;">
<img src="//www.panzee.biz/wp-content/uploads/2014/05/div_link_01.png" alt="div_link_01" width="150" height="150">
</div>
<div id="test-right" style="float: left;">
<p class="test-title" style="font-size: 14px; font-weight: bold;">タイトルタイトルタイトルタイトルタイトル</p>
<p class="test-descr">概要概要概要概要概要概要概要概要概要概要概要概要</p>
<a style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" href="//www.panzee.biz/" target="_blank"> </a><!-- ダミーのリンク追加 -->
</div>
</div>

【実際の表示】

div_link_01

タイトルタイトルタイトルタイトルタイトル

概要概要概要概要概要概要概要概要概要概要概要概要

見栄えに何も変化はありませんが、id:testのdiv内をクリックしてみてください!
当ブログのトップ画面に飛ぶことと思います。

コードの解説

解説と言えるほどのものでもないですが、
イメージとしては、
ダミーのリンクの領域が広がっていて、id:testのdivの上に覆いかぶさっている感じですね。

id:testを基準(relative)として、dummy-linkの位置を決めている(absolute)んですが、
「width: 100%」「height: 100%」にすることで、id:testと同じだけ大きくなります。

で、「top: 0」「left: 0」で左上を合わせてあげることで、
id: testの上にdummy-linkが乗っかっている状態になって、

id: testの内容は見えているんだけど、
実はその上を覆っているのはdummy-linkということになるわけです。

(だから、これをすると文字のドラッグとかはできなくなります。)

まとめ

divで囲まれた範囲全体をリンクにする小ワザ的な方法でした。

スマホの(ニュース系の)アプリとか見てると、文字のリンクを意識することなく、
その領域をクリックしてリンクへ飛ぶってアプリがほとんどかと思います。
(androidのlistviewの仕様ですが・・・。)

なんで、スマホからインターネットに触れている世代は、
ボックス的な考え方に慣れているような気がしますが、どうなんでしょう?

今後はスマホ世代のユーザにアプローチした設計にしないとダメなんじゃと思ったり思わなかったり。

せめてスマホのサイト表示だけでもそういう作りにしないとダメなんじゃ(略

・・・スマホの話は置いといたとしても、
覚えておいて損はないであろう、divで囲まれた範囲全体をリンクにする方法でした!