はじめに
こんにちは。
このたび、Web制作でよく使うUIパーツをまとめた**「スニペット集」**を公開しました!
現在はまだ作成途中なので、収録数は少なめですが、順次追加していく予定です。
今あるスニペットは以下の3つです。
- タブUI(クリックでコンテンツを切り替え)
- トグルUI(クリックで表示・非表示を切り替え)
- FAQ(アコーディオン)(よくある質問に便利)
すべてjQueryなし、純粋なJavaScript(バニラJS)で実装しています。
もちろん、コピペ・改変OK なので、自由に使っていただけます。
https://web-create-kokusyo.com/snippet/
なぜスニペット集を作ったのか?
Web制作をしていると、
「前に作ったあのUI、また使いたいな…」
「でもコードを探すのが面倒…」
という経験はありませんか?
そんなときにサッと使えるように、自分用のUI部品集として作り始めたのがきっかけです。
ただ、せっかくなら同じように困っている人にも共有したいと思い、サイトとして公開しました。
スニペットの特徴
今回のスニペット集は以下の方針で作っています。
- バニラJSで完結
外部ライブラリを読み込む必要がないため、軽量&高速です。 - シンプルなHTML構造
最低限のマークアップで動作し、デザインはCSSで自由にカスタマイズ可能。 - コピペ改変OK
商用・非商用問わず利用可能。プロジェクトに合わせてご自由にアレンジしてください。 - 動作デモ付き
スニペットごとに動作サンプルを用意。見て動きを確認してからコードをコピーできます。
現在公開中のスニペット
1. タブUI
クリックで複数のコンテンツを切り替えられるUI。商品説明やFAQなどに最適です。
2. トグルUI
「もっと見る」ボタンのように、押すとコンテンツを開閉するシンプルな機能。height
の固定やjQueryは不要です。
3. FAQ(アコーディオン)
クリックで質問の答えを開閉できるパネル。grid-template-rows
を使ったスムーズなアニメーションで、複数同時オープンも可能。
今後の追加予定
- ハンバーガーメニュー
- モーダルウィンドウ
- スライダー
- トップへ戻るボタン
など、Webサイト制作で「よく使うけど毎回ゼロから作るのは面倒」な部品を追加予定です。
おわりに
スニペット集はまだまだ数が少ないですが、順次追加していきます。
「こんなUIも欲しい!」という要望があれば、コメントやSNSで教えてください。
スニペット集はこちらからご覧いただけます👇