可変背景画像+テキスト

目的

• 右上に画像を置き、テキストの行数が増える度に画像も下へ伸びていく装飾にしたい。
• テキストが終わったら画像も終わるようにしたい。ただし画像には僅かに下の余白を付ける。

実行結果

解説

• 「テキストだけでは味気ないが、画像を入れると主張が強すぎるので、さりげなく挿絵のように入れたい」という時にオススメです。
• テキストの最終行に合わせて画像が途中で切れるようになっています。ただしテキストの方が長い場合、画像は全表示になります。
• 画像が途中で切れる場合は、鋭く着ると不自然になるのでボカしながら切っています。

HTML

<div class="layout_7_2">
	<div></div>
	<div>人里離れた森の奥、高くそびえる木々の隙間から柔らかな陽光が差し込み、生い茂る葉を鮮やかな黄金色に染め上げています。足元を流れる小川の澄んだせせらぎは、遠くで響く鳥のさえずりと溶け合い、心地よい調べとなって静かな森に響き渡ります。微風が吹くたびに草木が優しく揺れ、生命力あふれる香りが鼻腔をくすぐります。その香りは日々の忙しさを忘れさせ、凝り固まった心をそっと解きほぐしてくれるかのようです。肌をなでる涼やかな空気を感じながら、大自然の息吹に包まれるこの一瞬は、何物にも代えがたい安らぎの時間を与えてくれます。</div>
</div>

• 2行目の空白のdivは挿絵を入れるための構文です。

CSS

.layout_7_2 {
	display: grid;
	width: 96%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	box-sizing: border-box;
	overflow: hidden;
}

.layout_7_2 > div:nth-child(1) {
	background-image: url(../../image/layout/7-2.png);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 100% auto;
	grid-area: stack;
	justify-self: end;
	width: 40%;
	height: calc(100% + 20px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	z-index: 0;
}

.layout_7_2 > div:nth-child(2) {
	font-size: 16px;
	line-height: 1.8;
	grid-area: stack;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	position: relative;
	z-index: 1;
}

• 画像を左上に置く場合は22行目をjustify-self: start;にします。
• 画像の大きさは23行目で変えられます。