「良い見た目のボタン」や「写真アップロードパネル」など、自分で作ったHTML要素を少しずつ蓄積し、再利用しやすい形にまとめるためのサイトを作りました。
以下のページへアクセスするだけで使えます。
ただし確認済みのHTMLをローカルかつオフラインで使う方が安全なので、可能ならばそちらを推奨します。
自分専用のHTML資産集を作る
このサイトは、完成済みの部品集を配布するものではありません。
自分が作ったHTMLを複数ドラッグ＆ドロップし、自分専用のHTML資産集を自分の手で構築していくための補助ツールです。
たとえば、次のような要素を少しずつ追加していけます。
- 良い見た目のボタン
- 写真アップロードパネル
- 入力フォーム
- カードデザイン
- 読み込み表示
- ダイアログ
一度作った要素を資産として残しておけば、使いたい時に一覧から見た目を確認し、必要なコードをすぐ取り出せます。
生成したサイトでは、HTML要素、CSS、JavaScriptの個別コピーや、CSSファイルのダウンロードなどができます。
出力後も「編集する」ボタンから項目を追加できるため、新しい要素を作るたびに資産集を育てていけます。
出力サンプル
実際に生成したサイトの例はこちらです。
テーマごとに分けて管理する
すべての要素を1つの大きなサイトへ入れるよりも、
- ボタン集
- フォーム集
- アップロード要素集
- カード集
のように、テーマごとに分けて出力した方が管理しやすいと思います。
自分が使いやすい要素を、自分の判断で追加し、自分専用の資産として育てていく。
その作業を少し楽にするためのサイトです。
👇サイト
👇出力サンプル
👇GitHub
GitHub の URL は、悪意のあるコードが含まれていないかをご自身で目視確認したい方向けに公開しています。
網羅的な確認はできませんが、ChatGPT にコードを添付して、悪意のあるコードが含まれていないか確認してもらう方法も有効です。
ご自身が使いやすいように ChatGPT などを活用してチューニングし、利用することも推奨します。
より使いやすいサイトを作成できた場合は、私も利用したいので公開していただけるとうれしいです。
なお、全面的に作り直したものではなく、本リポジトリを改造して作成したものを公開する場合は、MIT ライセンスの条件に従って公開してください。(著作権表示とMITライセンス文を含めてください)