枠全体をクリック可能な縦幅可変のリンクを並べる

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

枠全体をクリック可能な縦幅可変のリンクを並べる対応を、アンカーのposition設定、inline-boxで実施する。

「記事のタイトル・画像・内容の一部を●●文字まで表示するリンクを作成して欲しい、もちろん枠全体をクリック可能で！」
上記のような要望がユーザーからされることが良くあります。調べてみると、個々の問題については対応方法があったりしますが、毎回調べるのも…ということで、全部対応したサンプルを作成してみました。

目次

今回の対応について、2つに分けて解説します。

• アンカーをdivタグ全体に広げる
• 縦幅可変の枠を並べる

アンカーをdivタグ全体に広げる

下記対応で実施可能です。
css

      div.box {
    position: relative;
  }
  div.box a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }

html

      <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <p>テキスト</p>
    </div>
  </div>

「position: absolute」は絶対位置指定。親以外の要素から縁を切り、絶対的な位置に配置します。上記例では親要素の左上端から縦横100%分を範囲として表示しています。
また、親にしたいボックスに「position：static」以外のposition指定（上記例ではrelative）をします。指定をしない場合、親が「ブラウザウィンドウ」になるため、注意です。
　

縦幅可変の枠を並べる

要素の左上からの並び替えはfloat:leftを使用することが多いですが、縦幅が異なる要素を並べた場合に崩れが発生する可能性があります。
そのため、今回はdisplay: inline-blockで実施します。
css

      div.box-inner {
    width: 610px;
    letter-spacing: -.40em;
    background: #EEEEEE;
    padding: 3px 0px 0px 0px;
    border: 1px solid #333333;
  }
  div.box {
    display: -moz-inline-box;/* firefox */
    display: inline-block;
    /display: inline;/* ie */
    /zoom: 1;/* ie */
    vertical-align: top;
    letter-spacing: normal;
    width: 276px;
    background: #f2f9fe;
    border: 1px solid #35559d;
    overflow: hidden;
    font-size: 12px;
    padding: 10px;
    margin: 2px;
    position: relative;
  }

html

    <div class="box-inner">
  <div class="box">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああ</p>
    </div>
  </div>
  ...
</div>

対象の要素にdisplay: inline-blockを追加するだけです。
あとは行ごとに上寄せをするvertical-align: top;、inline-blockを使用した際に発生するスペースを除去するletter-spacing: -.40em; / letter-spacing: normal;を追加して表示を整えます。
　
以上が「枠全体をクリック可能な縦幅可変のリンクを並べる」対応になります。
　

サンプル：

css

      div.box-inner {
    width: 610px;
    background: #EEEEEE;
    padding: 3px 0px 0px 0px;
    border: 1px solid #333333;
    letter-spacing: -.40em;
  }

  div.box {
    display: -moz-inline-box;
    display: inline-block;
    /display: inline;
    /zoom: 1;
    vertical-align: top;
    letter-spacing: normal;
    width: 276px;
    background: #f2f9fe;
    border: 1px solid #35559d;
    overflow: hidden;
    font-size: 12px;
    padding: 10px;
    margin: 2px;
    position: relative;
  }

  div.box a {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-indent:-999px;
  }

  .box a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
  }

  .box img {
    float: left;
  }

  .box div.text {
    float: right;
    width: 160px;
  }

html

<div class="box-inner">
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
  <div class="box">
    <a href="hospital-base.html"></a>
    <img src="./sample.jpg" alt="">
    <div class="text">
      <h4>テキスト</h4>
      <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
  </div>
</div>

　
表示例：