タイトルと日付（リスト）が一行なサンプル

2007年10月24日（水）
CSSテンプレート, ビジュアル・小技

タイトルと日付のリストが一行なサンプルんのキャプチャどことなく良くありそうなリストのサンプルです。

ちょっと前にこんな感じのデザインのを組んだので、メモがてら色んなバージョンも作ってみました。

sample04辺りが良いかもしれないす。

ul要素のサンプル

Sample 03まではul要素でやってみました。
XHTMLは↓こんな感じ。span要素無くてもいけそうな気もしたけど、めんどｒｙ

<ul class="sample01">
<li>
<a href="#">タイトル</a>
<span>1983年03月24日</span>
</li>
</ul>

Sample 01

positionプロパティ使って色々やってる感じです。

ul.sample01 {
	width: 500px;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #999;
}
ul.sample01 li {
	position: relative;
	margin: 0 0 5px;
	padding: 5px 160px 5px 15px;
	background: url(../img/mark.gif) no-repeat 2px .9em;
	border-bottom: 1px dotted #999;
}
ul.sample01 li a {
	font-weight: bold;
}
ul.sample01 li span {
	display: block;
	position: absolute;
	top: 5px;
	right: 10px;
	width: 180px;
	text-align: right;
}
ul.sample01 li > span {
	right: 0;
}

Sample 02

floatプロパティ使って頑張ってる感じです。

ul.sample02 {
	width: 500px;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #999;
	overflow: hidden;
}
ul.sample02 li {
	float: left;
	padding: 5px 0;
	background: url(../img/mark.gif) no-repeat 2px .9em;
	border-bottom: 1px dotted #999;
}
ul.sample02 li a {
	display: block;
	float: left;
	width: 335px;
	padding-left: 15px;
	font-weight: bold;
}
ul.sample02 li span {
	display: block;
	float: right;
	width: 150px;
	text-align: right;
}

Sample 03

positionプロパティとfloatプロパティどっちも使って、一行クリックできるようにした感じです。
IEではダメですが。。。

ul.sample03 {
	width: 500px;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #999;
	overflow: hidden;
}
ul.sample03 li {
	clear: both;
	float: left;
	padding: 5px 0;
	background: url(../img/mark.gif) no-repeat 2px .9em;
	border-bottom: 1px dotted #999;
}
ul.sample03 li a {
	position: relative;
	display: block;
	float: left;
	width: 335px;
	padding-left: 15px;
	padding-right: 150px;
	font-weight: bold;
}
ul.sample03 li span {
	display: block;
	float: left;
	width: 150px;
	margin-left: -150px;
	text-align: right;
}

定義リスト使ったサンプル

日付とタイトルってば、定義リストがマークアップ的には一番妥当な気がするんで、定義リストでも。

XHTMLは↓こんな感じで。

<dl class="sample04">
<dt>1983年03月24日</dt>
<dd><a href="#">タイトル</a></dd>
</dl>

Sample 04

基本的にはdt要素をfloatプロパティで右にやっただけです。
CSSもあんまり長くないので複雑じゃなくてええかも。
でもタイトルが極端に長いと、日付の下にタイトルが来てしまう。

dl.sample04 {
	width: 500px;
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #999;
	overflow: hidden;
}
dl.sample04 dt {
	float: right;
	margin-left: 10px;
	padding: 5px 0;
}
dl.sample04 dd {
	padding: 5px 0;
	border-bottom: 1px dotted #999;
	padding-left: 15px;
	background: url(../img/mark.gif) no-repeat 2px .9em;
}
dl.sample04 dd a {
	font-weight: bold;
}

Sample 05

最後は、さっきのをタイトルが何行になってもええように。

dl.sample05 {
	width: 500px;
	padding: 10px;
	border: 1px solid #999;
	overflow: hidden;
}
dl.sample05 dt {
	float: right;
	margin-left: 10px;
	padding: 5px 0;
	text-align: right;
}
dl.sample05 dd {
	padding: 5px 150px 5px 0;
	border-bottom: 1px dotted #999;
	padding-left: 15px;
	background: url(../img/mark.gif) no-repeat 2px .9em;
}
dl.sample05 dd a {
	font-weight: bold;
}

注意しておいた方が良いかもしれないこと。

煮るなり焼くなりご自由にお使いください。
ブラウザチェックは、IE6、IE7、Fx2、Opera9、Win Safariのみです。
IE6で若干paddingがおかしいかも。