HTMLのリスト(ul)をCSSでサムネイル表示にしたく、エントリーを参考にしつつ実装した。”display:table-cell”を使ったやり方もある？
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>thumbnails</title>
<style type="text/css">
ul.thumbnails_test {
list-style: none;
text-align: center;
width: 300px;
margin-left: 0px;
padding-left: 0px;
background-color: grey; // 確認用
}
.thumbnails_test li {
margin-bottom: 10px;
background-color: red; // 確認用
}
.thumbnails_test a {
width: 100%; // リスト項目の範囲すべてをリンク対象にする
}
.thumbnails_test img {
display: block;
margin: auto; // block要素をセンタリングしてくれる
}
</style>
</head>
<body>
<ul class="thumbnails_test">
<li><a href="http://yamakadoh.net/"><img src="./img200x300.png" alt="sample image"/>link test</a></li>
<li><a href="http://yamakadoh.net/"><img src="./img200x300.png" alt="sample image"/>link test</a></li>
<li><a href="http://yamakadoh.net/"><img src="./img200x300.png" alt="sample image"/>link test</a></li>
<li><a href="http://yamakadoh.net/"><img src="./img200x300.png" alt="sample image"/>link test</a></li>
<li><a href="http://yamakadoh.net/"><img src="./img200x300.png" alt="sample image"/>link test</a></li>
</ul>
</body>
</html>
参考サイト
関連エントリー
