コピペで使えるHTML/CSS/JSパーツとは？
コピペで使えるHTML/CSS/JSパーツとは、Webサイト制作でよく使うデザインや機能を、必要な部分だけ選んでコピー＆ペーストで組み込めるパーツ集のことです。
土台となるフレームに、見出し・メイン画像・ボタン・一覧・テーブル・フォームなどの様々なパーツを追加していくことで、自分好みのオリジナルサイトを作ることができます。
完成済みのHTMLテンプレートをそのまま使うのではなく、必要なパーツだけを組み合わせて作れるため、自由に調整しやすく、Web制作の時短にもつながります。
コピペだけで作ったデモサイト
実際にどのパーツを使ったか、各デモページの下部に解説もあります。
※一番最後の 赤×黒 は、一番左のデモサイトのtheme.cssのカラーコードを数箇所入れ替えただけのものです。
色と画像を入れ替えるだけで全く違った印象に
一番左の青系がコピペしただけのテンプレ（デフォルト）です。
（以下のチェンジタイプは、2〜3箇所cssの微調整を行っていますが、初歩的な調整のみです。）
theme.cssの冒頭で一括カラーチェンジができます。
もちろん、各パーツ単位で、直接カラーコード指定をしてもOK。
デフォルトのパララックス効果（.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">
パーツはこんな方におすすめです
- 形の決まったテンプレートを使うのが嫌な方。
- 誰かとデザインがカブるのが嫌な方。
- 必要な部分だけ自分で調整したい方
- ホームページを一から作るのは大変なので、使えるパーツを組み合わせてオリジナルを作りたい方
- LP（ランディングページ）や企業サイトを、コピペで効率よく制作したい方
- 見出し・ボタン・FAQ・料金表など、よく使うUIパーツをまとめて探したい方
- Webデザイナーや制作会社の方で、実務に使える再利用パーツを探している方
パーツを使うメリット
必要な部分だけ使える
サイト全体を入れ替えなくても、必要な箇所だけ差し替えできます。メイン画像だけ変更したい、CTAだけ追加したい、FAQだけ入れたい、といった使い方にも向いています。
制作時間を短縮しやすい
よく使うデザインを毎回ゼロから作らずに済むため、Web制作の時短につながります。特に、LP制作や小規模な企業サイト、既存サイトの部分改修にも便利です。
自分好みに調整しやすい
HTML/CSSベースなので、色・余白・文字サイズ・画像などを自分で変更しやすいのも魅力です。cssにはコメントも入っているのでカスタマイズもしやすいと思います。
再利用しやすい
一度使い方を覚えれば、別のページや別案件でも流用しやすくなります。こうした再利用しやすい部品は、制作の現場では「UIパーツ」や「コンポーネント」と呼ばれることもありますが、Template Partyではわかりやすく「パーツ」としてまとめています。
完成まで最大3ステップです
- まずは土台となる土台となるフレームを選びます。
- 必要に応じてレイアウトを選びます。（※１カラムならこの作業は不要）
- 「パーツ選択」メニューから、見出し・メイン画像・ボタン・一覧・テーブル・フォームなどを選んでコピペで追加します。
この流れで、完成済みテンプレートとは違った、自分だけのホームページを作成できます。
まずはフレーム選択からどうぞ
パーツを使ってオリジナルサイトを作る場合は、パーツの利用規約をご一読の上で、土台となるフレームを選んで下さい。
その後、必要があればレイアウトを選び、各パーツを組み合わせていくことで、自分だけのホームページを作成できます。