コピペで使えるHTML/CSS/JSパーツとは？
コピペで使えるHTML/CSS/JSパーツとは、Webサイト制作でよく使うデザインや機能を、必要な部分だけ選んでコピー＆ペーストで組み込めるパーツ集のことです。
土台となるフレームに、見出し・メイン画像・ボタン・一覧・テーブル・フォームなどの様々なパーツを追加していくことで、自分好みのオリジナルサイトを作ることができます。
完成済みのHTMLテンプレートをそのまま使うのではなく、必要なパーツだけを組み合わせて作れるため、自由に調整しやすく、Web制作の時短にもつながります。
上記動画マニュアルは、2026年4月12日以前のものです。現在、フレーム選択コーナーなど若干異なりますが基本的な使い方は同じです。
パーツを使うメリット
必要な部分だけ使える
サイト全体を入れ替えなくても、必要な箇所だけ差し替えできます。メイン画像だけ変更したい、CTAだけ追加したい、FAQだけ入れたい、といった使い方にも向いています。
制作時間を短縮しやすい
よく使うデザインを毎回ゼロから作らずに済むため、Web制作の時短につながります。特に、LP制作や小規模な企業サイト、既存サイトの部分改修にも便利です。
自分好みに調整しやすい
HTML/CSSベースなので、色・余白・文字サイズ・画像などを自分で変更しやすいのも魅力です。cssにはコメントも入っているのでカスタマイズもしやすいと思います。
再利用しやすい
一度使い方を覚えれば、別のページや別案件でも流用しやすくなります。こうした再利用しやすい部品は、制作の現場では「UIパーツ」や「コンポーネント」と呼ばれることもありますが、Template Partyではわかりやすく「パーツ」としてまとめています。
使いこなしアドバイス
アイコンを変更したい場合（Font Awesome）
html側にi要素で書かれているアイコンは、Font Awesomeです。変更したい場合は、こちらのマニュアルをご覧下さい。
デフォルトのパララックス効果の変更（.inview）
ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.js（※パーツ専用のフレームに梱包の）の冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。
補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。
オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。
section同士の隙間をリセットしたい場合
使うパーツによっては、セクション間の微妙な隙間が気になる場合があると思います。
その場合、1つ目のsectionに.mb0を追加して下さい。（すでにclassがあるなら半角スペースを入れて追加）
<section class="mb0">
別のフレームに変更したい場合
ある程度作った段階で別フレームにしたくなった場合は、元ファイルのバックアップをとった上で以下手順を行ってみて下さい。
- css/frame.cssとjs/frame.jsを、新しいフレームに上書き。（新しいフレームは、デフォルトでこれらの中身は空です）
- html側から、パーツでコピペしたhtmlブロックだけを新しいフレームにコピペしなおして下さい。基本的にはmain内と、その他はフッターブロックです。
- ご自身で準備された画像など、新しいフレームにないものも移動しておいて下さい。フォームも使っている場合は、フォームプログラム（form.php）も忘れず。
その他質問がございましたら
サポート掲示板からお問い合わせ下さい。