Web制作に便利なスニペット集を公開しました！まだ作成途中ですがコピペで使えます

はじめに

こんにちは。
このたび、Web制作でよく使うUIパーツをまとめた**「スニペット集」**を公開しました！
現在はまだ作成途中なので、収録数は少なめですが、順次追加していく予定です。

今あるスニペットは以下の3つです。

• タブUI（クリックでコンテンツを切り替え）
• トグルUI（クリックで表示・非表示を切り替え）
• FAQ（アコーディオン）（よくある質問に便利）

すべてjQueryなし、純粋なJavaScript（バニラJS）で実装しています。
もちろん、コピペ・改変OK なので、自由に使っていただけます。

https://web-create-kokusyo.com/snippet/

なぜスニペット集を作ったのか？

Web制作をしていると、
「前に作ったあのUI、また使いたいな…」
「でもコードを探すのが面倒…」
という経験はありませんか？

そんなときにサッと使えるように、自分用のUI部品集として作り始めたのがきっかけです。
ただ、せっかくなら同じように困っている人にも共有したいと思い、サイトとして公開しました。

スニペットの特徴

今回のスニペット集は以下の方針で作っています。

1. バニラJSで完結
   　外部ライブラリを読み込む必要がないため、軽量＆高速です。
2. シンプルなHTML構造
   　最低限のマークアップで動作し、デザインはCSSで自由にカスタマイズ可能。
3. コピペ改変OK
   　商用・非商用問わず利用可能。プロジェクトに合わせてご自由にアレンジしてください。
4. 動作デモ付き
   　スニペットごとに動作サンプルを用意。見て動きを確認してからコードをコピーできます。

現在公開中のスニペット

1. タブUI

クリックで複数のコンテンツを切り替えられるUI。商品説明やFAQなどに最適です。

2. トグルUI

「もっと見る」ボタンのように、押すとコンテンツを開閉するシンプルな機能。
heightの固定やjQueryは不要です。

3. FAQ（アコーディオン）

クリックで質問の答えを開閉できるパネル。
grid-template-rowsを使ったスムーズなアニメーションで、複数同時オープンも可能。

今後の追加予定

• ハンバーガーメニュー
• モーダルウィンドウ
• スライダー
• トップへ戻るボタン
  など、Webサイト制作で「よく使うけど毎回ゼロから作るのは面倒」な部品を追加予定です。

おわりに

スニペット集はまだまだ数が少ないですが、順次追加していきます。
「こんなUIも欲しい！」という要望があれば、コメントやSNSで教えてください。

スニペット集はこちらからご覧いただけます👇

https://web-create-kokusyo.com/snippet/