webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
リンクのクリック範囲を親要素(DIV)全体に広げる/リンクの中に別リンクを置く【HTML・CSS】 eyecatch画像

リンクのクリック範囲を親要素(DIV)全体に広げる/リンクの中に別リンクを置く【HTML・CSS】

rss


 


リンク(<a>タグ)範囲を親要素(DIV)全体に広げるCSS方法

スマートフォンサイトの制作で気をつけるポイントに、タップのしやすさがあります。
リンクをタップする範囲が狭すぎると、タップしにくくなりユーザーのストレスにつながります。
PCデスクトップサイトでも、クリック範囲が広いほうがクリックミスがなくなったり、エフェクトをかけるために広いリンク範囲を取る必要があったりで、
「リンク(<a>タグ)クリック範囲を親ブロック要素全体に広げるCSS」方法は何かと使う方法です。
 

リンクのクリック範囲を親まで広げる画像


 

サンプルDEMO

説明用sampleイメージ

<DIV>の中に画像や<P>などの中身

オレンジ枠(DIV)内どこでもクリックしてみてください。
(ページ内ジャンプにしています)

クリック  リンク
 

 

 

HTML・CSS

下記は基本の【HTML】と【CSS】のSETです。
<a>タグのリンククリック範囲が、親要素の<div>タグ全体に広がります。
 

HTML

<div class="hoge">
    <!-- 何か中身 -->
    <a href="test.html"></a> <!-- このリンククリック範囲が親<div>まで広がる -->
</div>
 

CSS

.hoge {
    position: relative;
    z-index: 1; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.hoge a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}

これだけです。
親要素は<div>でなくとも、<ul><li>等、ブロック要素で使える方法です。
(Float要素の場合等で、リンクがクリックできない・マウスホバー時にちらつくなどの場合は「z-index」で回避します。)


もし「 ホバー時の透過エフェクトをプラスする」場合は、下記などを加えます。

.hoge:hover {
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

 







 

リンク(<a>タグ)範囲を親要素(DIV)全体に広げたリンク範囲内に、更に別リンクを配置するCSS方法

上記の「リンク(<a>タグ)クリック範囲を親ブロック要素全体に広げるCSS」コードに加え、
その親要素のリンク範囲内に、「 更に別リンクがある」場合のCSSです。
 

サンプルDEMO

※サンプル例として、「全体リンク」クリックの際と「別リンク」クリックの際で、リンク先を変えていますのでクリックしてみてください。

説明用sampleイメージ

<DIV>の中に何か中身

グリーン枠内クリック & ブルーのボタンをクリックしてみてください。
リンク先が異なります。
(ページ内ジャンプ)


 別リンク1 別リンク2 クリック  リンク
  

HTML・CSS

下記は基本の【HTML】と【CSS】のSETです。
 

HTML

<div class="hoge">
    <!-- 何か中身 -->
    <a class="inlink" href="other1.html">別リンク1</a>
    <a class="inlink" href="other2.html">別リンク2</a>
    <a href="test.html"></a> <!-- このリンククリック範囲が親<div>まで広がる -->
</div>
 

CSS

「z-index」で、重なったリンク要素レイヤー順序を指定します。(「position」指定も一緒に必要です。)

​.hoge {
    position: relative;
    z-index: 1; /* リンク要素の重なりのベース順序指定 */
}
.hoge a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; /* リンク要素の重なりのベース順序指定 */
}
.hoge a.inlink {
    position: relative; /*「別リンク」は普通に配置するため */
    z-index: 3; /* リンク要素の重なり順を上にするため */
}
​


以上です。






 
ページの先頭へ

rss
1件目 (1件中)