画像サイズをアスペクト比から計算するツールを作りました

数年前にVue1.xを使って以来まともに触っていなかったので、Vue CLIとVue2.xで何か作ろうと思って画像サイズ計算ツールを作りました。

以前Vue 1.xを触っていたおかげもあってVue 2.6でも普通に組むまでの進みはよかったのですが、Vue UI ライブラリ「Vuetify」に手を出したら、なかなか馴染まなくて慣れるのに時間がかかりました。

Vuetifyをこのサイトの一部に組み込むので必要なコンポーネントだけチョイスして実装していましたが、先にグリッドシステムを少し理解した方がよかったり、一部のコンポーネントを拡張するやり方に手こずったりと3歩進んで2歩下がるを繰り返してました。あとはcssがバッティングしたりとか…。

導入難易度はそこまで難しい部類ではないと思いますが、ドキュメントはちょっと読みにくいような…。Vuetifyの基礎が抜けてるからだと思いますが、どうコンポーネントを組み合わせればいいのか？というのが理解しにくい感じがしました。
きちんと基礎から理解して使えばパパッとUIが作れそうなので何かの案件で使ってみたいところです。

そんな感じで四苦八苦しながら作成した計算ツールは、サイズを入力するだけでアスペクト比からwidth、height、padding-topの算出ができます。以下からアクセスできるので是非使ってみてください。

画像サイズ計算機はこちら！

画像サイズ計算機 サイズを入力すると様々なアスペクト比で横幅、縦幅、cssで使うpadding-topの算出ができます。自分好みの比率も追加できるのでWebサイト制作のお供にどうぞ。

この計算ツールに使ったパッケージは以下です。（細かいところは省いています）

vue: 2.6.11
vuetify: 2.4.0
vuedraggable: 2.24.3
vue-clipboard2: 0.3.3
vue-sticky-directive: 0.0.10

WPの固定ページでVue CLIのホットリロード環境を作るのに苦戦したので構築方法を書きました。

あわせて読みたい

WordPressの固定ページでVue CLIのホットリロード環境を構築する このサイトで公開している画像サイズ計算機はVueで作りましたが、WPテーマのcssバッティングやレスポンシブの確認などがあるため、どうしてもWPの固定ページでVue CLIの...