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

その他のパーツ

sticky1

セクションが終わるまで左側の見出しが固定表示されるパーツ。

<div class="sticky1-parts">
<div class="title-parts">
<h2>タイトル１</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
</div>
</div>

<div class="sticky1-parts">
<div class="title-parts">
<h2>タイトル２</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
</div>
</div>

<div class="sticky1-parts">
<div class="title-parts">
<h2>タイトル３</h2>
</div>
<div class="text-parts">
<h3>h3見出し</h3>
<p>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
<p><img src="images/1.jpg" alt=""></p>
<p><img src="images/2.jpg" alt=""></p>
<p><img src="images/3.jpg" alt=""></p>
</div>
</div>

</section>

html

css

calender1

カレンダーです。カレンダーの設定はjsで、レイアウトはcssで調整できます。

html

/*カレンダー
---------------------------------------------------------------------------*/
/*カレンダーブロック全体*/
#calendar1-parts {
	margin-bottom: 1rem;	/*下に1文字分空ける。「定休日」と書いてある一番下のブロックとの間の余白です。*/
}

/*カレンダーテーブル*/
.calendar1-parts {
	width: 100%;
}

/*年・月を表示しているブロック*/
.calendar1-parts caption {
	font-weight: bold;	/*太字*/
	margin-bottom: 5px;	/*下に空けるスペース*/
}

/*前月、次月の矢印アイコン（Font Awesome使用。アイコン自体はjsで直接指定しています。）*/
.calendar1-parts caption i {
	opacity: 0;	/*リンクがないので、透明にしておく*/
	margin: 0 1rem;	/*上下、左右へ空けるスペース*/
}

/*前月、次月の矢印アイコンでリンクがある場合の追加設定*/
.calendar1-parts caption a i {
	opacity: 1;		/*色を100%出す*/
	color: #999;	/*文字色*/
}

/*カレンダー内のth(曜日)とtd(日付)*/
.calendar1-parts th, .calendar1-parts td {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	text-align: center;		/*テキストをセンタリング*/
	padding: 5px;			/*ボックス内の余白*/
}

/*th(曜日)の上書き*/
.calendar1-parts th {
	background: #f0f0f0;	/*背景色*/
}

/*祝日*/
.calendar1-parts .holiday-parts {
	color: #FF0000;	/*文字色*/
}

/*日曜日*/
.calendar1-parts .sunday-parts {
	color: #FF0000;	/*文字色*/
}

/*定休日*/
.calendar1-parts .store-weekly-parts {
	background: #DDEEFF;	/*背景色*/
}

/*定休日（カレンダーブロックの外で使う場合）*/
.store-weekly-list-parts {
	background: #DDEEFF;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	transform: translateY(0.3rem);
	margin-right: 5px;
}

/*特別な日（特定の日に色をつけたい場合に使用します。）*/
.calendar1-parts .store-specific-parts {
	background: #EEFFDD;	/*背景色*/
}

/*特別な日（カレンダーブロックの外で使う場合）*/
.store-specific-list-parts {
	background: #EEFFDD;	/*背景色*/
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
	transform: translateY(0.3rem);
	margin-right: 5px;
}

css

//===============================================================
// カレンダー
//===============================================================
$(function() {
  // リンクで移動可能な期間（例：2025年～2026年）
  const minYear = 2025;
  const maxYear = 2026;
  
  // 祝日（年ごとに指定）削除、追加できます。
  const holidays = {
    "2025": {
      "01-01": true, // 元日
      "01-13": true, // 成人の日（年によって変動するので毎年確認して下さい）
      "02-11": true, // 建国記念の日
      "02-23": true, // 天皇誕生日
      "02-24": true, // 祝日法第3条第2項による休日
      "03-20": true, // 春分の日（年によって前後するので毎年確認して下さい）
      "04-29": true, // 昭和の日
      "05-03": true, // 憲法記念日
      "05-04": true, // みどりの日
      "05-05": true, // こどもの日
      "05-06": true, // 祝日法第3条第2項による休日
      "07-21": true, // 海の日（年によって変動するので毎年確認して下さい）
      "08-11": true, // 山の日
      "09-15": true, // 敬老の日（年によって変動するので毎年確認して下さい）
      "09-23": true, // 秋分の日（年によって前後するので毎年確認して下さい）
      "10-13": true, // スポーツの日（年によって変動するので毎年確認して下さい）
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
      "11-24": true, // 祝日法第3条第2項による休日
    },
    "2026": {
      "01-01": true, // 元日
      "01-12": true, // 成人の日（年によって変動するので毎年確認して下さい）
      "02-11": true, // 建国記念の日
      "02-23": true, // 天皇誕生日
      "03-20": true, // 春分の日（年によって前後するので毎年確認して下さい）
      "04-29": true, // 昭和の日
      "05-03": true, // 憲法記念日
      "05-04": true, // みどりの日
      "05-05": true, // こどもの日
      "05-06": true, // 祝日法第3条第2項による休日
      "07-20": true, // 海の日（年によって変動するので毎年確認して下さい）
      "08-11": true, // 山の日
      "09-21": true, // 敬老の日（年によって変動するので毎年確認して下さい）
      "09-22": true, // 祝日法第3条第2項による休日
      "09-23": true, // 秋分の日（年によって前後するので毎年確認して下さい）
      "10-12": true, // スポーツの日（年によって変動するので毎年確認して下さい）
      "11-03": true, // 文化の日
      "11-23": true, // 勤労感謝の日
    },
  };

// 毎週指定された定休日（曜日番号：0(日)～6(土)）削除、追加できます。
  const storeClosedWeekDays = {
    3: true, // 水曜日を定休日に設定した例
  };

// 特別な日（年ごとに指定）削除、追加できます。
  const storeClosedDates = {
    "2025": {
      "07-04": true,
      "12-10": true,
    },
    "2026": {
      "01-26": true,
    },
  };

// 毎週の定休日を、営業日にしたい場合の設定。定休日カラーがリセットされ平常日になります。
  const storeOpenDates = {
    "2025": {
      "04-23": true,
    },
    "2026": {
      "01-07": true,
    }
  };

// 現在の年月（グローバル変数として管理）
  const today = new Date();
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth(); // 0～11
  
  // 範囲外の場合は、設定範囲内に補正
  if(currentYear < minYear){
    currentYear = minYear;
    currentMonth = 0;
  } else if(currentYear > maxYear){
    currentYear = maxYear;
    currentMonth = 11;
  }

// カレンダー描画用の関数
  function renderCalendar(year, month) {
    // 対象年の祝日、特別な日、営業日オーバーライドのオブジェクト
    const currentHolidays = holidays[year] || {};
    const currentStoreClosedDates = storeClosedDates[year] || {};
    const currentStoreOpenDates = storeOpenDates[year] || {};
    
    // 曜日の名称（日本語）
    const weekDays = ["日", "月", "火", "水", "木", "金", "土"];
    
    // 当月初日・最終日
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const numDays = lastDay.getDate();
    const startDay = firstDay.getDay();
    
    let html = "<table class='calendar1-parts'>";
    
    // キャプションに前月・翌月のリンクを配置
    html += "<caption>";
    // 前月の計算
    const prevMonth = (month === 0) ? 11 : month - 1;
    const prevYear = (month === 0) ? year - 1 : year;
    if(prevYear >= minYear) {
      html += "<a href='#' id='prevMonth'><i class=\"fa-solid fa-angles-left\"></i></a>";
    } else {
      html += "<i class=\"fa-solid fa-angles-left\"></i>";
    }
    html += year + "年 " + (month + 1) + "月";
    // 翌月の計算
    const nextMonth = (month === 11) ? 0 : month + 1;
    const nextYear = (month === 11) ? year + 1 : year;
    if(nextYear <= maxYear) {
      html += "<a href='#' id='nextMonth'><i class=\"fa-solid fa-angles-right\"></i></a>";
    } else {
      html += "<i class=\"fa-solid fa-angles-right\"></i>";
    }
    html += "</caption>";
    
    // 曜日ヘッダー
    html += "<tr>";
    for (let i = 0; i < weekDays.length; i++){
      html += "<th>" + weekDays[i] + "</th>";
    }
    html += "</tr>";
    
    // 日付セルの生成
    let day = 1;
    for (let i = 0; i < 6; i++){
      html += "<tr>";
      for (let j = 0; j < 7; j++){
        if(i === 0 && j < startDay) {
          html += "<td></td>";
        } else if(day > numDays) {
          html += "<td></td>";
        } else {
          const m = ("0" + (month + 1)).slice(-2);
          const d = ("0" + day).slice(-2);
          const key = m + "-" + d;
          
          if(currentStoreClosedDates[key]){
            html += "<td class='store-specific-parts'>" + day + "</td>";
          } else if(currentStoreOpenDates[key]){
            if(currentHolidays[key]){
              html += "<td class='holiday-parts'>" + day + "</td>";
            } else if(j === 0){
              html += "<td class='sunday-parts'>" + day + "</td>";
            } else if(j === 6){
              html += "<td class='saturday-parts'>" + day + "</td>";
            } else {
              html += "<td>" + day + "</td>";
            }
          } else if(storeClosedWeekDays[j]){
            // 毎週指定された定休日
            html += "<td class='store-weekly-parts'>" + day + "</td>";
          } else if(currentHolidays[key]){
            // 祝日
            html += "<td class='holiday-parts'>" + day + "</td>";
          } else if(j === 0) {
            // 日曜日
            html += "<td class='sunday-parts'>" + day + "</td>";
          } else if(j === 6) {
            // 土曜日
            html += "<td class='saturday-parts'>" + day + "</td>";
          } else {
            html += "<td>" + day + "</td>";
          }
          day++;
        }
      }
      html += "</tr>";
      if(day > numDays) break;
    }
    html += "</table>";
    
    // カレンダー領域に出力
    $("#calendar1-parts").html(html);
    
    // 前月リンクのクリックイベント
    $("#prevMonth").click(function(e){
      e.preventDefault();
      if(prevYear < minYear) return;
      currentYear = prevYear;
      currentMonth = prevMonth;
      renderCalendar(currentYear, currentMonth);
    });
    
    // 翌月リンクのクリックイベント
    $("#nextMonth").click(function(e){
      e.preventDefault();
      if(nextYear > maxYear) return;
      currentYear = nextYear;
      currentMonth = nextMonth;
      renderCalendar(currentYear, currentMonth);
    });
  }
  
  // 初期描画
  renderCalendar(currentYear, currentMonth);
});

animation-spin1

svg画像を先にDLし、imagesに入れておいて下さい。円形にテキスト(svg)が回転する装飾用のアニメーション。

html

css

japan-map1

日本地図。

<h2>others-japan-map1</h2>
<ul>
<li>昔、１度だけ使った日本地図です。もったいないのでパーツに追加しました。色変更はcssでできます。</li>
</ul>

</ul>

</section>

html

/*日本地図
---------------------------------------------------------------------------*/
/*地図全体を囲むブロック*/
#japan-map1-parts {
	margin: 0;padding: 0;list-style: none;
	position: relative;
	font-size: 12px;	/*文字サイズ*/
	line-height: 1;		/*行間を狭く*/
	height: 800px;		/*ブロックの高さ*/
}

/*１つあたりの県の共通設定*/
#japan-map1-parts a {
	text-decoration: none;position: absolute;text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 7.5%;	/*幅*/
	height: 7%;		/*高さ*/
	color: #000;	/*文字色*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかす幅、0,0,0は黒の事で0.2は色が20%出た状態*/
	border-radius: 5px;	/*角を少しだけ丸く*/
}

/*マウスオン時にボックスの影を消す*/
#japan-map1-parts a:hover {
	box-shadow: none;
}

/*九州ブロック-------------------------------*/
#japan-map1-parts .kyusyu a {background: #f4c9e3;}

#japan-map1-parts .okinawa {left: 1%;bottom: 0px;}
#japan-map1-parts .kagoshima {left: 1%;bottom: 12%;width: 15.5% !important;}
#japan-map1-parts .kumamoto {left: 1%;bottom: 20%;}
#japan-map1-parts .miyazaki {left: 9%;bottom: 20%;}
#japan-map1-parts .nagasaki {left: 1%;bottom: 28%;}
#japan-map1-parts .oita {left: 9%;bottom: 28%;}
#japan-map1-parts .saga {left: 1%;bottom: 36%;}
#japan-map1-parts .fukuoka {left: 9%;bottom: 36%;}

/*四国ブロック-------------------------------*/
#japan-map1-parts .shikoku a {background: #dec3f4;}

#japan-map1-parts .kochi {left: 19%;bottom: 12%;}
#japan-map1-parts .ehime {left: 27%;bottom: 12%;}
#japan-map1-parts .kagawa {left: 19%;bottom: 20%;}
#japan-map1-parts .tokushima {left: 27%;bottom: 20%;}

/*中国ブロック-------------------------------*/
#japan-map1-parts .cyugoku a {background: #f4c7c3;}

#japan-map1-parts .yamaguchi {left: 19%;bottom: 30%;height: 15% !important;}
#japan-map1-parts .hiroshima {left: 27%;bottom: 30%;}
#japan-map1-parts .okayama {left: 35%;bottom: 30%;}
#japan-map1-parts .shimane {left: 27%;bottom: 38%;}
#japan-map1-parts .tottori {left: 35%;bottom: 38%;}

/*関西ブロック-------------------------------*/
#japan-map1-parts .kansai a {background: #f7daba;}

#japan-map1-parts .hyogo {left: 43%;bottom: 30%;height: 15% !important;}
#japan-map1-parts .kyoto {left: 51%;bottom: 38%;}
#japan-map1-parts .shiga {left: 59%;bottom: 38%;}
#japan-map1-parts .osaka {left: 51%;bottom: 30%;}
#japan-map1-parts .nara {left: 59%;bottom: 30%;}
#japan-map1-parts .mie {left: 59%;bottom: 22%;}
#japan-map1-parts .wakayama {left: 51%;bottom: 22%;}

/*中部ブロック-------------------------------*/
#japan-map1-parts .tyubu a {background: #f7f1ad;}

#japan-map1-parts .fukui {left: 59%;bottom: 46%;}
#japan-map1-parts .ishikawa {left: 59%;bottom: 54%;}
#japan-map1-parts .toyama {left: 67%;bottom: 46%;}
#japan-map1-parts .gifu {left: 67%;bottom: 38%;}
#japan-map1-parts .aichi {left: 67%;bottom: 30%;}
#japan-map1-parts .nigata {left: 67%;bottom: 54%;width: 15.5% !important;}
#japan-map1-parts .nagano {left: 75%;bottom: 46%;}
#japan-map1-parts .yamanashi {left: 75%;bottom: 38%;}
#japan-map1-parts .shizuoka {left: 75%;bottom: 30%;}

/*関東ブロック-------------------------------*/
#japan-map1-parts .kanto a {background: #cbefcf;}

#japan-map1-parts .kanagawa {left: 83%;bottom: 30%;}
#japan-map1-parts .tokyo {left: 83%;bottom: 38%;}
#japan-map1-parts .saitama {left: 83%;bottom: 46%;}
#japan-map1-parts .gunma {left: 91%;bottom: 46%;}
#japan-map1-parts .tochigi {left: 91%;bottom: 38%;}
#japan-map1-parts .ibaraki {left: 91%;bottom: 30%;}
#japan-map1-parts .chiba {left: 91%;bottom: 22%;}

/*東北ブロック-------------------------------*/
#japan-map1-parts .tohoku a {background: #bae6f7;}

#japan-map1-parts .fukushima {left: 83%;bottom: 54%;width: 15.5% !important;}
#japan-map1-parts .yamagata {left: 83%;bottom: 62%;}
#japan-map1-parts .miyagi {left: 91%;bottom: 62%;}
#japan-map1-parts .akita {left: 83%;bottom: 70%;}
#japan-map1-parts .iwate {left: 91%;bottom: 70%;}
#japan-map1-parts .aomori {left: 83%;bottom: 78%; width: 15.5% !important;}

/*北海道ブロック-------------------------------*/
#japan-map1-parts .hokkaido a {background: #b9c6f9;}

#japan-map1-parts .hokkaido a {left: 83%;bottom: 86%;width: 15.5% !important;height: 10% !important;}

css

cracker1

クラッカー画像を先にDKし、imagesに入れておいて下さい。動画を準備して頂ければ入れ替えもできます。

html

css

popup1

3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。

html

/*ポップアップ
---------------------------------------------------------------------------*/
#popup1-parts * {margin: 0;padding: 0;}

/*オーバーレイ効果（背後の画面を暗転させる場合）使う場合、ポップアップウィンドウの他に「popup1-overlay-parts」の１行が必要です。*/
#popup1-overlay-parts {
	display: none;
	position: fixed;z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5); /*ポップアップ外の色。0,0,0は黒のことで0.5は色が50%出た状態。*/
}

/*ポップアップウィンドウ*/
#popup1-parts {
	display: none;
	font-size: 0.9rem;	/*文字サイズ90%*/
	padding: 1rem 2rem;	/*上下、左右の余白*/
	position: fixed;z-index: 1001;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;		/*幅*/
	max-height: 50vh;	/*最大の高さ。画面の50%。*/
	overflow: auto;
	background: rgba(0,0,0,0.7);	/*背景色。0,0,0は黒のことで0.7は色が70%出た状態。*/
	color: #fff;					/*文字色*/
	border: 1px solid #333;			/*枠線の幅、線種、色*/
}

/*閉じるボタン*/
#popup1-parts .close-btn-parts {
	display: block;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	text-align: center;
	position: absolute;
	right: 0px;	/*ボックスの配置場所指定。rightなので右から0px。*/
	top: 0px;	/*ボックスの配置場所指定。topなので上から0px。*/
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
	cursor: pointer;
}

css

popup2

3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。

html

css

popup3

3秒後にポップアップ表示します。表示させるまでの秒数はjsで、レイアウトはcssで調整できます。

html

css

sns1

Font Awesomeを使用したSNSアイコンです。

<h2>others-sns1（SNSアイコン）</h2>
<p>制作時点でFont Awesomeにあった主なSNSアイコンを揃えました。<br>
使いたいものだけ残し、残りは削除して下さい。サイズや色はcssで調整できます。<br>
アイコンをセンタリングしたい場合は、html側の「sns1-parts」の部分を「sns1-parts center」に書き換えて下さい。<br>
<a href="https://template-party.com/tips/tips20211126_font_awesome.html">Font Awesomeの詳しい使い方はこちら。</a></p>

</section>

html

css

yoko-scroll

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

<h2>others-yoko-scroll</h2>

<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

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

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

/*ブロック内の１個あたり*/
.list-yoko-scroll-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) {

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

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

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

css

bg-slideup1

※１カラム専用
スクロール量と少しずれて背景画像が動きます。※画像は必ず縦長のものを用意して下さい。

<h2>others-bg-slideup</h2>

<ul class="disc">
<li>背景画像は「縦長」のものを準備して下さい。高さがテキスト量より少ない場合、移動しないので注意して下さい。</li>
<li>準備された背景画像の高さにより、スライド速度も変化します。（より高さがある方が早くなる）</li>
<li>外側の余白をなくしたい場合は<a href="https://template-party.com/parts/manual.html">こちらのマニュアル</a>をご覧下さい。</li>
</ul>

<div class="image-parts"></div>
<div class="text-parts">
<p>ここにテキストを入れます。サンプルテキスト。テキストの量に応じて背景画像の高さも変わります。ここにテキストを入れます。サンプルテキスト。テキストの量に応じて背景画像の高さも変わります。ここにテキストを入れます。</p>
</div>

</div>

<div class="image-parts"></div>
<div class="text-parts">
<p>reverseを追加すると大きな端末で左右配置が逆になります。お好みで。</p>
</div>

</div>

</section>

html

css

//===============================================================
// 背景画像が少しずつ上に移動する
//===============================================================
$(document).ready(function() {
    // 初期設定：背景画像の位置を設定
    updateParallax();

// スクロール時にパララックス効果を更新
    $(window).on('scroll', function() {
        updateParallax();
    });

function updateParallax() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

$('.image-parts').each(function() {
            var $this = $(this);
            var offsetTop = $this.offset().top;
            var height = $this.outerHeight();

// 要素がビューポート内にあるか確認
            if (offsetTop + height > scrollTop && offsetTop < scrollTop + windowHeight) {
                // 要素のビューポート内での位置を計算
                var percentScrolled = (scrollTop + windowHeight - offsetTop) / (windowHeight + height);
                percentScrolled = percentScrolled > 1 ? 1 : percentScrolled < 0 ? 0 : percentScrolled;

// 背景位置を調整（0%から100%へ）
                var yPos = (percentScrolled * 100);
                $this.css('background-position', 'center ' + yPos + '%');
            }
        });
    }
});

bg-slideup2

※１カラム専用
スクロール量と少しずれて背景画像が動きます。※画像は必ず縦長のものを用意して下さい。

html

css

// スクロール時にパララックス効果を更新
    $(window).on('scroll', function() {
        updateParallax();
    });

function updateParallax() {
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();

$('.bg-slideup2-parts').each(function() {
            var $this = $(this);
            var offsetTop = $this.offset().top;
            var height = $this.outerHeight();

iframe1

YouTubeをiframe表示。

html

css

openclose1

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

html

css

openclose2

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

html

css

thumbnail-changer2

複数のサムネイルが並んでいて、クリックすると、上の大きな画像に入れ替わるパーツ。サムネイルが多い場合に左右に矢印が出ます。

<h2>others-thumbnail-changer2</h2>

<p>※others-thumbnail-changer1と同じclass名を使っています。others-thumbnail-changer1のcssを入れている場合は、丸ごと置き換えてご使用下さい。</p>

<p>html側を参考に、表示させたい画像は全て「thumbnail-parts」内に入れて下さい。<br>
大きな画像も兼用するので、ある程度大きめにしておきます。</p>
<p>※必ずthumbnail-view-partsブロックの直後にthumbnail-partsブロックを配置して下さい。<br>
間に他のタグがあると正常に動作しません。</p>

<p>一回にスライドする枚数は現在３枚です。変更したい場合は、jsの、<br>
* 3;<br>
の数字を変更してください。</p>

<div class="thumbnail-view-parts"></div>

<div class="thumbnail-parts">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>

</section>

html

/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/*左右矢印*/
.thumb-arrow {
	flex: 0 0 30px;		/*30pxが幅。お好みで。*/
	line-height: 60px;	/*高さ。お好みで。*/
	font-size: 18px;	/*矢印の文字サイズ*/
	text-align: center;
	color: #fff;		/*矢印の色*/
	background: rgba(0,0,0,0.3);	/*矢印の背景色*/
	cursor: pointer;
	user-select: none;
}

/*矢印非表示*/
.thumb-arrow.is-off {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper {
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: none;
}
.thumbnail-wrapper::-webkit-scrollbar{display: none;}

/*サムネイル全体を囲むブロック*/
.thumbnail-parts {
	display: flex;
}

/*サムネイル画像*/
.thumbnail-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
}
.thumbnail-parts img:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

css

//===============================================================
// 詳細ページのサムネイル切り替え
//===============================================================
$(function(){

/* ---------- 大きな画像の初期表示 ---------- */
  $(".thumbnail-view-parts").each(function(){
    const firstSrc = $(this).next(".thumbnail-parts").find("img:first").attr("src");
    $(this).append($("<img>").attr("src", firstSrc));
  });

/* ---------- サムネイル列にナビゲーションを動的生成 ---------- */
  $(".thumbnail-parts").each(function(){

const $thumbs  = $(this);                                          // 元の <div class="thumbnail-parts">
    const $wrapper = $thumbs.wrap('<div class="thumbnail-wrapper"></div>').parent();
    const $nav     = $wrapper.wrap('<div class="thumbnail-nav"></div>').parent();

// 左右矢印を追加
    const $prev = $('<div class="thumb-arrow prev">❮</div>');   // «
    const $next = $('<div class="thumb-arrow next">❯</div>');   // »
    $nav.prepend($prev).append($next);

// 1 回のスクロール量（サムネイル 3 枚分）
    const step = $thumbs.find("img").outerWidth(true) * 3;

/* 矢印クリック */
    $prev.on("click", () => $wrapper.animate({scrollLeft: $wrapper.scrollLeft()-step}, 300, updateArrows));
    $next.on("click", () => $wrapper.animate({scrollLeft: $wrapper.scrollLeft()+step}, 300, updateArrows));

/* スクロールやリサイズ時の矢印制御 */
    function updateArrows(){
      const max = $thumbs[0].scrollWidth - $wrapper.innerWidth(); // 最大スクロール量
      const pos = $wrapper.scrollLeft();                          // 現在位置

if(max <= 0){                   // はみ出し無し → 矢印不要
        $prev.addClass("is-off");
        $next.addClass("is-off");
      }else{
        $prev.toggleClass("is-off", pos <= 0);
        $next.toggleClass("is-off", pos >= max - 2);
      }
    }

// スクロールやドラッグでも矢印を更新
    $wrapper.on("scroll", updateArrows);
    $(window).on("resize", updateArrows);
    updateArrows();  // 初期判定
  });

/* ---------- サムネイルクリックでメイン画像切替 ---------- */
  $(document).on("click", ".thumbnail-parts img", function(){
    const src   = $(this).attr("src");
    const $view = $(this).closest(".thumbnail-nav").prev(".thumbnail-view-parts");
    const $new  = $("<img>").attr("src", src).hide();

$view.find("img").fadeOut(400, function(){
      $view.empty().append($new);
      $new.fadeIn(400);
    });
  });

});

thumbnail-changer1

複数のサムネイルが並んでいて、クリックすると、上の大きな画像に入れ替わるパーツ。詳細ページなどに。

html

css

icon1

アイコン類。文字情報は直接html側で変更して下さい。

html

css

その他のパーツ

sticky1

calender1

animation-spin1

japan-map1

cracker1

popup1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer2

thumbnail-changer1

icon1

自分で作る
テンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

その他のパーツ

sticky1

calender1

animation-spin1

japan-map1

cracker1

popup1

popup2

popup3

sns1

yoko-scroll

bg-slideup1

bg-slideup2

iframe1

openclose1

openclose2

thumbnail-changer2

thumbnail-changer1

icon1

自分で作るテンプレート

下準備

パーツ選択

パーツの使い方

下準備

パーツ選択

パーツの使い方

自分で作る
テンプレート