【CSS】新着情報一覧のスタイルシート設定

新着情報を一覧させる場合の、スタイルシートの設定をメモしておきます。

デザインのポイント

• 一行で日付＋タイトルを表示
• 一行毎に下線を引く
• タイトルが複数行になった場合も、タイトルの頭を揃える

HTMLソース

<ul class="newsList">
	<li><a href="#"><span class="date">2014年02月13日</span>ここにタイトルが入ります。</a></li>
	<li><a href="#"><span class="date">2014年02月01日</span>ここにタイトルが入ります。</a></li>
	<li><a href="#"><span class="date">2014年01月11日</span>ここにタイトルが入ります。</a></li>
</ul>

スタイルシートの設定

ul.newsList li { 
	border-bottom: 1px dotted #ccc;
	}
	
ul.newsList li a { 
	display: block; 
	position: relative; 
	padding: 13px 0 13px 9em;
	}
	
ul.newsList li a:hover { 
	background-color: #EDF6FF;
	}
	
ul.newsList li a span.date { 
	display: block; 
	position: absolute; 
	top: 16px; 
	left: 0; 
	width: 9em; 
	color: #333; 
	}

aタグをblock要素にしてクリックできる範囲を拡げ、
日付をspanで囲み、block要素にしてposition:absoluteで位置を指定しています。

aタグにpadding-leftで日付分の余白を空けることで、
タイトルの頭が二行になっても揃うようにしています。

今回は日付をposition:absoluteで設定しましたが、
float:leftで指定し、タイトルもspanで囲んでmargin-leftで
日付分の余白を空ける方法もしたりしていますが、
他の設定との関係で、position:absoluteの方が良いかもと現在は思っています。

他の設定との関係についてはまたの機会にメモしておきたいと思います。

余談

「日付＋タイトル」をどのように表示させるかは、
「dlでdt=日付、dd=タイトルで設定」派と、
「ulのliの中にspan等で日付、タイトルを設定」派で大きく２つに分かれる印象があります。

ちなみに、私はulで設定する方が多いです。
理由の一つは、下線等の設定がしやすいからだったりします。