画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。
ポイントは画像と言ってもリストマークではなく純粋に img タグで読み込んだ画像がリストに含まれているという所です。これを CSS で実現しようとするといくつかの方法がありますが、あまりソースがゴチャゴチャすると可読性も悪くなるのでやはりなるべくシンプルに作りたいものです。
そこで、なるべくシンプルな構造でこの画像つきリストを作ってみたので紹介します。
html部分
<ul> <li><img src="画像1"><p>タイトル1</p></li> <li><img src="画像2"><p>タイトル2</p></li> <li><img src="画像3"><p>タイトル3</p></li> </ul>
html 部分はごくシンプルにリストの中に画像とタイトルを内包しているだけです。
ul li{
width:200px;
border-bottom:1px solid #aaa;
margin:3px 0px 3px 0px;
}
ul li img{
float:left;
margin-right:8px;
}
ul li p{
padding:15px 0px 15px 0px;
}
実際にお使いいただくにはあなたの作成しているサイトに合わせて微調整が必要になると思いますが CSS もこれだけです。
まず、リストの幅は任意の幅にしてください。そして li には下線と上下の余白を設定しています。続いて li 内の画像には float:left で画像とタイトルが横並びになるようにしています。最後に p ではタイトル部の上下の余白を調整しています。
他の方法としては dl dt dd タグを用いる定義リストを使う方法がありますが、タグが3つもある為ソースがゴチャゴチャして見難くなります。ul li を用いたリストのほうがシンプルに構成できます。
サイト作りの参考になれば幸いです。