新着情報　サムネイル付

パーツ設置費用

5,000円

CSS

.news__list h2 {
	margin-bottom: 0;
}
.news__list dl {
	height: 280px;
	overflow-y: scroll;
}
.news__list dt, .news__list dd {
	box-sizing: border-box;
}
.news__list dt {
	float: left;
	height: 100px;
	width: 100px;
}
.news__list dt img {
	onject-fit: cover;
	height: 100%;
	width: 100%;
}
.news__list dd {
	border-bottom: solid 1px #ccc;
	margin-bottom: 20px;
	padding-bottom: 20px;
	padding-left: 130px;
	min-height: 120px;
}
.news__list dd p.date {
	font-weight: 600;
	margin-bottom: 5px;
}
.news__list dd p.date span {
	background-color: #b3b3b3;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	margin-right: 20px;
	padding: 0 8px 1px;
}
.news__list dd p.text {
	font-size: 14px;
	line-height: 1.8;
}
@media screen and (max-width: 800px) {
	.news__list dl {
		height: 280px;
	}
	.news__list dt {
		height: 100px;
		width: 100px;
	}
	.news__list dd {
		margin-bottom: 20px;
		padding-bottom: 20px;
		padding-left: 130px;
		min-height: 120px;
	}
	.news__list dd p.date {
		margin-bottom: 5px;
	}
	.news__list dd p.date span {
		font-size: 13px;
		margin-right: 20px;
		padding: 0 8px 1px;
	}
	.news__list dd p.date {
		font-size: 14px;
	}
	.news__list dd p.text {
		font-size: 14px;
	}
}

HTML

<section class="news__list">
	<h2>新着情報</h2>
	<dl>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
		<dt><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></dt>
		<dd><p class="date"><span class="newUp">NEW</span>0000.00.00</p>
		<p class="text">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと<br>
		てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p></dd>
	</dl>
</section>