スニペット

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

はじめに

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

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

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

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

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

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で教えてください。

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

学びを深めたいあなたへ:ガチ無料で学べるスクール紹介

そんなあなたにおすすめなのが、完全無料で受けられるプログラミングスクールです。
完全無料で学べるプログラミングスクールなら、プロ講師のサポート付きでHTMLやCSSを基礎から学べます。
私もこちらの受講生なので、体験レポートを参考にして頂けたらと思います。

✅ 初学者のスタートダッシュに最適
✅ HTML/CSSの基礎が無料で学習できる
✅ オンライン完結&未経験OK
✅ Slackで講師に何回でも質問できる

無料の理由や利用者の声を見るならこちら

-スニペット