まずは動画をご覧ください。こんなシミュレーターを制作しました!
↑こんな感じの【見出しシミュレーター】を制作しました!容量の関係で解像度が低くてすみません!(…ぜひ、動く様子をリンク先からご覧ください!)
Vue.js & Vuetify を使って、「見出し」のシミュレーターを制作しました!
タイトルの通り、Vue.js & Vuetify 製の見出しシミュレーターを制作しました!
[URL]
https://tedate.jp/heading-maker
簡単なUI操作で、リアルタイムに
h2, h3 などの、
「見出しパーツ」のシミュレーションが可能です。
シミュレーション結果は即時、cssコードとして出力されるため、
扱いやすいと思います。
チームで新しいサイトの色決めを検討するミーティングの際や、
お手元でデザイン中のサイトの、見出しの色を検討する際などにぜひご活用ください。
URL・動作環境
[URL]
https://tedate.jp/heading-maker
[動作環境]
Google Chrome, Safari, Firefox の各最新版で正常に動作します。
※現在は、一般的なPCの画面サイズでのみ動作します。
この記事のまとめ
このシミュレーター「heading.tedate」は、
皆様のWeb制作がもっと楽しくなるように、
また、Vue.js & Vuetify を使った制作の実例として、
心を込めて制作しました。
このツールが、皆様のお役に立てれば幸いです!