[Vue.js]Vue.js & Vuetify 製の【見出しシミュレーター】を制作しました[Vuetify]

Vue.js & Vuetify 製の 【見出しシミュレーター】を制作しました

まずは動画をご覧ください。こんなシミュレーターを制作しました!

↑こんな感じの【見出しシミュレーター】を制作しました!容量の関係で解像度が低くてすみません!(…ぜひ、動く様子をリンク先からご覧ください!)

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 を使った制作の実例として、
心を込めて制作しました。

このツールが、皆様のお役に立てれば幸いです!