ランディングページ用パーツ集｜コピペで使えるHTML/CSS/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-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-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

ta-week1

クリニックなどの1週間の診療日のお知らせ向けテーブル。テーブル専用パーツページもあります。

html

/*テーブル（ta-week1-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta-week1-parts {
	table-layout: fixed;
	width: 100%;
}

/*上の角丸（thだけ）*/
.ta-week1-parts th:first-child {
	border-top-left-radius: 10px;
}
.ta-week1-parts th:last-child {
	border-top-right-radius: 10px;
}

/*受付時間の幅*/
.ta-week1-parts th:first-child,
.ta-week1-parts td:first-child {
	width: 25%;
}

/*各曜日の幅*/
.ta-week1-parts th:not(:first-child),
.ta-week1-parts td:not(:first-child) {
	width: calc(75% / 7);	/*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.ta-week1-parts th,
.ta-week1-parts td {
	padding: 1rem 0;	/*ボックス内の余白。上下に１文字分、左右は0。*/
	text-align: center;	/*テキストをセンタリング*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}

/*１行目。th(曜日)の追加指定*/
.ta-week1-parts th {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*２行目。*/
.ta-week1-parts td {
	border-bottom: 1px solid var(--border-color);	/*下の線の幅、線種、var以降は色の指定でtheme.cssのborder-colorを読み込みます。*/
}

css

ta-yoko1

おすすめプラン紹介などに向いたtable。画面幅が狭くなると横スクロールバーが出ます。テーブル専用パーツページもあります。

html

/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
.ta-yoko1-parts {
	width: 100%;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
}
.ta-yoko1-parts, .ta-yoko1-parts td, .ta-yoko1-parts th {
	text-align: center;
	border: 1px solid var(--border-color);	/*テーブルの枠線の幅、線種、var以降は色の指定で、theme.cssのborder-colorを読み込みます*/
	padding: 1rem;	/*余白。1文字分。*/
}

/*一番左側の縦列の幅*/
.ta-yoko1-parts th:first-child,
.ta-yoko1-parts td:first-child {
    width: 12rem;	/*目安としては約12文字分。*/
}

/*１行目のプランブロック*/
.ta-yoko1-parts th {
	width: auto;
	position: relative;
	overflow: hidden;
}

/*３列目（スタンダードプラン）の背景色と文字色*/
.ta-yoko1-parts th:nth-of-type(3), .ta-yoko1-parts td:nth-of-type(3) {
	background: #fff668;	/*背景色*/
	color: #000;			/*文字色*/
}

/*１行目のプランブロック内の「おすすめ」表示*/
.ta-yoko1-parts th .osusume {
	position: absolute;
	left: 0px;
	top: 0px;
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	font-size: 0.7rem;		/*文字サイズ70%*/
	width: 120px;
	text-align: center;
	padding-top: 43px;
	padding-bottom: 2px;
	transform: rotate(-45deg) translate(-20px, -60px);
}

/*１行目のプランブロック内のアイコン（王冠マーク）*/
.ta-yoko1-parts th i {
	display: block;
	font-size: 1.4rem;	/*サイズ*/
}

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

.scroll-parts {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch; /*iOSでなめらかに動く*/
	}

.ta-yoko1-parts {
		width: max-content;	/*中身に必要な幅で広がる*/
		min-width: 100%;	/*中身が少ない時は親幅に合わせる*/
	}

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

css

others-step1

ステップ案内用。

<h2>others-step1</h2>

<h3>デフォルト</h3>
<ul class="others-step1">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>primaryカラー</h3>
<ul class="others-step1 primary-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>lightカラー</h3>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

<h3>accentカラー</h3>
<ul class="others-step1 accent-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>

</section>

html

/*ステップボックス
---------------------------------------------------------------------------*/
ul.others-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.others-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	border: 2px solid var(--bg-inverse-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのbg-inverse-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*「▼」のマーク*/
ul.others-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.others-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.others-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.others-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.others-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.others-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.others-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.others-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

css

others-step2

ステップ案内用。

html

css

others-sticky1

セクションが終わるまで左側の見出しが固定表示されます。ステップ案内などに。

<h2>others-sticky1-parts</h2>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル１</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル２</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="title-parts">
<h2>タイトル３</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<ul class="others-step1 light-parts">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
</div>
</div>

</div>

</section>

html

/*sticky1-parts
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.others-sticky1-parts .list-parts {
	margin-bottom: 4rem;	/*下に空けるマージン*/
}

/*タイトルブロック*/
.others-sticky1-parts .title-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
	text-align: center;	/*テキストをセンタリング*/
}

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

/*ブロック１個あたりの設定*/
	.others-sticky1-parts .list-parts {
		display: flex;
		align-items: flex-start;
		gap: 4rem;	/*タイトルと画像が入った右側ブロックの間のスペース。４文字分。*/
		position: relative;
	}
	
	/*タイトルブロック*/
	.others-sticky1-parts .title-parts {
		width: 30%;	/*幅*/
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	
	/*右側のブロック*/
	.others-sticky1-parts .text-parts {
		flex: 1;
	}

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

/*ステップボックス
---------------------------------------------------------------------------*/
ul.others-step1 {
	margin: 0 !important;padding: 0 !important;
	list-style: none;
}

/*ステップ１個あたり*/
ul.others-step1 li {
	padding: 1rem;			/*ボックス内の余白。１文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
	position: relative;
	border: 2px solid var(--bg-inverse-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのbg-inverse-colorを読み込みます。*/
	background: var(--bg-color);	/*背景色。theme.cssのbg-colorを読み込みます。*/
	color: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*「▼」のマーク*/
ul.others-step1 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -2rem;	/*下からの配置場所。本来の場所より上に２文字分の場所。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.3;	/*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.others-step1 li:last-child::after {
	content: "";
}

/*primaryカラーの場合*/
ul.others-step1.primary-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--primary-color);	/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*背景色。theme.cssのprimaryinverse-colorを読み込みます。*/
}
ul.others-step1.primary-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*lightカラーの場合*/
ul.others-step1.light-parts li {
	border: 2px solid var(--primary-color);	/*枠線の幅、線種、varは色の指定で、theme.cssのprimary-colorを読み込みます。*/
	background: var(--light-color);	/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}
ul.others-step1.light-parts li::after {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*accentカラーの場合*/
ul.others-step1.accent-parts li {
	border: none;	/*デフォルトの枠線をなしに*/
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
ul.others-step1.accent-parts li::after {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

css

others-fixed1

セクションが終わるまで左側の画像ブロックが固定表示されます。ステップ案内などにも。

<h2>others-fixed1-parts</h2>
<ul class="mb3rem">
<li>ウィンドウ上部で画像ブロックが固定表示されます。（600px未満では画像ブロックは非表示。）</li>
<li>デモでは最後のブロックのアクションが確認できるように、sectionにインラインスタイルを直接指定しています。実際にはこのsectionのインラインスタイルは使わないで下さい。下に無駄な余白が発生します。</li>
<li>theme.cssに、Balletフォントが読み込まれていないと別フォントが表示されます。もし入ってない場合は、いずれかのフレームをDLし、theme.cssのBalletの行をコピペしておいて下さい。</li>
</ul>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait1.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">01</span>
<h3>見出し01</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<ul class="others-step2">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
<ul>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait2.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">02</span>
<h3>見出し02</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait3.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">03</span>
<h3>見出し03</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

</div>

</section>

html

/*others-fixed1-parts
---------------------------------------------------------------------------*/
.others-fixed1-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--stay-gap: 8vh;	/*画像を滞在させる分の高さ。大きいと滞在時間も長くなりますが、その分、テキスト下に余分なスペースが発生します。*/
}

/*各ブロック*/
.others-fixed1-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.others-fixed1-parts .img-parts {
	display: none;
	overflow: hidden;
}

/*画像本体*/
.others-fixed1-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*テキスト側*/
.others-fixed1-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.others-fixed1-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports not (container-type: inline-size) {
		@media (min-width: 600px) {

.others-fixed1-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
				padding-bottom: var(--stay-gap);
			}

.others-fixed1-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
			}

.others-fixed1-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports (container-type: inline-size) {
		@container (min-width: 600px) {

.others-fixed1-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
				padding-bottom: var(--stay-gap);
			}

.others-fixed1-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
			}

.others-fixed1-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}

/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

css

//===============================================================
// others-fixed1-parts
//===============================================================
$(function() {

function isfixed1Desktop() {
		var $main = $('main').first();
		var breakpoint = 600;	// cssのブレイクポイントと合わせる

if (window.CSS && CSS.supports && CSS.supports('container-type: inline-size')) {
			if ($main.length) {
				return $main.innerWidth() >= breakpoint;
			}
			return window.innerWidth >= breakpoint;
		}

return window.innerWidth >= breakpoint;
	}

function resetImgStyle($img) {
		$img.css({
			position: '',
			top: '',
			left: '',
			width: '',
			height: '',
			zIndex: ''
		});
	}

function updatefixed1Parts() {
		var isDesktop = isfixed1Desktop();
		var scrollTop = $(window).scrollTop();
		var winH = window.innerHeight;

$('.others-fixed1-parts').each(function() {
			var $wrap = $(this);
			var $items = $wrap.children('.list-parts');
			var imgRate = parseFloat(getComputedStyle(this).getPropertyValue('--img-rate')) || 0.30;

/*スマホ時は画像を全部リセットして終了*/
			if (!isDesktop) {
				$items.each(function() {
					resetImgStyle($(this).children('.img-parts'));
				});
				return;
			}

$items.each(function(i) {
				var $item = $(this);
				var $img = $item.children('.img-parts');
				var itemTop = $item.offset().top;
				var itemHeight = $item.outerHeight();
				var itemLeft = $item[0].getBoundingClientRect().left;
				var itemWidth = $item.outerWidth();
				var imgWidth = itemWidth * imgRate;
				var afterTop = Math.max(itemHeight - winH, 0);
				var stopTop;

/*最後以外は「次のブロックの先頭まで固定」*/
				if (i < $items.length - 1) {
					stopTop = $items.eq(i + 1).offset().top;
				} else {
					/*最後は「ブロック終端 - 画像高さ」まで固定。その後に上へ流れる*/
					stopTop = Math.max(itemTop, itemTop + itemHeight - winH);
				}

/*まだそのブロックに到達していない*/
				if (scrollTop < itemTop) {
					$img.css({
						position: 'absolute',
						top: 0,
						left: 0,
						width: '',
						height: winH,
						zIndex: i + 1
					});
				}

/*そのブロックの担当中（画面内固定）*/
				else if (scrollTop <= stopTop) {
					$img.css({
						position: 'fixed',
						top: 0,
						left: itemLeft,
						width: imgWidth,
						height: winH,
						zIndex: i + 1
					});
				}

/*担当終了後*/
				else {
					$img.css({
						position: 'absolute',
						top: afterTop,
						left: 0,
						width: '',
						height: winH,
						zIndex: i + 1
					});
				}
			});
		});
	}

var ticking = false;

function requestfixed1Update() {
		if (ticking) return;

ticking = true;

window.requestAnimationFrame(function() {
			updatefixed1Parts();
			ticking = false;
		});
	}

$(window).on('load resize scroll', requestfixed1Update);
	requestfixed1Update();

});

js

others-fixed2

スクロール中、画像ブロックがフェードで入れ替わります。ステップ案内などにも。

<h2>others-fixed2-parts</h2>
<ul class="mb3rem">
<li>スクロール中、画像ブロックがフェードで入れ替わります。（600px未満では画像ブロックは非表示。）</li>
<li>デモでは最後のブロックのアクションが確認できるように、sectionにインラインスタイルを直接指定しています。実際にはこのsectionのインラインスタイルは使わないで下さい。下に無駄な余白が発生します。</li>
<li>theme.cssに、Balletフォントが読み込まれていないと別フォントが表示されます。もし入ってない場合は、いずれかのフレームをDLし、theme.cssのBalletの行をコピペしておいて下さい。</li>
</ul>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait1.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">01</span>
<h3>見出し01</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<ul class="others-step2">
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
<li>さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。さらにステップが必要ならこのブロックを使います。サンプルテキスト。</li>
</ul>
<ul>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
<li>通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。通常のリストタグの場合はこんな感じ。サンプルテキスト。</li>
</ul>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait2.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">02</span>
<h3>見出し02</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

<div class="list-parts">
<div class="img-parts">
<img src="images/portrait3.jpg" alt="">
</div>
<div class="text-parts">
<span class="kazari-text">03</span>
<h3>見出し03</h3>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
<p>ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。ここにテキストを入れます。サンプルテキストです。</p>
</div>
</div>

</div>

</section>

html

/*others-fixed2-parts
---------------------------------------------------------------------------*/
.others-fixed2-parts {
	--img-rate: 0.3;	/*左画像の幅。30%。お好みで。*/
	--fade-speed: 1s;	/*フェード速度。1秒。お好みで。*/
}

/*各ブロック*/
.others-fixed2-parts .list-parts {
	position: relative;
}

/*画像は初期状態では非表示*/
.others-fixed2-parts .img-parts {
	display: none;
	overflow: hidden;
	opacity: 0;
}

/*画像本体*/
.others-fixed2-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*アクティブな画像だけ表示*/
.others-fixed2-parts .img-parts.is-active-parts {
	opacity: 1;
}

/*テキスト側*/
.others-fixed2-parts .text-parts {
	position: relative;
	z-index: 1;
	padding: var(--content-space-s) 0;
}

/*装飾テキスト*/
.others-fixed2-parts .kazari-text {
	display: block;
	text-align: right;
    font-size: 40vw;	/*文字サイズ*/
	margin-top: -0.4em;
	margin-bottom: -0.4em;
	line-height: 1;
	transform-origin: right;
	opacity: 0.1;	/*透明度。色が10%出た状態。*/
	font-family: "Ballet", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
}

/*@container未対応ブラウザ向け（@supportsで分岐）。画面幅が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports not (container-type: inline-size) {
		@media (min-width: 600px) {

.others-fixed2-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
			}

.others-fixed2-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
				transition: opacity var(--fade-speed) ease;
				pointer-events: none;
			}

.others-fixed2-parts .img-parts.is-active-parts {
				pointer-events: auto;
			}

.others-fixed2-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}
	
	/*@container対応ブラウザ向け。コンテナ幅（この場合はmain）が600px以上で画像表示（※600を変更する場合、jsのvar breakpoint = 600;も合わせて変更。）*/
	@supports (container-type: inline-size) {
		@container (min-width: 600px) {

.others-fixed2-parts .list-parts {
				min-height: 100vh;
				min-height: 100svh;
			}

.others-fixed2-parts .img-parts {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: calc(100% * var(--img-rate));
				height: 100vh;
				height: 100svh;
				transition: opacity var(--fade-speed) ease;
				pointer-events: none;
			}

.others-fixed2-parts .img-parts.is-active-parts {
				pointer-events: auto;
			}

.others-fixed2-parts .text-parts {
				margin-left: calc(100% * var(--img-rate));
				min-height: 100vh;
				min-height: 100svh;
				padding-left: var(--content-space-s);
			}

}
	}

/*others-step2（ステップボックス）
---------------------------------------------------------------------------*/
ul.others-step2 {margin: 0;list-style: none;}

/*１ブロックの設定*/
ul.others-step2 li {
	padding: 1rem;	/*ブロック内の余白。１文字分。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボックスの影。右へ0px、下へ0px、ぼかす量は20px、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 2rem;	/*ブロック同士の余白。２文字分。*/
	position: relative;
	border-radius: 10px;	/*角を丸くする*/
	font-size: 0.9rem;		/*文字サイズ90%*/
}

/*「▼」のマーク*/
ul.others-step2 li::after {
	content: "▼";	/*このテキストを出す*/
	transform: scaleX(2);	/*幅だけ２倍の大きさ*/
	position: absolute;
	left: 50%;	/*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
	bottom: -1.8rem;	/*下からの配置場所。本来の場所より上に1.8文字分移動。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
}

/*最後のステップボックス*/
ul.others-step2 li:last-child::after {
	content: "";	/*「▼」を出さない*/
	margin-bottom: 0;
}

css

//===============================================================
// others-fixed2-parts
//===============================================================
$(function() {

function isfixed2Desktop() {
		var $main = $('main').first();
		var breakpoint = 600;	// cssのブレイクポイントと合わせる

if (window.CSS && CSS.supports && CSS.supports('container-type: inline-size')) {
			if ($main.length) {
				return $main.innerWidth() >= breakpoint;
			}
			return window.innerWidth >= breakpoint;
		}

return window.innerWidth >= breakpoint;
	}

function resetImgStyle($img) {
		$img.removeClass('is-active-parts').css({
			position: '',
			top: '',
			left: '',
			width: '',
			height: '',
			zIndex: ''
		});
	}

function setImgState($img, isActive, cssObj) {
		$img.toggleClass('is-active-parts', isActive).css(cssObj);
	}

function updatefixed2Parts() {
		var isDesktop = isfixed2Desktop();
		var scrollTop = $(window).scrollTop();
		var winH = window.innerHeight;

$('.others-fixed2-parts').each(function() {
			var $wrap = $(this);
			var $items = $wrap.children('.list-parts');
			var itemCount = $items.length;
			var imgRate = parseFloat(getComputedStyle(this).getPropertyValue('--img-rate')) || 0.30;

if (!itemCount) return;

/*スマホ時は画像を全部リセットして終了*/
			if (!isDesktop) {
				$items.each(function() {
					resetImgStyle($(this).children('.img-parts'));
				});
				return;
			}

var $firstItem = $items.eq(0);
			var $lastItem = $items.eq(itemCount - 1);
			var firstTop = $firstItem.offset().top;
			var lastTop = $lastItem.offset().top;
			var lastHeight = $lastItem.outerHeight();
			var lastReleaseTop = Math.max(lastTop, lastTop + lastHeight - winH);
			var lastAfterTop = Math.max(lastHeight - winH, 0);
			var activeIndex = 0;
			var stage;
			var $activeItem;
			var stageLeft;
			var stageWidth;
			var triggerLine = scrollTop + (winH * 0.5);	/*切り替え基準線。0.5=画面中央*/

/*どのブロックが担当中か判定（切り替えは画面中央ライン基準）*/
			$items.each(function(i) {
				if (triggerLine >= $(this).offset().top) {
					activeIndex = i;
				}
			});

if (scrollTop < firstTop) {
				stage = 'before';
				activeIndex = 0;
			} else if (scrollTop > lastReleaseTop) {
				stage = 'after';
				activeIndex = itemCount - 1;
			} else {
				stage = 'active';
			}

$activeItem = $items.eq(activeIndex);
			stageLeft = $activeItem[0].getBoundingClientRect().left;
			stageWidth = $activeItem.outerWidth() * imgRate;

$items.each(function(i) {
				var $item = $(this);
				var $img = $item.children('.img-parts');
				var isActive = (i === activeIndex);

if (!$img.length) return;

/*開始前：1枚目だけ通常位置で見せる*/
				if (stage === 'before') {
					if (i === 0) {
						setImgState($img, true, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: itemCount + 1
						});
					} else {
						setImgState($img, false, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: 1
						});
					}
				}

/*担当中：全画像を同じ固定位置に重ね、opacityだけで切り替える*/
				else if (stage === 'active') {
					setImgState($img, isActive, {
						position: 'fixed',
						top: 0,
						left: stageLeft,
						width: stageWidth,
						height: winH,
						zIndex: isActive ? itemCount + 1 : i + 1
					});
				}

/*終了後：最後の画像だけ通常位置に戻して、そのまま上へ流す*/
				else {
					if (i === itemCount - 1) {
						setImgState($img, true, {
							position: 'absolute',
							top: lastAfterTop,
							left: 0,
							width: '',
							height: winH,
							zIndex: itemCount + 1
						});
					} else {
						setImgState($img, false, {
							position: 'absolute',
							top: 0,
							left: 0,
							width: '',
							height: winH,
							zIndex: 1
						});
					}
				}
			});
		});
	}

var ticking = false;

function requestfixed2Update() {
		if (ticking) return;

ticking = true;

window.requestAnimationFrame(function() {
			updatefixed2Parts();
			ticking = false;
		});
	}

$(window).on('load resize scroll', requestfixed2Update);
	requestfixed2Update();

});

js

others-tab1

タブ切り替えブロック

html

/*タブ切り替えブロック
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.others-tab1-parts {
	list-style: none;margin: 0 !important;padding: 0;
	display: flex;
	gap: 0.4rem;	/*メニュー同士に空けるスペース*/
}

/*メニュー１個あたり*/
.others-tab1-parts li {
	cursor: pointer;
	user-select: none;
	flex: 1;
	text-align: center;
	transition: 0.3s;
	background: #ddd;	/*背景色*/
	color: #999;		/*文字色*/
	padding: 1rem 2rem;	/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 10px 10px 0 0;	/*角を丸くする。左上、右上、右下、左下への順番。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

/*現在表示メニューと、hover時共通*/
.others-tab1-parts li.others-tab1-active-parts,
.others-tab1-parts li:hover {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*コンテンツブロック*/
.others-tab1-content-parts {
	display: none;
	padding: 2rem;	/*コンテンツ内の余白。２文字分。*/
	border: 2px solid var(--primary-color);	/*コンテンツの枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/
}

/*現在表示中のコンテンツブロック*/
.others-tab1-content-parts.others-tab1-active-parts {
	display: block;
}

css

//===============================================================
// タブ切り替えブロック
//===============================================================
$(function() {

$('.others-tab1-parts').each(function() {

var $menu     = $(this);
    var $tabs     = $menu.children('li');
    var $contents = $menu.nextAll('.others-tab1-content-parts').slice(0, $tabs.length);

// 初期状態を整える（HTMLに others-tab1-active-parts が無くても動く）
    var startIndex = $tabs.filter('.others-tab1-active-parts').first().index();
    if (startIndex < 0) startIndex = 0;

$tabs.removeClass('others-tab1-active-parts').eq(startIndex).addClass('others-tab1-active-parts');
    $contents.hide().removeClass('others-tab1-active-parts').eq(startIndex).show().addClass('others-tab1-active-parts');

$tabs.on('click', function() {

var $this = $(this);
      var idx   = $this.index();

if ($this.hasClass('others-tab1-active-parts')) return;

$tabs.removeClass('others-tab1-active-parts');
      $this.addClass('others-tab1-active-parts');

var $current = $contents.filter('.others-tab1-active-parts');
      var $next    = $contents.eq(idx);

$current.fadeOut(200, function() {
        $current.removeClass('others-tab1-active-parts');
        $next.fadeIn(200, function() {
          $next.addClass('others-tab1-active-parts');
        });
      });

});

js

others-openclose1

FAQ用などに使える汎用的な開閉ブロック。

html

css

js

others-openclose2

FAQ用などに使える汎用的な開閉ブロック。開閉でアイコンが入れ替わるタイプ。

html

/*openclose2
---------------------------------------------------------------------------*/
/*質問*/
.others-openclose2-parts {
	display: flex;
	align-items: flex-start;
	border-radius: 3px;		/*角を少しだけ丸く*/
	margin-bottom: 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を読み込みます。*/
	padding: 1rem;		/*ブロック内の余白。１文字分。*/
	cursor: pointer;	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*アイコン（閉じている場合）*/
.others-openclose2-parts::before {
	font-family: "Font Awesome 6 Free";
	content: "\f13a";	/*アイコン画像の指定*/
	font-weight: bold;
	margin-right: 1rem;	/*右側に空けるスペース*/
	flex-shrink: 0;
	color: var(--primary-color);	/*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
	transform: scale(1.5);	/*アイコンのサイズ1.4倍*/
}

/*アイコン（開いている場合）*/
.others-openclose2-parts.active::before {
	content: "\f057";	/*開いている時のアイコン画像*/
	color: #ff0000;		/*アイコンの色*/
}

/*回答*/
.others-openclose2-parts + * {
	padding: 0 1rem 1rem 3rem;	/*ボックス内の余白。上、右、下、左への順番。*/
}

css

js

others-overlay1

マウスオンで黒のオーバーレイが上スライドして消えるタイプ。

<h2 class="c">others-overlay1-parts</h2>

<div class="list-parts image1-parts">
<a href="#">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

<div class="list-parts image2-parts">
<a href="#">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

</div>

</section>

<p class="c">左右の余白をなくしたい場合は、<br>
others-overlay1-parts に<span class="color-check">bleed-x-parts</span>を追加して下さい。</p>

<div class="list-parts image1-parts">
<a href="#">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</a>
</div>

<div class="list-parts image2-parts">
<a href="#">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
</div>
</a>
</div>

</div>

</section>

html

/*others-overlay1-parts
---------------------------------------------------------------------------*/
/*２つのボックスを囲むブロック*/
.others-overlay1-parts {
	display: flex;
}
.others-overlay1-parts a {
	text-decoration: none;
	display: block;
}

/*ボックス１個あたり*/
.others-overlay1-parts .list-parts {
	flex: 1;
	text-align: center;
	position: relative;
	overflow-y: hidden;
}

/*テキストブロック*/
.others-overlay1-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;
	padding: 2rem;
}

/*h4見出し*/
.others-overlay1-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	letter-spacing: 0.05em;	/*文字間隔を少しだけ広く*/
}

/*h4見出し内のspan（小さな文字）*/
.others-overlay1-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.others-overlay1-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.others-overlay1-parts .image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.others-overlay1-parts .image2-parts {
	background: url("../images/2.jpg") no-repeat center center / cover;
}

/*マウスオン用のアニメーション*/
.others-overlay1-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.others-overlay1-parts .list-parts:hover::before {
	transform: translateY(100%);	/*マウスオンで半透明の黒を枠外へ出す。-100%にすると逆に移動します。*/
}

css

others-overlay2

マウスオンで黒のオーバーレイが横スライドして消えるタイプ。

<h2 class="c">others-overlay2-parts</h2>

<div class="list-parts image1-parts">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

<div class="list-parts image2-parts reverse">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ボックスにreverseを追加すると、このように逆配置になります。<br>
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

</div>

</section>

<p class="c">左右の余白をなくしたい場合は、<br>
others-overlay2-parts に<span class="color-check">bleed-x-parts</span>を追加して下さい。</p>

<div class="list-parts image1-parts">
<div class="text-parts">
<h4>Contact<span>お問い合わせ</span></h4>
<p>ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

<div class="list-parts image2-parts reverse">
<div class="text-parts">
<h4>Online Shop<span>オンラインショップ</span></h4>
<p>ボックスにreverseを追加すると、このように逆配置になります。<br>
ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。</p>
<p class="btn-parts"><a href="#">View More</a></p>
</div>
</div>

</div>

</section>

html

/*others-overlay2-parts
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.others-overlay2-parts .list-parts {
	position: relative;
	overflow: hidden;
	margin-bottom: 1px;	/*下に1pxのスペース*/
}

/*テキストブロック*/
.others-overlay2-parts .text-parts {
	position: relative;z-index: 1;
	color: #fff;	/*文字色*/
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);	/*文字の影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.5は色が50%出た状態。*/
	padding: 5vw;	/*余白。画面はば100% = 100vwです。*/
	width: 50%;	/*幅*/
}

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

/*テキストブロック*/
	.others-overlay2-parts .text-parts {
		width: 100%;	/*幅*/
	}

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

/*逆向き（テキスト右配置）*/
.others-overlay2-parts .list-parts.reverse .text-parts {
	margin-left: auto;
}

/*h4見出し*/
.others-overlay2-parts .text-parts h4 {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	font-size: min(56px, 5vw);	/*基本は5vwで、最大56pxまで*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	margin-top: 0;
	margin-bottom: 2rem;
}

/*h4見出し内のspan（小さな文字）*/
.others-overlay2-parts .text-parts h4 span {
	display: block;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/*段落（p）*/
.others-overlay2-parts .text-parts p {
	font-size: 0.85rem;	/*文字サイズ85%*/
}

/*1つ目（左）の背景画像*/
.others-overlay2-parts .image1-parts {
	background: url("../images/1.jpg") no-repeat center center / cover;
}

/*2つ目（右）の背景画像*/
.others-overlay2-parts .image2-parts {
	background: url("../images/3.jpg") no-repeat center center / cover;
}

/*ボタン*/
.others-overlay2-parts .btn-parts a {
	display: block;text-decoration: none;
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒のことで0.5は色が50%出た状態。*/
	color: #fff;	/*文字色*/
	padding: 0.5rem;	/*ボタン内の余白。0.5文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*ボタンのマウスオン時*/
.others-overlay2-parts .btn-parts a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広げる*/
}

/*マウスオン用のアニメーション*/
.others-overlay2-parts .list-parts::before {
	content: "";position: absolute;inset: 0;
	background: rgba(0,0,0,0.6);		/*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
	transition: transform 0.3s 0.1s;	/*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.others-overlay2-parts .list-parts:hover::before {
	transform: translateX(100%);	/*マウスオンで半透明の黒を右側へ出す*/
}
.others-overlay2-parts .list-parts.reverse:hover::before {
	transform: translateX(-100%);	/*マウスオンで半透明の黒を左側へ出す*/
}

css

others-free1

汎用的なレイアウト。

<h2 class="c">others-free1-parts</h2>
<p class="c">使いたいブロックの「list-parts」をコピペしてください。外側の「others-free1-parts」は必須です。<br>画面幅500px以下では全て１カラムになります。</p>

<div class="text-parts text-01-parts inview">
	<h4>タイトル</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-01-parts inview">
	<h4>reverse-partsを追加すると左右逆になります</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-01-parts inview">
	<h4>imgにshadow-partsをつけると薄い影がつきます</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-02-parts inview ">
	<h4>画像の外側ボックスに「bleed-left-parts」を追加すると、画面左に寄ります。</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

<div class="text-parts text-02-parts inview">
	<h4>画像の外側ボックスに「bleed-right-parts」を追加すると、画面右に寄ります。</h4>
	<p>美味しさと品質にこだわった、選りすぐりのグルメをセレクトしました。
	贅沢な和牛や新鮮なシーフード、農家直送の旬の野菜、心ときめくスイーツまで。
	特別な日のおもてなしにも、日々の食卓を豊かにする一品にも最適です。</p>
	<p>お気に入りの味を見つけて、もっと楽しく、もっと美味しい食の時間を始めませんか？<br>
	あなたの毎日を特別にする、とっておきのグルメをお届けします。</p>
	</div>

</div>

</div>

</div>

</div>

</section>

html

/*others-free1-parts（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス内のh4*/
.others-free1-parts h4{
	margin: 0;
	font-size: 1.1rem;
}

/*画像の影をつける場合*/
.shadow-parts {
	box-shadow: 4vw 4vw rgba(0,0,0,0.05);	/*右へ、下へ、0,0,0は黒のことで0.05は5%だけ色が出た状態。*/
}

/*画像と文字を囲むブロック*/
.others-free1-parts .list-parts {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12等分 */
	gap: 5vw; /*要素間の隙間。画面幅100% = 100vwです。お好みで。*/
	margin-bottom: 5vw;	/*下に空けるスペース。お好みで。*/
	grid-auto-flow: dense;
}
.others-free1-parts .list-parts:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.others-free1-parts .image-parts,
.others-free1-parts .text-parts {
	align-self: center;
	position: relative;
}

/*imageのみの設定*/
.others-free1-parts .image-parts {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.others-free1-parts .text-parts {
	grid-column: 1 / -1;
}

/*image-wide（横長で使う場合）*/
.others-free1-parts .image-wide-parts {
	grid-column: 1 / -1;
}

/*image-01-parts*/
.others-free1-parts .image-01-parts {
	grid-column: 8 / -1;
}
/*.text-01-parts*/
.others-free1-parts .text-01-parts {
	grid-column: 1 / 8;
}
/*image-01-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .image-01-parts {
	grid-column: 1 / 6;
}
/*text-01-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .text-01-parts {
	grid-column: 6 / -1;
}

/*image-02-parts*/
.others-free1-parts .image-02-parts {
	grid-column: 1 / 10;
}
/*text-02*/
.others-free1-parts .text-02-parts {
	grid-column: 1 / 10;
}
/*image-02-parts（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .image-02-parts {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.others-free1-parts .list-parts.reverse-parts .text-02-parts {
	grid-column: 4 / -1;
}

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

/*画像と文字を囲むブロック*/
	.others-free1-parts .list-parts {
		display: block;
		margin-bottom: 3rem;
	}
	
	}/*追加指定ここまで*/

css

others-bg-slideup-movie1

スクロール量と少しずれて背景動画が動きます。

<h2>others-bg-slideup-movie1</h2>
<p>スクロールとともに動画が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup-movie1</h2>
<p>動画の色そのまま。</p>

</section>

<h2>others-bg-slideup-movie1 overlay</h2>
<p>動画に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup-movie1 overlay">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup-movie1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup-movie1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup-movie1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup-movie1 overlay bleed-x-parts">
<video class="scrollfx-move bgVideo" autoplay muted loop playsinline preload="metadata">
  <source src="images/movie.mp4" media="(max-width: 800px)" type="video/mp4">
  <source src="images/movie.mp4" type="video/mp4">
</video>
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup-movie1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup-movie1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup-movie1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup-movie1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

others-bg-slideup1

スクロール量と少しずれて背景画像が動きます。

<h2>others-bg-slideup1</h2>
<p>スクロールとともに画像が少し上にずれていくパララックス。<br>
微調整はjsで行うことができます。</p>

</section>

<h2>others-bg-slideup1</h2>
<p>画像の色そのまま。</p>

</section>

<h2>others-bg-slideup1 overlay</h2>
<p>画像に半透明の黒を重ね、上にテキスト配置。</p>

<div class="others-bg-slideup1 overlay">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

<h2>others-bg-slideup1 bleed-x-parts</h2>
<p>幅いっぱい確保したい場合は、others-bg-slideup1にbleed-x-partsを追加して下さい。</p>

</section>

<h2>others-bg-slideup1 overlay bleed-x-parts</h2>
<p>上のオーバーレイタイプ。</p>

<div class="others-bg-slideup1 overlay bleed-x-parts">
<img src="images/1.jpg" alt="" class="scrollfx-move">
<div class="text">
<h2 class="c">タイトル</h2>
<p class="c">ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p>
</div>
</div>

</section>

html

/*画像・動画がupするパララックス
---------------------------------------------------------------------------*/
/*ブロック全体*/
.others-bg-slideup1 {
	position: relative;
	height: 30rem;	/*高さ。30文字分。pxやアスペクト比でもOK。*/
	overflow: hidden;
}

/*画像・動画を暗くしたい場合はhtml側に.overlayを追加する*/
.others-bg-slideup1.overlay::before {
	content: "";
	position: absolute;z-index: 1;
	inset: 0;
	background-color: rgba(0,0,0,0.5);	/*重ねる色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*動かすための設定。設定本体は、jsの「▼ここだけ調整（全ブロック共通）」の数行で調整できます。*/
.scrollfx-move {
	--fx-extra: 240px;	/*JSでまとめて上書き*/
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	width: 100%;
	height: calc(100% + var(--fx-extra));
	object-fit: cover;
	will-change: transform;
	transform: translate3d(0,-50%,0);
}

/* テキストを天地左右中央 */
.others-bg-slideup1 .text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 1rem 10vw;	/*ボックス内の余白。上下に１文字分、左右にウィンドウ幅の10%ずつ。*/
	color: #fff;	/*文字色*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

css

//===============================================================
// 画像・動画アップのパララックス
//===============================================================
(() => {
  "use strict";

const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduceMotion) return;

/* =========================================================
    ▼ここだけ調整（全ブロック共通）
  ========================================================= */
  const maxMove     = 80;   // px：上下に動く最大量（大きいほど動く）
  const speed       = 1;    // 倍率：0.7で弱め、1.3で強め
  const dir         = 1;    // 1=通常 / -1=逆方向
  const extraHeight = 240;  // px：黒背景が見える時に増やす（目安：maxMove*2より大きく）
  /* ========================================================= */

const boxes = Array.from(document.querySelectorAll(".others-bg-slideup1"));
  if (!boxes.length) return;

if (!items.length) return;

const clamp01 = n => (n < 0 ? 0 : (n > 1 ? 1 : n));

let vh = window.innerHeight || 0;
  let ticking = false;

function measure(){
    vh = window.innerHeight || 0;
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;

items.forEach(item => {
      const r = item.box.getBoundingClientRect();
      item.top = r.top + scrollY;
      item.height = r.height || 0;
    });

requestTick();
  }

function update(){
    ticking = false;

const scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
    const viewBottom = scrollY + vh;

items.forEach(item => {
      const denom = (vh + item.height) || 1;
      const p = clamp01((viewBottom - item.top) / denom); // 0..1
      const t = (p - 0.5) * 2; // -1..+1
      const y = t * maxMove * speed * dir;

item.move.style.transform = `translate3d(0, calc(-50% + ${y.toFixed(2)}px), 0)`;
    });
  }

function requestTick(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(update);
  }

window.addEventListener("scroll", requestTick, { passive: true });

let resizeTimer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(measure, 100);
  });

window.addEventListener("load", measure);
})();

js

list-yoko-scroll2

縦にスクロール中に横スクロールしだすパーツ。ウィンドウに対して画像高さ100%。

<h2>list-yoko-scroll2-parts（ウィンドウに対して画像高さ100%タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>画像によっては非常に縦長にトリミングされる場合もあるので、注意して下さい。画像を見せるというより、装飾要素向き。しっかり画像を見せたい場合は、別cssパターン（list-yoko-scroll3）をご利用下さい。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll2-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll2-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll2-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.list-yoko-scroll2-parts .hscroll1-track {
	display: flex;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll2-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	height: 100%;
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll2-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll2-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll2-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll2-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll2-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

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

/*各画像*/
	.list-yoko-scroll2-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll2-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll2-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

list-yoko-scroll3

縦にスクロール中に横スクロールしだすパーツ。画像のアスペクト比指定タイプ。

<h2>list-yoko-scroll3-parts（画像のアスペクト比指定タイプ）</h2>
<ul class="mb3rem">
<li>デモではアクションが確認できるよう、sectionにインラインスタイルを直接指定しています。実際にはこのsectionは使わないで下さい。無駄な余白が発生します。</li>
<li>横スクロールの速度は、cssのheight: 300vh;の数値で変動します。html側のdata-speed（0.5=slow / 1=normal / 2=fast）でも変化しますが、cssの方が調整幅が広いです。中身の画像数にあわせて調整してみて下さい。</li>
<li>アスペクト比の変更はcssでできます。</li>
<li>画面幅いっぱいに使いたい場合は、bleed-x-partsを追加して下さい。（class="list-yoko-scroll2-parts <span class="color-check">bleed-x-parts</span>"）</li>
</ul>

</div>

</div>

</section>

html

/*list-yoko-scroll3-parts
---------------------------------------------------------------------------*/
/*全体を囲むボックス*/
.list-yoko-scroll3-parts {
	position: relative;
	height: 300vh;		/*縦スクロール量（この高さ分スクロールすると横が端まで動く）*/
}

/*横スクロールブロック*/
.list-yoko-scroll3-parts .hscroll1-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.list-yoko-scroll3-parts .hscroll1-track {
	display: flex;
	align-items: center;
	height: 100%;
	will-change: transform;
}

/*各画像*/
.list-yoko-scroll3-parts .hscroll1-track > div {
	flex-shrink: 0;
	width: 45vw;	/*1枚あたりの幅（画面幅の45%）*/
	aspect-ratio: 1;	/*ここで比率固定。4 / 3などにすればやや横長になります。*/
	padding-inline: 0.5rem;	/*左右に0.5文字分の余白*/
}
.list-yoko-scroll3-parts .hscroll1-track > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 5px;	/*角を丸区する指定。*/
}

/*スキップボタン*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] {
	position: absolute;
	bottom: 2rem;	/*下からの2文字分の場所に配置*/
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	background: var(--bg-inverse-color);	/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
	border: none;
	padding: 0.5rem 1.5rem;	/*上下に0.5文字分、左右に1.5文字分の余白*/
	font-size: 0.8rem;	/*文字サイズ80%*/
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts button[aria-label="skip gallery"].is-visible {
	opacity: 1;
	visibility: visible;
}
/*下矢印のアイコン（Font Awesome）*/
.list-yoko-scroll3-parts button[aria-label="skip gallery"] i {
	margin-left: 0.3em;	/*テキストとアイコンとの間に空けるスペース。0.3文字分。*/
	font-size: 0.7rem;	/*アイコンサイズ70%*/
}

/*進捗バー*/
.list-yoko-scroll3-parts .hscroll1-progress {
	position: absolute;
	bottom: max(16px, env(safe-area-inset-bottom));	/*下からの配置場所*/
	left: 0;
	width: 100%;
	height: 3px;	/*バーの太さ*/
	z-index: 2;
	background: var(--border-color);	/*バーのベース色。theme.cssのborder-colorを読み込みます。*/
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;	/*表示切替のアニメーション*/
}
.list-yoko-scroll3-parts .hscroll1-progress.is-visible {
	opacity: 1;
	visibility: visible;
}
.list-yoko-scroll3-parts .hscroll1-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--primary-color);	/*バーの色をtheme.cssのprimary-colorにする*/
	transition: width 0.05s linear;		/*幅の変化を滑らかに*/
}

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

/*各画像*/
	.list-yoko-scroll3-parts .hscroll1-track > div {
		width: 80vw;	/*1枚あたりの幅の変更*/
	}
	
	}/*追加指定ここまで*/

css

//===============================================================
//	list-yoko-scroll3-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

$('.list-yoko-scroll3-parts').each(function(){

var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

/* スクロール処理 */
		$(window).on('scroll resize', function(){

var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

});

js

deco-kazaritext

装飾用のテキスト。背景パーツとセットで使うと統一感が出ます。

<h2>deco-kazaritext-parts</h2>
<p>大きなテキストの装飾です。背景色がついたsectionの開始タグの直前に入れて下さい。</p>

</section>

<div class="deco-kazaritext-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>deco-kazaritext-parts</h2>
<p>デフォルト。</p>
</section>

<div class="deco-kazaritext-parts primary-parts c">Why Choose Us</div>
<section class="bg-parts bg1-primary-parts">
<h2>deco-kazaritext-parts primary-parts c</h2>
<p>primary色。最後の「c」はテキストをセンタリングする指定です。</p>
</section>

<div class="deco-kazaritext-parts light-parts r">Why Choose Us</div>
<section class="bg-parts bg1-light-parts">
<h2>deco-kazaritext-parts light-parts r</h2>
<p>light色。最後の「r」はテキストを右寄せする指定です。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-accent-parts">
<h2>deco-kazaritext-parts accent-parts</h2>
<p>accent色。</p>
</section>

<div class="deco-kazaritext-parts accent-parts">Why Choose Us</div>
<section class="bg-parts bg1-parts">
<h2>別々の色を組み合わせてもOK</h2>
<p>それぞれ独立した指定なので、好きに組み合わせて下さい。</p>
</section>

html

/*大きなテキストの飾り文字
---------------------------------------------------------------------------*/
/*共通*/
.deco-kazaritext-parts {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	line-height: 1;
	font-size: 8vw;	/*文字サイズ。画面幅100% = 100vwです。*/
	margin-bottom: -6.5vw;	/*文字の配置場所。本来の場所より上にずらす。*/
	position: relative;z-index: -1;	/*背景色と重なった部分が上に出ないように。もし上に出したいならこの１行を削除。*/
}

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

.deco-kazaritext-parts {
		margin-bottom: -3.5vw;	/*文字の配置場所の微調整。*/
	}

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

/*primary*/
.deco-kazaritext-parts.primary-parts {
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
}
/*light*/
.deco-kazaritext-parts.light-parts {
	color: var(--light-color);	/*文字色。theme.cssのlight-colorを読み込みます。*/
}
/*accent*/
.deco-kazaritext-parts.accent-parts {
	color: var(--accent-color);	/*文字色。theme.cssのaccent-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background: var(--light-color);		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);		/*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
	padding-bottom: var(--content-space-l);	/*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}

css

deco-slideimg1

サンプル画像を先にDLし、imagesに入れて下さい。deco-slideimg2をテキスト画像にしたタイプ。

<h2>deco-slideimg1-parts</h2>
<ul>
<li>※こちらを試す際は、<a href="ttps://template-party.com/parts-new/deco/deco-slideimg1/images.zip">サンプル画像を先にDL</a>し、imagesに入れて下さい。</li>
<li>「deco-slideimg1-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 2) * 50 + 's';」の行の「50」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅の異なる画像を配置すると、サイズが変わってしまうので注意。</p>
<div class="deco-slideimg1-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/2.png" alt=""></a></div>
</div>
</div>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg1-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
<div><a href="#"><img src="images/1.png" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 2) * 50 + 's';
        var slideWidth = (divCount / 2) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2

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

<h2>deco-slideimg2-parts</h2>
<ul>
<li>「deco-slideimg2-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg2-circle

deco-slideimg2の円形タイプです。

<h2>deco-slideimg2-circle-parts</h2>
<ul>
<li>「deco-slideimg2-circle-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg2-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg2-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg2-circle-parts + .deco-slideimg2-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg2-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.deco-slideimg2-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg2-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg2-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg2-circle-parts .rtl-parts, .deco-slideimg2-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg2-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg2-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg2-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3

deco-slideimg2の段違いレイアウトです。

<h2>deco-slideimg3-parts</h2>
<ul>
<li>「deco-slideimg3-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-parts + .deco-slideimg3-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-parts .rtl-parts, .deco-slideimg3-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slideimg3-circle

deco-slideimg3-circleの円形タイプです。

<h2>deco-slideimg3-circle-parts</h2>
<ul>
<li>「deco-slideimg3-circle-parts」には必ず「４枚以上」で「偶数」の画像を配置して下さい。</li>
<li>「rtl-parts」は右から左へ移動します。「ltr-parts」は左から右へ移動します。</li>
<li>速度調整は、jsの「var animationTime = (divCount / 4) * 40 + 's';」の行の「40」の数字です。大きいほどゆっくりになります。</li>
</ul>

<p class="c">幅いっぱい使いたい場合は、bleed-x-partsを追加する。</p>
<div class="deco-slideimg3-circle-parts bleed-x-parts">
<div class="img-parts rtl-parts">
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/1s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/2s.jpg" alt=""></a></div>
<div><a href="#"><img src="images/3s.jpg" alt=""></a></div>
</div>
</div>

</section>

html

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg3-circle-parts {
	overflow-x: hidden;
}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg3-circle-parts + .deco-slideimg3-circle-parts {
	margin-top: 1rem;
}

/*画像たちを囲むブロック*/
.deco-slideimg3-circle-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*段違いに配置（偶数版目だけ上に２文字分のスペースをとる）*/
.deco-slideimg3-circle-parts .img-parts div:nth-of-type(even) {
	margin-top: 2rem;
}

/*画像1個あたり*/
.deco-slideimg3-circle-parts .img-parts > div {
	padding: 0 0.5rem;	/*左右に0.5文字分の余白*/
}
.deco-slideimg3-circle-parts .img-parts > div > a {
	display: block;
	aspect-ratio: 1 / 1;	/*正方形にする*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
}
.deco-slideimg3-circle-parts .img-parts img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg3-circle-parts .rtl-parts, .deco-slideimg3-circle-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg3-circle-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg3-circle-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

css

//===============================================================
// サムネイルスライドショー
//===============================================================
$(document).ready(function() {
    // 各 .img-parts を個別に処理
    $('.deco-slideimg3-circle-parts .img-parts').each(function() {
        var $imgParts = $(this);
        var $divs = $imgParts.children('div');
        var divCount = $divs.length;

// 各 div の幅を計算
        var divWidth = 100 / (divCount * 2);

// サムネイルの枚数に応じてアニメーション時間と幅を計算
        var animationTime = (divCount / 4) * 40 + 's';
        var slideWidth = (divCount / 4) * 200 + '%';

// 各 div に幅を設定
        $divs.css({
            'flex': '0 0 ' + divWidth + '%',
            'width': divWidth + '%'
        });

// .img-parts に animation と width を設定
        $imgParts.css({
            'animation-duration': animationTime,
            'width': slideWidth
        });

// 初期ロード時に子要素を複製して追加
        $divs.clone().appendTo($imgParts);

// サムネイルにマウスが乗った時にアニメーションを一時停止
        $imgParts.on('mouseenter', function() {
            $(this).css('animation-play-state', 'paused');
        });

// サムネイルからマウスが離れた時にアニメーションを再開
        $imgParts.on('mouseleave', function() {
            $(this).css('animation-play-state', 'running');
        });
    });
});

js

deco-slidetext1

テキストを直接htmlに置いたものを横スライドさせたタイプ。

html

css

js

form1-simple（※ベータ版）

お名前、メールアドレス、メッセージのみのシンプルフォーム。
プログラムのDLと簡単な設定が必要です。

<h2>form1-simple</h2>
<ul>
<li>お名前、メールアドレス、お問い合わせ内容、の３項目限定シンプル版です。<a href="https://template-party.com/parts-new/_about/form1-simple.html" target="_blank">使い方マニュアル</a>。</li>
<li><span class="color-check">公開したばかりのベータ版なので十分に動作確認を行なって下さい。</span>不具合を発見されましたらお手数ですが<a href="https://template-party.com/bbs-new/" target="_blank">サポート掲示板</a>からお知らせ下さい。</li>
</ul>

</section>

<h2 class="c">お問い合わせフォーム</h2>

<div class="form-success-box" hidden>
<h3>送信ありがとうございました</h3>
<p>内容を確認のうえ、担当者よりご連絡いたします。</p>
</div>

<form class="js-ajax-form h-adr" action="form.php" method="post" enctype="multipart/form-data" novalidate data-preview-privacy="false" data-preview-attachment="false">
<span class="p-country-name" style="display:none;">Japan</span>
<input type="hidden" name="csrf_token" value="">

<div class="hp-field" aria-hidden="true">
<label for="website">この欄は入力しないでください</label>
<input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
</div>

<div class="form-row">
<label class="form-label" for="email">
メールアドレス
<span class="required-badge">必須</span>
</label>
<input type="email" name="email" id="email" placeholder="例：info@example.com" inputmode="email" autocomplete="email">
</div>

<div class="form-row">
<label class="form-label" for="message">
お問い合わせ内容
<span class="required-badge">必須</span>
</label>
<textarea name="message" id="message" rows="10" placeholder="ご相談内容をご記入ください。"></textarea>
</div>

<div class="form-row js-privacy-row">
<label class="check-single">
<input type="checkbox" name="privacy_consent" value="1">
<span>個人情報保護方針に同意する</span>
</label>
</div>

<div class="form-actions">
<button type="submit" class="submit-button">この内容で送信する</button>
</div>
</form>
</div>

</section>

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

html

/*form1用
---------------------------------------------------------------------------*/
.contact-form-block {
    width: 100%;
}

.form-global-error {
    border: 1px solid #f0c2c2;
    background: #fff4f4;
    color: #9b2e2e;
}

.js-ajax-form[hidden] {
    display: none !important;
}

.form-row + .form-row {
    margin-top: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 700;
    color: #1f2947;
    line-height: 1.5;
}

.required-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: #d94c4c;
    vertical-align: middle;
}

.contact-form-inner input[type="text"],
.contact-form-inner input[type="email"],
.contact-form-inner input[type="file"],
.contact-form-inner select,
.contact-form-inner textarea {
    width: 100%;
    appearance: none;
    border: 1px solid #d6dbeb;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    background: #fff;
    font: inherit;
    line-height: 1.6;
    color: #222;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
}

.contact-form-inner input[type="file"] {
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.contact-form-inner input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background: #eef2ff;
    color: #2f55d4;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-form-inner textarea {
    resize: vertical;
    min-height: 12em;
}

.contact-form-inner input[type="text"]:focus,
.contact-form-inner input[type="email"]:focus,
.contact-form-inner input[type="file"]:focus,
.contact-form-inner select:focus,
.contact-form-inner textarea:focus {
    outline: none;
    border-color: #5d7bff;
    box-shadow: 0 0 0 4px rgba(93, 123, 255, 0.12);
}

.select-inline-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.select-inline {
    width: 100%;
}

.check-group,
.radio-group {
    display: grid;
    gap: 0.7rem;
}

.check-item,
.radio-item,
.check-single {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.6;
}

.check-item input,
.radio-item input,
.check-single input {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.form-help-text,
.form-file-reset-text {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
}

.form-row.is-error input[type="text"],
.form-row.is-error input[type="email"],
.form-row.is-error input[type="file"],
.form-row.is-error select,
.form-row.is-error textarea {
    border-color: #d94c4c;
    background: #fff8f8;
}

.form-row.is-error .form-label,
.form-row.is-error .check-single,
.form-row.is-error .check-item,
.form-row.is-error .radio-item {
    color: #972f2f;
}

.form-error-text {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #b23838;
}

.form-actions {
    margin-top: 1.8rem;
	text-align: center;
}

/*個人情報同意チェックを中央寄せ*/
.form-row.js-privacy-row .check-single {
	display: flex;
	width: fit-content;
	margin: 0 auto;
	align-items: center;
	gap: 0.5rem;
}

/*送信ボタン*/
.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13em;
    min-height: 56px;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #2f55d4 0%, #5d7bff 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 12px 24px rgba(47, 85, 212, 0.18);
}

.submit-button:hover {
    transform: translateY(-1px);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .contact-form-inner {
        border-radius: 22px;
    }

.select-inline-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.js-date-select-group[data-date-mode="ymd"] .select-inline-group {
        grid-template-columns: 1fr;
    }

.submit-button {
        width: 100%;
        min-width: 0;
    }
}

/*郵便番号・都道府県はPCで少し短くする*/
@media (min-width: 768px) {

.h-adr input[name="postal_code"],
	.h-adr input[name="address_pref"] {
		width: min(100%, 10rem);
	}

}

/*プルダウンを見た目でわかりやすくする*/
.h-adr select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.8rem auto;
	cursor: pointer;
}

css

//===============================================================
// form1用
//===============================================================
(function() {
    "use strict";

function initAjaxForm(form) {
        var actionUrl = form.getAttribute("action") || "form.php";
        var submitButton = form.querySelector('button[type="submit"]');
        var globalErrorBox = findSiblingBox(form, ".form-global-error");
        var successBox = findSiblingBox(form, ".form-success-box");
        var privacyRow = form.querySelector(".js-privacy-row");
        var attachmentRow = form.querySelector(".js-attachment-row");
        var attachmentInput = attachmentRow ? attachmentRow.querySelector('input[type="file"]') : null;
        var csrfInput = form.querySelector('input[name="csrf_token"]');

if (!submitButton || !csrfInput) {
            return;
        }

initDateSelectGroups(form);
        fetchInitData();

form.addEventListener("submit", function(event) {
            event.preventDefault();

/* ローカルの通常プレビュー（file://）では送信しない */
            if (window.location.protocol === "file:") {
                return;
            }

clearErrors();
            hideGlobalError();

submitButton.disabled = true;

var hadSelectedFile = attachmentInput && attachmentInput.files && attachmentInput.files.length > 0;
            var formData = new FormData(form);

fetch(actionUrl, {
                method: "POST",
                body: formData,
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(json) {
                if (json && json.csrfToken) {
                    csrfInput.value = json.csrfToken;
                }

if (json && json.ok) {
                    showSuccess();
                    return;
                }

resetAttachmentOnError(hadSelectedFile);

if (json && json.fieldErrors) {
                    applyFieldErrors(json.fieldErrors);
                }

if (json && json.formError) {
                    showGlobalError(json.formError);
                }
            })
            .catch(function() {
                resetAttachmentOnError(false);
                showGlobalError("送信に失敗しました。時間をおいて再度お試しください。");
            })
            .finally(function() {
                submitButton.disabled = false;
            });
        });

function fetchInitData() {
            /* ローカルの通常プレビュー（file://）では初期化通信を行わず、HTML側のプレビュー設定を使う */
            if (window.location.protocol === "file:") {
                var previewPrivacy = form.getAttribute("data-preview-privacy") === "true";
                var previewAttachment = form.getAttribute("data-preview-attachment") === "true";

togglePrivacyRow(previewPrivacy);
                toggleAttachmentRow(previewAttachment);
                return;
            }

fetch(actionUrl + "?action=init", {
                method: "GET",
                headers: {
                    "X-Requested-With": "XMLHttpRequest"
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(json) {
                if (!json || !json.ok) {
                    showGlobalError("フォームの初期化に失敗しました。ページを再読み込みしてください。");
                    return;
                }

if (json.csrfToken) {
                    csrfInput.value = json.csrfToken;
                }

togglePrivacyRow(json.privacyConsentEnabled !== false);
                toggleAttachmentRow(json.attachmentEnabled !== false);
            })
            .catch(function() {
                showGlobalError("フォームの初期化に失敗しました。ページを再読み込みしてください。");
            });
        }

function togglePrivacyRow(isEnabled) {
            if (!privacyRow) {
                return;
            }

privacyRow.hidden = !isEnabled;

var privacyInput = privacyRow.querySelector('input[name="privacy_consent"]');
            if (!privacyInput) {
                return;
            }

if (!isEnabled) {
                privacyInput.checked = false;
            }

privacyInput.disabled = !isEnabled;
        }

function toggleAttachmentRow(isEnabled) {
            if (!attachmentRow) {
                return;
            }

attachmentRow.hidden = !isEnabled;

if (!attachmentInput) {
                return;
            }

if (!isEnabled) {
                attachmentInput.value = "";
            }

attachmentInput.disabled = !isEnabled;
        }

function clearErrors() {
            var rows = form.querySelectorAll(".form-row");
            rows.forEach(function(row) {
                row.classList.remove("is-error");

row.querySelectorAll(".form-error-text, .form-file-reset-text").forEach(function(message) {
                    message.remove();
                });
            });
        }

function applyFieldErrors(fieldErrors) {
            var firstRow = null;
            var firstInput = null;

Object.keys(fieldErrors).forEach(function(fieldName) {
                var input = form.querySelector('[name="' + cssEscape(fieldName) + '"]') ||
                            form.querySelector('[name="' + cssEscape(fieldName) + '[]"]');
                var row = input ? input.closest(".form-row") : null;

if (!row) {
                    row = form.querySelector('.js-date-select-group[data-field-name="' + cssEscape(fieldName) + '"]');
                    if (row) {
                        input = row.querySelector("select, input, textarea");
                    }
                }

if (!row) {
                    return;
                }

row.classList.add("is-error");

var error = document.createElement("p");
                error.className = "form-error-text";
                error.textContent = fieldErrors[fieldName];
                row.appendChild(error);

if (!firstRow) {
                    firstRow = row;
                    firstInput = input || null;
                }
            });

if (firstInput && typeof firstInput.focus === "function") {
                try {
                    firstInput.focus({ preventScroll: true });
                } catch (error) {
                    firstInput.focus();
                }
            }

if (firstRow) {
                firstRow.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        }

function resetAttachmentOnError(hadSelectedFile) {
            if (!attachmentRow || !attachmentInput) {
                return;
            }

if (attachmentInput.value !== "") {
                attachmentInput.value = "";
            }

if (!hadSelectedFile) {
                return;
            }

var note = document.createElement("p");
            note.className = "form-file-reset-text";
            note.textContent = "安全のため、添付ファイルは再選択してください。";
            attachmentRow.appendChild(note);
        }

function showGlobalError(message) {
            if (!globalErrorBox) {
                return;
            }

globalErrorBox.textContent = message;
            globalErrorBox.hidden = false;
            globalErrorBox.scrollIntoView({
                behavior: "smooth",
                block: "center"
            });
        }

function hideGlobalError() {
            if (!globalErrorBox) {
                return;
            }

globalErrorBox.hidden = true;
            globalErrorBox.textContent = "";
        }

function showSuccess() {
            form.hidden = true;
            hideGlobalError();

if (successBox) {
                successBox.hidden = false;
                successBox.scrollIntoView({
                    behavior: "smooth",
                    block: "center"
                });
            }
        }
    }

function initDateSelectGroups(scope) {
        var groups = scope.querySelectorAll(".js-date-select-group");

groups.forEach(function(group) {
            var mode = group.getAttribute("data-date-mode");
            var yearSelect = group.querySelector('[data-date-part="year"]');
            var monthSelect = group.querySelector('[data-date-part="month"]');
            var daySelect = group.querySelector('[data-date-part="day"]');
            var startYear = parseInt(group.getAttribute("data-year-start"), 10);
            var endYear = parseInt(group.getAttribute("data-year-end"), 10);

if (monthSelect) {
                populateNumberSelect(monthSelect, 1, 12, "月を選択", "月");
            }

if (yearSelect) {
                if (isNaN(startYear)) {
                    startYear = 1900;
                }
                if (isNaN(endYear)) {
                    endYear = new Date().getFullYear();
                }

populateNumberSelect(yearSelect, startYear, endYear, "年を選択", "年", true);
            }

if (daySelect) {
                updateDayOptions();
            }

if (monthSelect) {
                monthSelect.addEventListener("change", updateDayOptions);
            }

if (yearSelect && mode === "ymd") {
                yearSelect.addEventListener("change", updateDayOptions);
            }

function updateDayOptions() {
                if (!daySelect) {
                    return;
                }

var maxDay = 31;
                var month = monthSelect ? parseInt(monthSelect.value, 10) : NaN;
                var year = yearSelect ? parseInt(yearSelect.value, 10) : new Date().getFullYear();

if (!isNaN(month)) {
                    if (isNaN(year)) {
                        year = new Date().getFullYear();
                    }
                    maxDay = new Date(year, month, 0).getDate();
                }

populateNumberSelect(daySelect, 1, maxDay, "日を選択", "日");
            }
        });
    }

function populateNumberSelect(select, start, end, placeholder, suffix, descending) {
        if (!select) {
            return;
        }

var currentValue = select.value;
        var numbers = [];
        var i;

if (descending) {
            for (i = end; i >= start; i -= 1) {
                numbers.push(i);
            }
        } else {
            for (i = start; i <= end; i += 1) {
                numbers.push(i);
            }
        }

select.innerHTML = "";

var placeholderOption = document.createElement("option");
        placeholderOption.value = "";
        placeholderOption.textContent = placeholder;
        select.appendChild(placeholderOption);

numbers.forEach(function(number) {
            var option = document.createElement("option");
            option.value = String(number);
            option.textContent = String(number) + suffix;
            select.appendChild(option);
        });

if (currentValue !== "" && hasOptionValue(select, currentValue)) {
            select.value = currentValue;
        } else {
            select.value = "";
        }
    }

function hasOptionValue(select, value) {
        var options = Array.prototype.slice.call(select.options);
        return options.some(function(option) {
            return option.value === value;
        });
    }

function findSiblingBox(form, selector) {
        var parent = form.parentElement;
        if (!parent) {
            return null;
        }
        return parent.querySelector(selector);
    }

function cssEscape(value) {
        if (window.CSS && typeof window.CSS.escape === "function") {
            return window.CSS.escape(value);
        }
        return String(value).replace(/"/g, '\\"');
    }

document.addEventListener("DOMContentLoaded", function() {
        var forms = document.querySelectorAll(".js-ajax-form");
        forms.forEach(initAjaxForm);
    });
})();

js

form1-full（※ベータ版）

form1-simpleのフルセット版。項目も自由に増やせます。
プログラムのDLと簡単な設定が必要です。

<h2>form1-full</h2>
<ul>
<li>form1-simpleのフルセット版。<a href="https://template-party.com/parts-new/_about/form1-full.html" target="_blank">使い方マニュアル</a>。</li>
<li><span class="color-check">公開したばかりのベータ版なので十分に動作確認を行なって下さい。</span>不具合を発見されましたらお手数ですが<a href="https://template-party.com/bbs-new/" target="_blank">サポート掲示板</a>からお知らせ下さい。</li>
</ul>

</section>

<h2 class="c">お問い合わせフォーム</h2>

<div class="form-success-box" hidden>
<h3>送信ありがとうございました</h3>
<p>内容を確認のうえ、担当者よりご連絡いたします。</p>
</div>

<form class="js-ajax-form h-adr" action="form.php" method="post" enctype="multipart/form-data" novalidate data-preview-privacy="false" data-preview-attachment="false">
<span class="p-country-name" style="display:none;">Japan</span>
<input type="hidden" name="csrf_token" value="">

<div class="hp-field" aria-hidden="true">
<label for="website">この欄は入力しないでください</label>
<input type="text" name="website" id="website" tabindex="-1" autocomplete="off">
</div>

<div class="form-row">
<label class="form-label" for="email">
メールアドレス
<span class="required-badge">必須</span>
</label>
<input type="email" name="email" id="email" placeholder="例：info@example.com" inputmode="email" autocomplete="email">
</div>

<div class="form-row">
<label class="form-label" for="postal_code">
郵便番号
</label>
<input type="text" name="postal_code" id="postal_code" class="p-postal-code" inputmode="numeric" autocomplete="postal-code">
<p class="form-help-text">郵便番号を入力すると、対応する住所が自動入力されます。</p>
</div>

<div class="form-row">
<label class="form-label" for="address_line">
市区町村以下
</label>
<input type="text" name="address_line" id="address_line" class="p-locality p-street-address p-extended-address" autocomplete="street-address" placeholder="例：千代田区千代田1-1 ○○マンション101号室">
</div>
<div class="form-row">
<label class="form-label" for="category">
お問い合わせ種別
</label>
<select name="category" id="category">
<option value="">選択してください</option>
<option value="サービスについて">サービスについて</option>
<option value="見積もり依頼">見積もり依頼</option>
<option value="その他">その他</option>
</select>
</div>

<div class="form-row">
<span class="form-label">
ご希望内容
</span>
<div class="check-group">
<label class="check-item"><input type="checkbox" name="services[]" value="資料請求"> <span>資料請求</span></label>
<label class="check-item"><input type="checkbox" name="services[]" value="無料相談"> <span>無料相談</span></label>
<label class="check-item"><input type="checkbox" name="services[]" value="見積もり"> <span>見積もり</span></label>
</div>
</div>

<div class="form-row">
<span class="form-label">
ご希望の連絡方法
</span>
<div class="radio-group">
<label class="radio-item"><input type="radio" name="contact_method" value="メール"> <span>メール</span></label>
<label class="radio-item"><input type="radio" name="contact_method" value="電話"> <span>電話</span></label>
<label class="radio-item"><input type="radio" name="contact_method" value="どちらでも可"> <span>どちらでも可</span></label>
</div>
</div>

<div class="form-row js-date-select-group" data-date-mode="month-day" data-field-name="visit_day">
<span class="form-label">
ご希望月日
</span>
<div class="select-inline-group">
<div class="select-inline">
<select name="visit_day_month" id="visit_day_month" data-date-part="month" aria-label="ご希望月日の月">
<option value="">月を選択</option>
</select>
</div>
<div class="select-inline">
<select name="visit_day_day" id="visit_day_day" data-date-part="day" aria-label="ご希望月日の日">
<option value="">日を選択</option>
</select>
</div>
</div>
</div>

<div class="form-row">
<label class="form-label" for="message">
お問い合わせ内容
<span class="required-badge">必須</span>
</label>
<textarea name="message" id="message" rows="10" placeholder="ご相談内容をご記入ください。"></textarea>
</div>

<div class="form-row js-attachment-row">
<label class="form-label" for="attachment">添付ファイル（任意）</label>
<input type="file" name="attachment" id="attachment" accept=".pdf,.jpg,.jpeg,.png,.webp">
<p class="form-help-text">5MB以下 / pdf・jpg・jpeg・png・webp のみ対応</p>
</div>