• このエントリーをはてなブックマークに追加

通販サイトなどでよく見かける、商品の売上やピックアップランキングをレイアウトするHTML+CSSのコードスニペット

5つのランキングと商品名

リンク付きの商品サムネイルと商品名をリストで並べる方法。

HTML

<div class="ranking">
    <ul>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-01.jpg" alt=""></span><span class="item-name">商品名1</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-02.jpg" alt=""></span><span class="item-name">商品名2</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-03.jpg" alt=""></span><span class="item-name">商品名3</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-04.jpg" alt=""></span><span class="item-name">商品名4</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-05.jpg" alt=""></span><span class="item-name">商品名5</span></a></li>
    </ul>
</div>

CSS

.ranking ul{
	display: flex;
	width: 100%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li{
	width: 18%;
	margin: 0 1%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li a{
	display: block;
}
.ranking ul li a .thumb{
	display: block;
	padding: 0 0 1em;
}
.ranking ul li a .item-name{
	display: block;
}

5つのランキングと商品名・価格

リンク付きの商品サムネイルと商品名、そして価格をリストで並べる方法。

商品名は下線がついてもいいが、価格は下線がつくと鬱陶しい時は、<a>タグより外に出すか、下記の通り、text-decorationで<a>自体のスタイルをオフにしておくことが良いのかも。

HTML

<div class="ranking">
    <ul>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-01.jpg" alt=""></span><span class="item-name">商品名1</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-02.jpg" alt=""></span><span class="item-name">商品名2</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-03.jpg" alt=""></span><span class="item-name">商品名3</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-04.jpg" alt=""></span><span class="item-name">商品名4</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-05.jpg" alt=""></span><span class="item-name">商品名5</span><span class="item-price">,000(税込)</span></a></li>
    </ul>
</div>

CSS

.ranking ul{
	display: flex;
	width: 100%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li{
	width: 18%;
	margin: 0 1%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li a{
	display: block;
	text-decoration: none;
}
.ranking ul li a .thumb{
	display: block;
	padding: 0 0 1em;
}
.ranking ul li a .item-name{
	display: block;
}
.ranking ul li a .item-price{
	display: block;
	color: #f00;
}

5つのランキングと商品名・価格

リンク付きの商品サムネイルと商品名、そして価格をリストで並べる方法。

商品名は下線がついてもいいが、価格は下線がつくと鬱陶しい時は、<a>タグより外に出すか、下記の通り、text-decorationで<a>自体のスタイルをオフにしておくことが良いのかも。

HTML

<div class="ranking">
    <ul>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-01.jpg" alt=""></span><span class="item-name">商品名1</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-02.jpg" alt=""></span><span class="item-name">商品名2</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-03.jpg" alt=""></span><span class="item-name">商品名3</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-04.jpg" alt=""></span><span class="item-name">商品名4</span><span class="item-price">,000(税込)</span></a></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-05.jpg" alt=""></span><span class="item-name">商品名5</span><span class="item-price">,000(税込)</span></a></li>
    </ul>
</div>

CSS

.ranking ul{
	display: flex;
	width: 100%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li{
	display: flex;
	width: 18%;
	margin: 0 1%;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li a{
	display: block;
	text-decoration: none;
}
.ranking ul li a .thumb{
	display: block;
	padding: 0 0 10px;
}
.ranking ul li a .item-name{
	display: block;
}
.ranking ul li a .item-price{
	display: block;
	color: #f00;
}

3つのランキングと商品名・価格:両端揃え

justify-content: space-between;を使って、両端揃えする方法。

デメリットは、4つ目以降をこのままの<li>の幅で追加すると、4つ目は左に表示されてまだ大丈夫だが、5つ目は真ん中に表示されず右側に表示されてしまう。

3つ・6つ・9つと数が決まっているならばこれでOK。

HTML

<div class="ranking">
    <ul>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-01.jpg" alt=""></span><span class="item-name">商品名1</span></a><span class="item-price">,000(税込)</span></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-02.jpg" alt=""></span><span class="item-name">商品名2</span></a><span class="item-price">,000(税込)</span></li>
        <li><a href="#"><span class="thumb"><img src="images/thumb-rank-03.jpg" alt=""></span><span class="item-name">商品名3</span></a><span class="item-price">,000(税込)</span></li>
    </ul>
</div>

CSS

.ranking ul{
	display: flex;
	width: 800px;
	justify-content: space-between;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li{
	width: 250px;

	list-style: none;
	margin: 0;
	padding: 0;
}
.ranking ul li a{
	display: block;
}
.ranking ul li a .thumb{
	display: block;
	padding: 0 0 10px;
}
.ranking ul li a .item-name{
	display: block;
	color: #f00;
}
.ranking ul li .item-price{
	display: block;
}