プログラミング備忘録 foo

上段1枚＋下段2枚(帯あり)

目的

  • 上段に1枚、下段に2枚の画像メニューが欲しい。
  • 下段の2枚は均等横並び。
  • 帯を付けて遷移先の内容を要約した文言を入れたい。

実行結果

サンプル画像①
サンプル画像② サンプル画像③

解説

  • 上段にメインメニュー、下段にサブメニューを置きたい時にオススメです。
  • 親要素の横幅を変えれば全てが自動で可変します(後述のHTML･CSSで解説)。

HTML

<div class="layout_5_2">
	<div><a href="#"><img src="../../image/sample-1-b.jpg" alt="サンプル画像①" /></a></div>
	<div>
		<a href="#"><img src="../../image/sample-2.jpg" alt="サンプル画像②" /></a>
		<a href="#"><img src="../../image/sample-3.jpg" alt="サンプル画像③" /></a>
	</div>
</div>
  • 下段にaタグを3つ置けば3つとも自動で均等横並びになります。追加分は帯が無いのでCSSで追記が必要です(後述)。

CSS

.layout_5_2 {
	width: 80%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.layout_5_2 a {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.layout_5_2 a:hover{
	opacity: 0.8;
}

.layout_5_2 a::after {
	font-size: 14px;
	background-color: rgba(0, 64, 0, 0.8);
	color: #FFFFFF;
	text-align: center;
	width: 100%;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 8px;
	padding-left: 0px;
	position: absolute;
	bottom: 10%;
	left: 0;
}

.layout_5_2 img {
	display: block;
	width: 100%;
}

.layout_5_2 div:nth-child(1) {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.layout_5_2 div:nth-child(1) a {
	aspect-ratio: 16/6;
}

.layout_5_2 div:nth-child(1) a::after {
    content: "自然豊かな森の恵み";
}

.layout_5_2 div:nth-child(2) {
	display: flex;
	gap: 10px;
}

.layout_5_2 div:nth-child(2) a {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	aspect-ratio: 3/2;
}

.layout_5_2 div:nth-child(2) a:nth-child(1)::after {
    content: "コーヒーの芳醇な香り";
}

.layout_5_2 div:nth-child(2) a:nth-child(2)::after {
    content: "読書でリラックスタイム";
}
  • 全体の横幅を変える場合は2行目の値を変えてください。その他の要素も自動で可変されます。
  • 上段の画像の縦横比を計算し、その値を48行目に入れてください。画像の縦横比と、CSSの縦横比を同じにしないと適切に表示がされません。
  • 下段の画像の縦横比を計算し、その値を64行目に入れてください。画像の縦横比と、CSSの縦横比を同じにしないと適切に表示がされません。また、下段の各画像は縦横比を揃える必要があります。この構文では64行目で3対2に指定しているので、下段に2枚の画像を使う場合は1枚目W300×H200、2枚目W480×H320(どちらも3対2)のように、サイズが異なっていても縦横比が同じならOKです。
  • 帯をopacityで透過させると文言も透過してしまうので、22行目でrgbaによる背景色の指定をしています。目的の色がある場合はGoogleで「カラーピッカー」と検索して色を指定し、RGBの3つの値を取得してください。4つ目に0.8など透過度を指定すればOKです。
  • 帯の文言が長いと改行され、帯が太くなってしまいます。文字数にお気を付けください。
  • 帯を個別に削除するならa:nth-child()::afterの構文ごと削除すればOKです。下段に追加する場合はHTMLを追加した後にa:nth-child(4)を作れば帯が追加されます。
.layout_5_2 {
	width: 80%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.layout_5_2 a {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.layout_5_2 a:hover{
	opacity: 0.8;
}

.layout_5_2 a::after {
	font-size: 10px;
	background-color: rgba(0, 64, 0, 0.8);
	color: #FFFFFF;
	text-align: center;
	width: 100%;
	padding-top: 2%;
	padding-right: 0%;
	padding-bottom: 2%;
	padding-left: 0%;
	position: absolute;
	bottom: 10%;
	left: 0;
}

.layout_5_2 img {
	display: block;
	width: 100%;
}

.layout_5_2 div:nth-child(1) {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

.layout_5_2 div:nth-child(1) a {
	aspect-ratio: 16/6;
}

.layout_5_2 div:nth-child(1) a::after {
    content: "自然豊かな森の恵み";
}

.layout_5_2 div:nth-child(2) {
	display: flex;
	gap: 10px;
}

.layout_5_2 div:nth-child(2) a {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	aspect-ratio: 3/2;
}

.layout_5_2 div:nth-child(2) a:nth-child(1)::after {
    content: "コーヒーの芳醇な香り";
}

.layout_5_2 div:nth-child(2) a:nth-child(2)::after {
    content: "読書でリラックスタイム";
}
  • スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。