2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetifyで既存ページのデザインを改善してみた

Posted at

#はじめに

最近 Vue.jsとVuetifyに出会って
「こんな簡単に綺麗なサイト作れるんかよ!」
って衝撃を受けました。

せっかくなら前に作ったツールのデザインもVuetifyで改善してみたいと思ってやってみることに。

#ビフォー

改善前のページがこちら

before

htmlとcssだけで短時間で作ろうとするとこんな出来栄えになりました・・・;

良い点を挙げるならシンプルなとこかな(?)
なのでシンプルを維持したままデザインを改善してみました。

#アフター

Vuetifyでデザインを改善したものがこちら

after

なかなかいい感じ!

全部 <v-card> の中に納めました。
リンク生成ボタンを押した後に表示したい要素は<v-expand-transition>に入れることでスッキリしました。

#さいごに
Vuetifyで書くとめちゃくちゃ簡単にUI改良できるので楽しすぎる。

実はフレームワーク使うのって今回が初めて。
もうフレームワークなしで何かを作るのは無理かもしれない笑

おわりです

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?