画像付きの新着情報

目的

画像付きのニューステンプレートが欲しい。
高さ(height)を固定し、ニュース数が増えたらスクロールが出来るようにしたい。

実行結果

2026/03/21(土) 森の奥に差し込む柔らかな光が、木々の葉を黄金色に染める。小川のせせらぎと鳥のさえずりが調和し、静かな時間が流れる。風に揺れる草の香りが心を落ち着け、自然の息吹を感じさせる一瞬。

2026/03/19(木) 湯気の立つカップから、香ばしいコーヒーの香りが漂う。ゆっくりと口に含むと、深いコクとほのかな甘みが広がり、心が静かにほぐれていく。朝の静かな時間や読書の合間に寄り添う、日常の小さな贅沢を感じさせる一瞬。

2026/03/10(火) 静かな部屋でページをめくるたび、物語がゆっくりと心に広がる。時間を忘れされてくれる、読書の穏やかなひととき。

解説

画像付きなので内容を想像しやすい利点があります。画像が不要ならテキストのみのニューステンプレートをお使いください。

HTML

<div class="structure_3_2">
	<div>
		<div><img src="../../image/sample-1.jpg" alt="サンプル画像①"></div>
		<div>
			<span>2026/03/21(土)</span>
			<span>森の奥に差し込む柔らかな光が、木々の葉を黄金色に染める。小川のせせらぎと鳥のさえずりが調和し、静かな時間が流れる。風に揺れる草の香りが心を落ち着け、自然の息吹を感じさせる一瞬。</span>
		</div>
	</div>
	<div>
		<div><img src="../../image/sample-2.jpg" alt="サンプル画像②"></div>
		<div>
			<span>2026/03/19(木)</span>
			<span>湯気の立つカップから、香ばしいコーヒーの香りが漂う。ゆっくりと口に含むと、深いコクとほのかな甘みが広がり、心が静かにほぐれていく。朝の静かな時間や読書の合間に寄り添う、日常の小さな贅沢を感じさせる一瞬。</span>
		</div>
	</div>
	<div>
		<div><img src="../../image/sample-3.jpg" alt="サンプル画像③"></div>
		<div>
			<span>2026/03/10(火)</span>
			<span>静かな部屋でページをめくるたび、物語がゆっくりと心に広がる。時間を忘れされてくれる、読書の穏やかなひととき。</span>
		</div>
	</div>
</div>

CSS

.structure_3_2 {
	width: 96%;
	height: 146px;
	margin-top: 12px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	overflow: auto;
}

.structure_3_2 > div {
	display: flex;
	align-items: flex-start;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border-bottom: dotted 1px #333333;
}

.structure_3_2 > div > div:nth-child(1) {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	width: 110px;
}

.structure_3_2 > div > div:nth-child(1) > img {
	width: 100%;
}

.structure_3_2 > div > div:nth-child(2) {
	flex: 1;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
}

.structure_3_2 > div > div:nth-child(2) > span:nth-child(1) {
	font-size: 14px;
	font-weight: bold;
	display: block;
}

.structure_3_2 > div > div:nth-child(2) > span:nth-child(2) {
	font-size: 14px;
	line-height: 1.7;
	display: block;
}

高さを変える場合は3行目のheightの値を変えてください。内容がheight内に収まらない場合は自動でスクロールバーが出ます。

.structure_3_2 {
	width: 96%;
	height: 190px;
	margin-top: 12px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	overflow: auto;
}

.structure_3_2 > div {
	display: flex;
	align-items: flex-start;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border-bottom: dotted 1px #333333;
}

.structure_3_2 > div > div:nth-child(1) {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	width: 36%;
}

.structure_3_2 > div > div:nth-child(1) > img {
	width: 100%;
}

.structure_3_2 > div > div:nth-child(2) {
	flex: 1;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
}

.structure_3_2 > div > div:nth-child(2) > span:nth-child(1) {
	font-size: 14px;
	font-weight: bold;
	display: block;
}

.structure_3_2 > div > div:nth-child(2) > span:nth-child(2) {
	font-size: 14px;
	line-height: 1.7;
	display: block;
}

高さを変える場合は3行目のheightの値を変えてください。内容がheight内に収まらない場合は自動でスクロールバーが出ます。

シンプル(テキスト+画像)

目的

実行結果

解説

HTML

CSS