自分で組み立てるテンプレート

list-auto1

一定間隔でサムネイルが横スライドするタイプのスライドショーです。

<h2>list-auto1-parts</h2>
<ul class="mb30">
<li>画像ブロックの総数は、「最低4セット」以上の「偶数」にして下さい。</li>
<li>801px以上で4列、800px以下だと2列になります。</li>
<li>スライドの速度はjsコードの冒頭で変更できます。</li>
<li>リンクが不要なら、html側からaタグを削除して下さい。</li>
</ul>

<div>
<a href="#">
<img src="images/1s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

<div>
<a href="#">
<img src="images/2s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

<div>
<a href="#">
<img src="images/3s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

<div>
<a href="#">
<img src="images/1s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

<div>
<a href="#">
<img src="images/2s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

<div>
<a href="#">
<img src="images/3s.jpg" alt="">
<h4>タイトルをここに入れます</h4>
<p>説明をここに書きます。サンプルテキスト。</p>
</a>
</div>

</div>

</div>

</section>

html

/*サムネイルの横スライドショー
---------------------------------------------------------------------------*/
.list-auto1-parts * {margin: 0;padding: 0;}
.list-auto1-parts a {text-decoration: none;}

/*スライドショー全体を囲むブロック*/
.list-auto1-parts {
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保です。*/
	position: relative;
	line-height: 1.5;	/*行間をデフォルトより狭く*/
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.list-auto1-parts .img-parts > div {
	flex: 0 0 23%;			/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 23%;			/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;			/*上下、左右へのマージン*/
	padding: 1rem;			/*ボックス内の余白*/
	background: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);		/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	
	/*2列配置に変更する*/
	.list-auto1-parts .img-parts > div {
		flex: 0 0 48%;
		max-width: 48%;
	}

}/*追加指定ここまで*/

/*画像たちを囲むブロック*/
.list-auto1-parts .img-parts {
	display: flex;
}

/*画像*/
.list-auto1-parts .img-parts img {
	width: 100%;
}

/*h4見出し*/
.list-auto1-parts h4 {
	margin-bottom: 0.2rem;	/*下に0.2文字分スペースを空ける*/
}

/*段落タグ(p)*/
.list-auto1-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.list-auto1-parts .slide-indicators-parts {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.list-auto1-parts .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

/*アクティブボタン色*/
.list-auto1-parts .indicator.active {
	background: var(--primary-color);	/*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}

/*bg1-primary-partsの上でのアクティブボタン色*/
.bg1-primary-parts .list-auto1-parts .indicator.active {
	background: var(--primary-inverse-color);	/*アクティブ時のボタン色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-accent-partsの上でのアクティブボタン色*/
.bg1-accent-parts .list-auto1-parts .indicator.active {
	background: var(--accent-inverse-color);	/*アクティブ時のボタン色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

css

//===============================================================
// サムネイルの横スライドショー（複数設置対応）
//===============================================================
$(function() {

var slideDuration = 1000;      // アニメーション時間（ミリ秒）
	var autoSlideInterval = 3000;  // 自動スライドの間隔（ミリ秒）

//----------------------------
	// スライダー1個を初期化
	//----------------------------
	function initOneSlider($slider) {

var imagesPerView, slideBy;
		var isAnimating = false;
		var currentImageIndex = 0;
		var pendingIndex = null;	// アニメ中クリックの「予約」

var $imgParts = $slider.find('.img-parts');
		var $indicatorsArea = $slider.find('.slide-indicators-parts');

// 既存タイマー停止（このスライダーだけ）
		stopAutoSlide();

// 既存のクローンとインジケータ削除（このスライダーだけ）
		$imgParts.find('.clone').remove();
		$indicatorsArea.empty();

// クローン削除後に元要素を取り直す
		var $divs = $imgParts.children('div').not('.clone');
		var totalImages = $divs.length;

// 画像が1個以下なら何もしない
		if (totalImages <= 1) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

var windowWidth = $(window).width();

if (windowWidth >= 801) {
			imagesPerView = 4;
			slideBy = 2;
		} else {
			imagesPerView = 2;
			slideBy = 1;
		}

// 表示枚数以下ならスライド不要（インジケータも作らない）
		if (totalImages <= imagesPerView) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

// 無限ループ用クローン追加
		$divs.clone().addClass('clone').appendTo($imgParts);

// インジケータ生成
		var totalSlides = Math.ceil(totalImages / slideBy);
		for (var i = 0; i < totalSlides; i++) {
			$indicatorsArea.append('<span class="indicator" data-index="' + (i * slideBy) + '"></span>');
		}
		var $indicatorItems = $indicatorsArea.find('.indicator');

function updateIndicators() {
			var activeIndex = Math.floor(currentImageIndex / slideBy) % totalSlides;
			$indicatorItems.removeClass('active');
			$indicatorItems.eq(activeIndex).addClass('active');
		}

function slideTo(index) {

// アニメ中は動かさない（クリックは予約で処理）
			if (isAnimating) return;

isAnimating = true;
			currentImageIndex = index;

$imgParts.css({
				'transition': 'transform ' + (slideDuration / 1000) + 's ease',
				'transform': 'translateX(' + (-currentImageIndex * (100 / imagesPerView)) + '%)'
			});

updateIndicators();

setTimeout(function() {

// ループ処理
				if (currentImageIndex >= totalImages) {

$imgParts.css('transition', 'none');
					$imgParts.css('transform', 'translateX(0)');

currentImageIndex = 0;
					updateIndicators();

// 再描画を強制
					$imgParts[0].offsetHeight;

$imgParts.css('transition', 'transform ' + (slideDuration / 1000) + 's ease');
				}

isAnimating = false;

// ★アニメ中にクリックされた予約があれば、ここで実行
				if (pendingIndex !== null) {
					var next = pendingIndex;
					pendingIndex = null;

slideTo(next);

// 自動再生を再開（startは内部で必ずstopするので多重にならない）
					startAutoSlide();
				}

}, slideDuration);
		}

function startAutoSlide() {

// ★速度が上がる原因（タイマー多重）を根本的に潰す
			stopAutoSlide();

var interval = setInterval(function() {
				slideTo(currentImageIndex + slideBy);
			}, autoSlideInterval);

$slider.data('interval', interval);
		}

function stopAutoSlide() {
			var interval = $slider.data('interval');
			if (interval) {
				clearInterval(interval);
				$slider.removeData('interval');
			}
		}

// 初期位置
		$imgParts.css({
			'transition': 'none',
			'transform': 'translateX(0)'
		});
		updateIndicators();

// 自動再生開始
		startAutoSlide();

// hover停止（この機能のイベントだけ外せるように名前空間）
		$slider.off('.auto1')
			.on('mouseenter.auto1', function() {
				stopAutoSlide();
			})
			.on('mouseleave.auto1', function() {
				startAutoSlide();
			});

// インジケータクリック
		$indicatorItems.off('.auto1').on('click.auto1', function() {

var index = $(this).data('index');

// まず止める（多重タイマー予防）
			stopAutoSlide();

// アニメ中なら「予約」して終わり（終わった瞬間に実行される）
			if (isAnimating) {
				pendingIndex = index;
				return;
			}

slideTo(index);
			startAutoSlide();

});

}

//----------------------------
	// 全スライダーを初期化
	//----------------------------
	function initAllSliders() {
		$('.list-auto1-parts').each(function() {
			initOneSlider($(this));
		});
	}

// 初期化
	initAllSliders();

// リサイズで再初期化
	var resizeTimer;
	$(window).off('.auto1resize').on('resize.auto1resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			initAllSliders();
		}, 250);
	});

});

js

list-before-after1

アイコン画像をダウンロードし、
imagesに入れて下さい。Before After向けのパーツです。青色のAfter色は直接変更するか、cssの:rootのテーマカラーを変更して下さい。

<p class="c"><a href="https://template-party.com/parts-new/list/list-before-after1/icon.zip">アイコン画像をダウンロード</a>し、<br>
imagesフォルダ内に入れてからプレビューして下さい。</p>

<h2 class="c">list-before-after1</h2>

</section>

<h2 class="c mb3rem">こんなお悩みありませんか？</h2>

<div class="list-parts inview">
<figure><img src="images/icon1.png" alt=""></figure>
<h4>デザインが古くて、<span class="marker">他社と比べて見劣り</span>している…</h4>
<p>サイト制作からもう15年。自分で見ていてもさすがに古さを実感するようになった。サイトが古い事でかえってマイナスイメージなのでは。</p>
</div>

<div class="list-parts inview">
<figure><img src="images/icon2.png" alt=""></figure>
<h4><span class="marker">予算内</span>で、どこまで実現できるのか不安…</h4>
<p>予算が限られているのでサイト制作をしてくれる業者が見つかるか不安。最初だけ安く提示されて後で高額請求などもよく聞くし…。</p>
</div>

<div class="list-parts inview">
<figure><img src="images/icon3.png" alt=""></figure>
<h4>売上につながる<span class="marker">サイト運営のアドバイス</span>が欲しい…</h4>
<p>リニューアルするだけじゃなく、その後のステップアップのサポートもしてくれるような業者を見つけたい。</p>
</div>

</div>

</section>

<h2 class="c mb3rem">全てサンプルカンパニーが解決します！</h2>

<div class="list-parts inview">
<figure><img src="images/icon1.png" alt=""></figure>
<h4><span class="marker">最新トレンドで差をつける</span></h4>
<p>1000件以上の制作実績を持つクリエイターが、貴社の強みと最新デザインを組み合わせた、競合と差別化できるWEBサイトをご提案します。</p>
</div>

<div class="list-parts inview">
<figure><img src="images/icon2.png" alt=""></figure>
<h4><span class="marker">安心の定額制プラン</span></h4>
<p>必要な機能と優先順位を明確化し、段階的な開発計画をご提案。見積項目を詳細に明示し、追加費用の心配がない定額制で対応します。</p>
</div>

<div class="list-parts inview">
<figure><img src="images/icon3.png" alt=""></figure>
<h4><span class="marker">成果を生み出す伴走支援</span></h4>
<p>制作後もアクセス解析とユーザー行動の調査結果をもとに、具体的な改善施策をご提案。月次レポートで成長をサポートします。</p>
</div>

</div>

</section>

html

/*list-before-after1-parts（before → after）
---------------------------------------------------------------------------*/
.list-before-after1-parts * {margin: 0;padding: 0;}

/*before, afterブロック共通*/
.before-parts, .after-parts {
	--space-y: 5vw;	/*before, afterの各ボックスの上下にとる余白。画面幅100% = 100vwです。*/
	--arrow-h: 5vw;	/*before下部の矢印の高さ。大きくすれば矢印の角度も大きくなります。お好みで。*/
}

/*beforeブロック*/
.before-parts {
	background: #333;	/*背景色。*/
	color: #ccc;		/*文字色*/
	padding-top: var(--space-y);
	padding-bottom: calc(var(--space-y) + var(--arrow-h));
}

/*afterブロック*/
.after-parts {
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます・*/
	padding-top: calc(var(--space-y) + var(--arrow-h));
	padding-bottom: var(--space-y);
	margin-top: calc((-1 * var(--content-space-l)) - var(--arrow-h));
}

/*ボックス全体*/
.list-before-after1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 2vw;			/*ボックス同士の間に空けるスペース。画面幅100% = 100vw*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

/*ボックス１個あたり*/
.list-before-after1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	line-height: 1.5;	/*行間を狭く*/
}
/*beforeのボックス１個あたり*/
.before-parts .list-before-after1-parts .list-parts {
	background: #000;	/*背景色*/
	color: #ccc;	/*文字色*/
}
/*afterのボックス１個あたり*/
.after-parts .list-before-after1-parts .list-parts {
	background: #fff;	/*背景色*/
	color: #333;	/*文字色*/
}

/*ボックス内のh4見出し*/
.list-before-after1-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
	font-size: 1.2rem;		/*文字サイズ120%*/
}

/*説明だけ小さめにする*/
.list-before-after1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ90%*/
}

/*ボックス内の画像*/
.list-before-after1-parts .list-parts figure {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	aspect-ratio: 1 / 1;	/*正方形*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: #fff;		/*背景色。透過画像を使った場合に、透過部分にこの色が出ます。*/
}
.list-before-after1-parts .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*beforeのボックス内の画像*/
.before-parts .list-before-after1-parts .list-parts figure img {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
}

/*beforeの色がついたテキスト ＆ afterのマーカー
---------------------------------------------------------------------------*/
/*beforeブロックの赤い文字色*/
.before-parts .marker {
	color: #ff0000;
}

/*afterブロックの下線の黄色いマーカー*/
.after-parts .marker {
	background: linear-gradient(transparent 70%, yellow 70%);
}

/*ボックス下部の三角形（▼）三角形の角度は上の
---------------------------------------------------------------------------*/
.arrow {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--arrow-h)),
		50% 100%,
		0 calc(100% - var(--arrow-h))
	);
}

css

list-circle1

円形の3カラムレイアウト。mainの幅が900px未満で2列に。

<h2 class="c">list-circle1-parts</h2>
<p class="c">3列レイアウト。mainの幅が900px未満で2列に。</p>

<h3 class="c">画像のアスペクト比そのまま</h3>
<p class="c">3列レイアウト。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">使い分けは簡単で、外側のブロックの<br>
「list-circle1-parts」を「list-circle1-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list-circle1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-circle1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-circle1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-circle1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list-circle1-parts { grid-template-columns: repeat(2, minmax(0, 1fr));	}
		}
	}

/*ボックス１個あたり*/
.list-circle1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-circle1-parts .list-parts figure {
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
}

/*テキストボックス*/
.list-circle1-parts .list-parts .text-parts {
	flex: 1;
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-circle1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-circle1-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-circle1-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

css

list-circle1-auto

円形のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2 class="c">list-circle1-auto-parts</h2>
<p class="c">各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<h3 class="c">画像のアスペクト比そのまま</h3>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">使い分けは簡単で、外側のブロックの<br>
「list-circle1-auto-parts」を「list-circle1-auto-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list-circle1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-circle1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-circle1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-circle1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-circle1-auto-parts .list-parts figure {
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
}

/*テキストボックス*/
.list-circle1-auto-parts .list-parts .text-parts {
	flex: 1;
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-circle1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-circle1-auto-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-circle1-auto-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

css

list-kadomaru1

角丸の3カラムレイアウト。mainの幅が900px未満で2列に。

<h2 class="c">list-kadomaru1-parts</h2>
<p class="c">3列レイアウト。mainの幅が900px未満で2列に。</p>

<h3 class="c">画像のアスペクト比そのまま</h3>
<p class="c">3列レイアウト。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">使い分けは簡単で、外側のブロックの<br>
「list-kadomaru1-parts」を「list-kadomaru1-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h2 class="c">アイコンをつけたい場合</h2>
<p class="c">色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list-kadomaru1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-kadomaru1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-kadomaru1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-kadomaru1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list-kadomaru1-parts {	grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list-kadomaru1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-parts .list-parts figure {
	border-radius: 20px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-kadomaru1-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-kadomaru1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-kadomaru1-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-kadomaru1-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*list-kadomaru1-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list-kadomaru1-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 10px;	/*ボックスの左からの配置*/
	top: 10px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list-kadomaru1-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list-kadomaru1-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list-kadomaru1-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list-kadomaru1-auto

角丸のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2 class="c">list-kadomaru1-auto-parts</h2>
<p class="c">各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<h3 class="c">画像のアスペクト比そのまま</h3>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">使い分けは簡単で、外側のブロックの<br>
「list-kadomaru1-auto-parts」を「list-kadomaru1-auto-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h2 class="c">アイコンをつけたい場合</h2>
<p class="c">色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list-kadomaru1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-kadomaru1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-kadomaru1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-kadomaru1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-auto-parts .list-parts figure {
	border-radius: 20px;	/*角を丸くする。お好みで。*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-kadomaru1-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-kadomaru1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-kadomaru1-auto-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-kadomaru1-auto-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*list-kadomaru1-auto-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list-kadomaru1-auto-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 10px;	/*ボックスの左からの配置*/
	top: 10px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list-kadomaru1-auto-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list-kadomaru1-auto-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list-kadomaru1-auto-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list-mask1

かわいい形の3カラムレイアウト。mainの幅が900px未満で2列に。

<h2 class="c">list-mask1-parts</h2>
<p class="c">3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts mask1 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask2 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask3 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask4 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask5 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask6 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><a href="#"><img src="images/1.jpg" alt=""></a></figure>
<div class="text-parts">
<h4><a href="#">マスク指定なしの場合</a></h4>
<p>画像にリンクをすると、hoverで画像が拡大します。</p>
</div>
</div>

</div>

</section>

html

/*list-mask1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-mask1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list-mask1-parts {	grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list-mask1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

/*テキストボックス*/
.list-mask1-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask1-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*画像*/
.list-mask1-parts figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.list-mask1-parts figure img {
	transition: 0.5s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-parts figure a img:hover {
	transform: scale(1.1);
}

/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.list-mask1-parts figure {
		border-radius: 0;
		overflow: visible;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

.list-mask1-parts .list-parts.mask1 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	}

.list-mask1-parts .list-parts.mask2 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	}

.list-mask1-parts .list-parts.mask3 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	}

.list-mask1-parts .list-parts.mask4 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	}

.list-mask1-parts .list-parts.mask5 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	}

.list-mask1-parts .list-parts.mask6 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
	}

}/*追加指定ここまで*/

css

list-mask1-auto

かわいい形のカラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2 class="c">list-mask1-auto-parts</h2>
<p class="c">各ボックスの最大幅180pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<div class="list-parts mask1 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask2 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask3 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask4 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask5 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts mask6 inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><a href="#"><img src="images/1.jpg" alt=""></a></figure>
<div class="text-parts">
<h4><a href="#">マスク指定なしの場合</a></h4>
<p>画像にリンクをすると、hoverで画像が拡大します。</p>
</div>
</div>

</div>

</section>

html

/*list-mask1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));	/*ボックス１個あたりの最低幅が180pxで自動改行*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-mask1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

/*テキストボックス*/
.list-mask1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask1-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*画像*/
.list-mask1-auto-parts figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.list-mask1-auto-parts figure img {
	transition: 0.5s;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*画像にリンクがある場合のみ110%に拡大*/
.list-mask1-auto-parts figure a img:hover {
	transform: scale(1.1);
}

/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

.list-mask1-auto-parts figure {
		border-radius: 0;
		overflow: visible;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

.list-mask1-auto-parts .list-parts.mask1 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	}

.list-mask1-auto-parts .list-parts.mask2 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	}

.list-mask1-auto-parts .list-parts.mask3 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	}

.list-mask1-auto-parts .list-parts.mask4 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	}

.list-mask1-auto-parts .list-parts.mask5 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	}

.list-mask1-auto-parts .list-parts.mask6 figure {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
	}

}/*追加指定ここまで*/

css

list-mask2

枠がうねうね動くレイアウト。mainの幅が900px未満で2列に。

<h2 class="c">list-mask2-parts（mask1、mask2、mask3、の３パターンのうねうね動く枠）</h2>
<p class="c">3列レイアウト。mainの幅が900px未満で2列に。</p>

<h3 class="c">画像のアスペクト比そのまま</h3>
<p class="c">3列レイアウト。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask1"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask2"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask3"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">長方形だと形が微妙なので、円形にするタイプも用意しています。<br>
使い分けは簡単で、外側のブロックの<br>
「list-mask2-parts」を「list-mask2-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask1"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask2"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask3"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*maskのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}

@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}

@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}

/*maskスタイル
---------------------------------------------------------------------------*/
/*mask1*/
.mask1 {
	animation: mask1 12s linear infinite;
}

/*mask2*/
.mask2 {
	animation: mask2 8s linear infinite;
}

/*mask3*/
.mask3 {
	animation: mask3 10s linear infinite;
}

/*list-mask2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask2-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-mask2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list-mask2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list-mask2-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list-mask2-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask2-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask2-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-mask2-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-mask2-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

css

list-mask2-auto

枠がうねうね動くレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2 class="c">list-mask2-auto-parts（mask1、mask2、mask3、の３パターンのうねうね動く枠）</h2>
<p class="c">各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<h3 class="c">画像のアスペクト比そのまま</h3>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask1"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask2"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask3"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h3 class="c">画像のアスペクト比を1:1に</h3>
<p class="c">長方形だと形が微妙なので、円形にするタイプも用意しています。<br>
使い分けは簡単で、外側のブロックの<br>
「list-mask2-auto-parts」を「list-mask2-auto-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask1"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask2"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt="" class="mask3"></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*maskのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}

@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}

@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}

/*maskスタイル
---------------------------------------------------------------------------*/
/*mask1*/
.mask1 {
	animation: mask1 12s linear infinite;
}

/*mask2*/
.mask2 {
	animation: mask2 8s linear infinite;
}

/*mask3*/
.mask3 {
	animation: mask3 10s linear infinite;
}

/*list-mask2-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-mask2-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-mask2-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 3rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-mask2-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list-mask2-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*h4見出し*/
.list-mask2-auto-parts h4 {
	text-align: center;	/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list-mask2-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*square（正方形）画像*/
.list-mask2-auto-parts.square .list-parts figure {
	width: 100%;
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-mask2-auto-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

css

list-ranking1

ランキングアイコンがついた3カラムレイアウト。mainの幅が900px未満で2列に。

<h2>list-ranking1-parts</h2>
<p>3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag rank1">1</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag rank2">2</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag rank3">3</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag">4</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag">5</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<div class="rank-flag">6</div>
</div>

</div>

</section>

html

/*list-ranking1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-ranking1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-ranking1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list-ranking1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list-ranking1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list-ranking1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

/*テキストボックス*/
.list-ranking1-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list-ranking1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/* ランキングの旗 */
.rank-flag {
	position: absolute;
	left: 5px;	/*左からの配置場所*/
	top: -5px;	/*上からの配置場所*/
	width: 3rem;	/*幅*/
	height: 3rem;	/*高さ*/
	font-weight: bold;	/*太字に*/
	background: #fff; /*背景色*/
	color: #333;	/*文字色*/
	text-align: center;
  
  /* マスクの設定 */
  --mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 色のバリエーション */
.rank1 {
  background: #fddc00; /*背景色（金）*/
  color: #111;	/*文字色*/
}
.rank2 {
  background: #c0c0c0; /*背景色（銀）*/
  color: #fff;	/*文字色*/
}
.rank3 {
  background: #cd7f32; /*背景色（銅）*/
  color: #fff;	/*文字色*/
}

css

list-yoko-scroll1

手動で横スクロールするタイプのボックスです。

<h2>others-list-yoko-scroll1-parts</h2>
<p>横スクロールバーを出さない設定になっていますが、出したい場合はcssの以下の２行を削除してください。<br>
.others-list-yoko-scroll1-partsの中にある、scrollbar-width: none;の１行。<br>
.others-list-yoko-scroll1-parts::-webkit-scrollbarのブロック。<br>
（補足：MacOSでは常時表示にならない環境あり。どうしてもバーを見せたい場合はサポート掲示板から問い合わせて下さい。）</p>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/1.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/2.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

<div class="list-parts">
<figure><img src="images/3.jpg" alt=""></figure>
<h4>サンプル見出し。</h4>
<p class="text-parts">サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
</div>

</div>

</section>

html

/*others-list-yoko-scroll1-parts
---------------------------------------------------------------------------*/
.others-list-yoko-scroll1-parts * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.others-list-yoko-scroll1-parts {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	 /*Firefox用*/
	scroll-snap-type: x mandatory; /*スナップスクロールを有効にする*/
}
.others-list-yoko-scroll1-parts::-webkit-scrollbar {
    display: none;	/*Chrome, Safari, Edge用*/
}

/*ブロック内の１個あたり*/
.others-list-yoko-scroll1-parts .list-parts {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-right: 1rem;		/*ブロック内の右側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

/*ブロック内の１個あたり*/
	.others-list-yoko-scroll1-parts .list-parts {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-right: 2rem;	/*ブロック内の右側に余白。２文字分。*/
	}

}/*追加指定ここまで*/

/*テキストブロック*/
.others-list-yoko-scroll1-parts .list-parts .text-parts {
	flex: 1;
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.5;	/*行間*/
}

css

list-yoko1

画像とテキストの2カラムのレイアウトが2列になっています。画面幅900px未満で１列になります。

<h2>list-yoko1-parts</h2>
<p>画面幅900px未満で１列になります。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

css

list-yoko1-border

list-yoko1の枠線入りタイプ。

<h2>list-yoko1-border-parts</h2>
<p>画面幅900px未満で１列になります。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

css

list-yoko2

タイトルと価格をセット表示するレイアウト。画面幅900px未満で１列になります。

html

/*list-yoko2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko2-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko2-parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/*２列*/
	gap: 0 3rem;	/*メニュー同士に空けるスペース。上下は0、左右間は3文字分。*/
}

/*ボックス１個あたり*/
.list-yoko2-parts > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;	/*左は余った部分を一杯使える。右はテキストの幅に合わせる。*/
	gap: 1rem;
	align-items: baseline;
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

/*最初の行（2列分）だけ上にも線を入れる*/
.list-yoko2-parts > div:nth-child(1),
.list-yoko2-parts > div:nth-child(2) {
	border-top: 1px solid var(--border-color);	/*上の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

/*価格*/
.list-yoko2-parts dd {
	text-align: right;		/*テキストを右寄せする*/
	white-space: nowrap;	/*改行させない*/
}

/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

/*ボックス全体を囲むブロック*/
	.list-yoko2-parts {
		grid-template-columns: 1fr;	/*1列*/
	}
	
	/*2列用で指定している重複してしまう線を消す*/
	.list-yoko2-parts > div:nth-child(2) {
		border-top: none;
	}

}/*追加指定ここまで*/

css

list-yoko3

画像とテキストが左右に分かれたレイアウト。

<h2>list-yoko3-parts</h2>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts reverse inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>左右逆のタイプ</h4>
<p><div class="list-parts"><br>
を、<br>
<div class="list-parts <span class="color-check">reverse</span>"><br> 
にするとこのように左右が逆になります。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

css

list-yoko3-border

list-yoko3の枠線入りタイプ。

<h2>list-yoko3-border-parts</h2>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts reverse inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>左右逆のタイプ</h4>
<p><div class="list-parts"><br>
を、<br>
<div class="list-parts <span class="color-check">reverse</span>"><br> 
にするとこのように左右が逆になります。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list-yoko3-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko3-border-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko3-border-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*ボックス１個あたり*/
.list-yoko3-border-parts .list-parts {
	display: flex;
	align-items: center;
	gap: 1rem;	/*画像とテキストブロックの間に空けるスペース。0.5文字分。*/
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*左右逆向き用スタイル*/
.list-yoko3-border-parts .list-parts.reverse {
	flex-direction: row-reverse;
}

/*画像の幅*/
.list-yoko3-border-parts .list-parts figure {
	width: 40%;
}

/*テキストを囲むブロック*/
.list-yoko3-border-parts .list-parts .text-parts {
	flex: 1;
}

/*段落（p）*/
.list-yoko3-border-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko3-border-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

css

list-yoko4-float

テキスト量が多い場合に、画像の下に回り込むfloat版。

<h2>list-yoko4-float-parts</h2>
<p>テキストが回り込むfloat版です。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts reverse inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>左右逆のタイプ</h4>
<p><div class="list-parts"><br>
を、<br>
<div class="list-parts <span class="color-check">reverse</span>"><br> 
にするとこのように左右が逆になります。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

css

list-yoko4-float-border

list-yoko4-floatの枠線入りタイプ。

<h2>list-yoko4-float-border-parts</h2>
<p>テキストが回り込むfloat版です。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

<div class="list-parts reverse inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>左右逆のタイプ</h4>
<p><div class="list-parts"><br>
を、<br>
<div class="list-parts <span class="color-check">reverse</span>"><br> 
にするとこのように左右が逆になります。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list-yoko4-float-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list-yoko4-float-border-parts * {margin: 0;padding: 0;}

/*ボックス全体を囲むブロック*/
.list-yoko4-float-border-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;		/*ボックス同士の間に空けるスペース。2文字分。*/
}

/*ボックス１個あたり*/
.list-yoko4-float-border-parts .list-parts {
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*画像（デフォルト。左に回り込み用。）*/
.list-yoko4-float-border-parts .list-parts figure {
	width: 40%;		/*画像の幅。お好みで。*/
	float: left;	/*左に回り込み*/
	margin-left: 0;
	margin-right: 2rem;	/*画像の右側に２文字分のスペース*/
	margin-bottom: 1rem;	/*画像の下に１文字分のスペース*/
}

/*画像（右に回り込み用）*/
.list-yoko4-float-border-parts .list-parts.reverse figure {
	float: right;		/*右に回り込み*/
	margin-right: 0;
	margin-left: 2rem;	/*画像の左側に２文字分のスペース*/
}

/*段落（p）*/
.list-yoko4-float-border-parts .list-parts .text-parts p {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.5;	/*行間を少し狭く*/
}
.list-yoko4-float-border-parts .list-parts .text-parts p + p {
	margin-top: 0.5rem;
}

css

list1

3カラムレイアウト。mainの幅が900px未満で2列に。

<h2>list1-parts</h2>
<p>3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

</div>

</section>

<h2>アイコンをつけたい場合</h2>
<p>色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list1-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list1-partss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list1-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

/*テキストボックス*/
.list1-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*list1-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list1-border

list1の枠線入りタイプ。

<h2>list1-border-parts</h2>
<p>3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

</div>

</section>

<h2>アイコンをつけたい場合</h2>
<p>色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list1-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-border-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-border-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list1-border-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list1-border-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list1-border-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*テキストボックス*/
.list1-border-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-border-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-border-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-border-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*list1-border-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-border-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-border-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-border-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-border-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list1-shadow

list1の影入りタイプ。

<h2>list1-shadow-parts</h2>
<p>3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

</div>

</section>

<h2>アイコンをつけたい場合</h2>
<p>色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list1-shadow-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-shadow-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-shadow-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list1-shadow-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list1-shadow-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list1-shadow-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	box-shadow: 0px 0px 2rem rgba(0,0,0,0.2);	/*ボックスの影。右に0px、下に0px、ぼかす量は2文字分、0,0,0は黒のことで0.2は色が20%出た状態。*/
}

/*テキストボックス*/
.list1-shadow-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-shadow-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-shadow-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-shadow-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*list1-shadow-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-shadow-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-shadow-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-shadow-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-shadow-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list1-auto

カラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2>list1-auto-parts</h2>
<p>各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

</div>

</section>

<h2>アイコンをつけたい場合</h2>
<p>色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list1-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list1-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*テキストボックス*/
.list1-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-auto-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-auto-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*.list1-auto-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-auto-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-auto-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-auto-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-auto-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list1-auto-border

list1-autoの枠線入りタイプ。

<h2>list1-auto-border-parts</h2>
<p>各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

</div>

</section>

<h2>アイコンをつけたい場合</h2>
<p>色はcssのaccent-colorが適用されていますが、個別に直接カラーコードなどの指定もOKです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon1-parts</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<span class="icon1-parts">NEW</span>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon2-parts</h4>
<p>アイコン内の文字数が増えると切れるので、少なくするか、cssでwidthとline-heigntを大きくして下さい。</p>
</div>
<span class="icon2-parts">NEW</span>
</div>

<div class="list-parts inview is-clip">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>icon3-parts</h4>
<p>icon3-partsの中にspanがセットで必要なので注意して下さい。<br>
このタイプは帯が飛び出るので、ボックス自体にis-clipを追加して下さい。</p>
</div>
<span class="icon3-parts"><span>NEW</span></span>
</div>

</div>

</section>

html

/*list1-auto-border-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list1-auto-border-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list1-auto-border-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 1.5rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list1-auto-border-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
}

/*テキストボックス*/
.list1-auto-border-parts .list-parts .text-parts {
	flex: 1;
}

/*説明だけ小さめにする*/
.list1-auto-border-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボタン*/
.list1-auto-border-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}
/*primary背景色の上で使ったボタンのみ上書き（背景とボタンが同化しないように）*/
.bg1-primary-parts .list1-auto-border-parts .btn-parts a {
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*.list1-auto-border-parts用のアイコン
---------------------------------------------------------------------------*/
/*icon1-parts*/
.list1-auto-border-parts .icon1-parts {
	display: block;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: 5px;	/*ボックスの左からの配置*/
	top: 5px;	/*ボックスの上からの配置*/
	padding: 0 0.5rem;	/*アイコン内の余白。上下は0、左右に0.5文字分。*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon2-parts*/
.list1-auto-border-parts .icon2-parts {
	display: block;
	overflow: hidden;
	pointer-events: none;
	font-size: 0.8rem;	/*文字サイズ80%*/
	position: absolute;
	left: -6px;	/*ボックスの左からの配置*/
	top: -6px;	/*ボックスの上からの配置*/
	width: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*icon3-parts（帯を入れているボックス。背景色をつけてみると、意味がわかって調整しやすいです。）*/
.list1-auto-border-parts .icon3-parts {
	pointer-events: none;
	position: absolute;
	left: -20px;	/*場所を変えたい場合は、ここを変更。下のtopと合わせる。*/
	top: -20px;		/*場所を変えたい場合は、ここを変更。上のleftと合わせる。*/
	width: 100px;
	height: 100px;
	z-index: 2;
}
/*icon3-parts（帯）*/
.list1-auto-border-parts .icon3-parts > span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;	/*帯の幅。ここだけ変更しても変化しないので、上の帯を入れているボックスの方で調整して下さい。*/
	transform: translate(-50%, -50%) rotate(-45deg);
	display: block;
	text-align: center;
	font-size: 0.8rem;	/*文字サイズ80%*/
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	white-space: nowrap;
}

css

list2

アイコンをメインにした3カラムレイアウト。mainの幅が900px未満で2列に。

<h2 class="c">list2-parts<br>画像のアスペクト比そのまま</h2>
<p class="c">3列レイアウト。mainの幅が900px未満で2列に。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">画像自体の縦横比はそのままで、中央だけくり抜かれる感じです。<br>
使い分けは簡単で、外側のブロックの<br>
「list2-parts」を「list2-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list2-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list2-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list2-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 2rem 1.5rem;		/*ボックス同士の間に空けるスペース。上下間が2文字分、左右間が1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が599px以下で2カラム*/
	@supports not (container-type: inline-size) {
		@media (max-width: 599px) {
			.list2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅(この場合はmain)が899px以下では2カラム*/
	@supports (container-type: inline-size) {
		@container (max-width: 899px) {
			.list2-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		}
	}

/*ボックス１個あたり*/
.list2-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます*/
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*テキストボックス*/
.list2-parts .list-parts .text-parts {
	flex: 1;
}

/*ボックス内のh4見出し*/
.list2-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list2-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボックス内のfigure画像*/
.list2-parts .list-parts figure {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: var(--primary-color);	/*背景色。画像に透過部分がある場合に見えます。theme.cssのprimary-colorを読み込みます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list2-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボタン*/
.list2-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}

css

list2-auto

アイコンをメインにした3カラムレイアウト。各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）

<h2 class="c">list2-auto-parts<br>画像のアスペクト比そのまま</h2>
<p class="c">各ボックスの最大幅250pxの間で自動調整。（画面幅を変更していくと意味がわかります）</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

<h2 class="c">画像のアスペクト比を1:1に</h2>
<p class="c">画像自体の縦横比はそのままで、中央だけくり抜かれる感じです。<br>
使い分けは簡単で、外側のブロックの<br>
「list2-auto-parts」を「list2-auto-parts <span class="color-check">square</span>」にするだけです。</p>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
<p class="btn-parts"><a href="#">ボタン</a></p>
</div>

<div class="list-parts inview">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>タイトル</h4>
<p>ここに説明を書きます。サンプルテキスト。</p>
</div>
</div>

</div>

</section>

html

/*list2-auto-parts（カラムブロック）
---------------------------------------------------------------------------*/
.list2-auto-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list2-auto-parts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));	/*ボックス１個あたりの最低幅が250pxで自動改行*/
	gap: 2rem 1.5rem;		/*ボックス同士の間に空けるスペース。上下間が2文字分、左右間が1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
	margin-top: 20px;	/*画像が上に飛び出る分、上との隙間が減るので適当に確保。*/
}

/*ボックス１個あたり*/
.list2-auto-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
	border: 1px solid var(--border-color);	/*枠線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます*/
	border-radius: 5px;	/*角を少しだけ丸く*/
	padding: 1rem;	/*ボックス内の余白。1文字分。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*テキストボックス*/
.list2-auto-parts .list-parts .text-parts {
	flex: 1;
}

/*ボックス内のh4見出し*/
.list2-auto-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
}

/*説明だけ小さめにする*/
.list2-auto-parts .list-parts p {
	font-size: 0.9em;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}

/*ボックス内のfigure画像*/
.list2-auto-parts .list-parts figure {
	margin: 0 auto;
	width: 50%;				/*画像サイズ。お好みで。*/
	margin-top: -30px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background: var(--primary-color);	/*背景色。画像に透過部分がある場合に見えます。theme.cssのprimary-colorを読み込みます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list2-auto-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list2-auto-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

/*ボタン*/
.list2-auto-parts .btn-parts a {
	display: block;text-decoration: none;
	text-align: center;
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	padding: 0.2rem 0.5rem;	/*ボタン内の余白。上下に0.2文字分、左右に0.5文字分。*/
}

css

others-masonry1

サムネイルがレンガ状に隙間なく積み重なるレイアウト。ご利用の際はこちらをお読み下さい。

<h2>others-maronry1-parts</h2>
<p><a href="https://template-party.com/parts-new/others/others-masonry1/manual.html">使い方マニュアルと、素材のダウンロードはこちらから。</a></p>
<p>画像の他、動画も配置できますが、容量が大きいとページの表示がガタつくので注意して下さい。<br>
素材を追加する場合は、既存の画像または動画のブロックをコピペし、ファイル名だけ入れ替えればOKです。<br>
「data-caption」はクリック時に画像下に表示されるテキストです。</p>

<div class="masonry1-size-parts"></div>

</div>

</section>

html

/*Masonry
---------------------------------------------------------------------------*/
/*サムネを囲んでいるブロック全体*/
.others-maronry1-parts {
  animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
}

/* カラム幅：PC 4列 */
.others-maronry1-parts .masonry1-size-parts,
.others-maronry1-parts .list-parts {
  width: calc(25% - 16px);
}

.others-maronry1-parts .list-parts {
  margin-bottom: 16px;
}

/* レスポンシブ：1000px 未満で 3列 */
@media (max-width: 1000px) {
  .others-maronry1-parts .masonry1-size-parts,
  .others-maronry1-parts .list-parts {
    width: calc(33.333% - 16px);
  }
}

/* レスポンシブ：500px 未満で 2列 */
@media (max-width: 500px) {
  .others-maronry1-parts .masonry1-size-parts,
  .others-maronry1-parts .list-parts {
    width: calc(50% - 16px);
  }
}

/* 中身共通 */
.others-maronry1-parts .list-parts a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.others-maronry1-parts .list-parts img,
.others-maronry1-parts .list-parts video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 画像・動画に軽いホバー演出 */
.others-maronry1-parts .list-parts img,
.others-maronry1-parts .media-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.others-maronry1-parts .list-parts a:hover img,
.others-maronry1-parts .list-parts a:hover .media-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 動画サムネ用ラッパー */
.others-maronry1-parts .media-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* サムネ動画 */
.others-maronry1-parts .thumb-video {
  display: block;
  width: 100%;
  height: auto;
}

/* 「▶」アイコン */
.others-maronry1-parts .video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff0000;  /*背景色*/
  color: #fff;  /*文字色*/
  font-size: 12px;  /*アイコンのサイズ*/
  width: 28px;  /*アイコンの幅*/
  line-height: 28px;  /*高さ*/
  text-align: center;
  border-radius: 100px;  /*円形にする*/
  pointer-events: none;
}

css

others-search1

javascriptを使った簡易検索。

<div class="list-parts" data-keyword="清水寺 きよみずでら 寺院 舞台 世界遺産">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>清水寺</h4>
<p>「清水の舞台」で有名。古都京都の風情と、四季折々の絶景を一望できます。</p>
</div>
</div>

<div class="list-parts" data-keyword="伏見稲荷大社 ふしみいなり 千本鳥居 神社 ハイキング">
<figure><img src="images/2.jpg" alt=""></figure>
<div class="text-parts">
<h4>伏見稲荷大社</h4>
<p>朱色の千本鳥居が幻想的なトンネルを作る、海外からも人気の高い神社です。</p>
</div>
</div>

<div class="list-parts" data-keyword="金閣寺 きんかくじ 寺院 池 黄金 世界遺産">
<figure><img src="images/3.jpg" alt=""></figure>
<div class="text-parts">
<h4>金閣寺</h4>
<p>黄金に輝く舎利殿と鏡湖池のコントラストが美しい、京都を代表する名刹です。</p>
</div>
</div>

<div class="list-parts" data-keyword="嵐山・竹林の小径 あらしやま ちくりん 自然 散歩 嵯峨野">
<figure><img src="images/1.jpg" alt=""></figure>
<div class="text-parts">
<h4>嵐山・竹林の小径</h4>
<p>天高く伸びる竹林に囲まれた癒やしの空間。着物での散策にもおすすめです。</p>
</div>
</div>

<div class="list-parts" data-keyword="祇園・花見小路 ぎおん 舞妓 町家 石畳 デート">
<figure><img src="images/2.jpg" alt=""></figure>
<div class="text-parts">
<h4>祇園・花見小路</h4>
<p>石畳の路地に京町家が並ぶ風情ある通り。運が良ければ舞妓さんに出会えるかも。</p>
</div>
</div>

<div class="no-result" style="display:none;">
<p>該当するスポットが見つかりません。</p>
</div>

</div>

</section>

<h2>簡易検索の使い方</h2>
<p>javascriptを使った簡易検索です。<br>
あらかじめ、キーワードをhtml側のdata-keywordに入れておいて下さい。<br>
キーワード検索欄にテキストを入力するとリアルタイムで検索結果が出ます。</p>

</section>

html

/*簡易検索
---------------------------------------------------------------------------*/
/*検索ボックス*/
.others-search1-keyword-parts {
    margin-bottom: 1rem;	/*ボックスの下に１文字分のスペースを空ける*/
    background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*文字色。theme.cssのlight-inverse-colorを読み込みます。*/
    padding: 1rem;		/*検索窓のボックス内の余白。１文字分。*/
    border-radius: 8px;	/*角を少し丸くする*/
}

/*キーワード入力欄*/
.others-search1-keyword-parts input {
    width: 100%;
    padding: 1rem;		/*入力欄内の余白。１文字分。*/
    border: 1px solid var(--border-color);	/*枠線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    border-radius: 4px;	/*角を少しだけ丸くする*/
}

/*リスト全体の枠*/
.others-search1-parts {
    list-style: none;
    padding: 0;
}

/*リストブロック１個あたり*/
.others-search1-parts .list-parts {
    border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、varは色の指定でtheme.cssのborder-colorを読み込んでいます。*/
    margin-bottom: 1rem;	/*ブロックの下（外側）に空ける余白。１文字分。*/
    padding-bottom: 1rem;	/*ブロックの下（内側）に空ける余白。１文字分。*/
    display: flex;
    gap: 1rem; /*画像と文字の隙間。１文字分。*/
}

/*画像*/
.others-search1-parts .list-parts figure {
	width: 100px;	/*画像の幅*/
}
.others-search1-parts .list-parts figure img {
    display: block;
}

/*テキストブロック*/
.others-search1-parts .text-parts {
	flex: 1;
	line-height: 1.5;
}

/*h4見出し*/
.others-search1-parts .text-parts h4 {
	margin: 0;
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*文章*/
.others-search1-parts .text-parts p {
	margin: 0;
    font-size: 0.85rem;	/*文字サイズ85%*/
}

/* 該当なしメッセージ */
.others-search1-parts .no-result {
    text-align: center;
}

css

list-instagram1

コピペパーツではありませんが、任意のインスタ記事を組み込み方法です。リンク先はマニュアルページです。

一覧用パーツ

一覧用パーツ

一覧

絞り込み検索

list-auto1

list-before-after1

list-circle1

list-circle1-auto

list-kadomaru1

list-kadomaru1-auto

list-mask1

list-mask1-auto

list-mask2

list-mask2-auto

list-ranking1

list-yoko-scroll1

list-yoko1

list-yoko1-border

list-yoko2

list-yoko3

list-yoko3-border

list-yoko4-float

list-yoko4-float-border

list1

list1-border

list1-shadow

list1-auto

list1-auto-border

list2

list2-auto

others-masonry1

others-search1

list-instagram1

自分で作る
テンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

一覧用パーツ

一覧用パーツ

一覧

絞り込み検索

list-auto1

list-before-after1

list-circle1

list-circle1-auto

list-kadomaru1

list-kadomaru1-auto

list-mask1

list-mask1-auto

list-mask2

list-mask2-auto

list-ranking1

list-yoko-scroll1

list-yoko1

list-yoko1-border

list-yoko2

list-yoko3

list-yoko3-border

list-yoko4-float

list-yoko4-float-border

list1

list1-border

list1-shadow

list1-auto

list1-auto-border

list2

list2-auto

others-masonry1

others-search1

list-instagram1

自分で作るテンプレート

下準備

パーツ選択

旧パーツコーナー

下準備

パーツ選択

旧パーツコーナー

自分で作る
テンプレート