新着情報の日付とテキストに同一のアンカーをつける方法

|

新着情報やニュースリリースなどのコンテンツは、tableタグやdlタグを利用するのが、一般的です。

ただし、以下のようなレイアウトにしようとすると、tableタグやdlタグではうまく実装できません。

問題は、日付とテキストに同一のアンカーをつけなければならないということです。

tableタグのtd要素やdlタグのdd要素はブロック要素であり、アンカーはインライン要素です。インライン要素であるアンカーの中に、ブロック要素であるtd要素やdd要素を入れることはできません。

そのため、文字の部分のみにアンカーをつけようとすると、tableタグやdlタグを使用するのはふさわしくないということになります。

もうひとつの問題は、テキスト部分が長くなったら、日付の下にテキストが回りこまずに、テキスト部分の頭をそろえないといけないということです。

ひとつの例ですが、以下のような方法があります。

(X)HTMLコード

<div id="information">
   <h2>新着情報</h2>
   <ul">
      <li><a href="index.html"><span>2011/01/20</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/10</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/03</span>新着情報です。</a></li>
      <li><a href="index.html"><span>2011/01/01</span>新着情報です。新着情報です。新着情報です。新着情報です。新着情報です。</a></li>
   </ul>
</div>

CSSコード

#information h2 {
   padding:3px;
   background:#ddd;
}

#information ul {
   margin:0;
   padding:0;
   list-style:none;
}

#information li {
   padding:15px 0 15px 7em;
   text-indent: -7em;
   border-bottom:1px solid #ddd;
}

#information li span {
   display:inline-block;
   width:7em;
   text-indent:0;
}

#information li a {
   text-decoration:none;
   color:#000;
}

#information li a:hover {
   text-decoration:underline;
   color:#AB0404;

}

ポイントとしては、text-indentを駆使することと、spanにwidthを適用するためにdisplayをinline-blockにすることです。

spanは、インライン要素なのですが、インライン要素はwidthやpadding、marginといったものを指定しても有効になりません。そこで、CSSにてdisplayプロパティの値を、文法的にはインラインでありながらも、ブロック要素的な振る舞いもできるinline-blockに変更します。

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事