テックブログ

  1. Nuxt
  2. 315 view

Vuetifyチュートリアル。CSSを書かないマテリアルデザイン

VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。

Vuetifyにはマージンを調整したり、文字の大きさを変えたり、デザインをする上で便利なクラスや、マテリアル。マテリアルにまつわるオプションがデフォルトで備わっています。

それらを利用すると、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。
今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう!

vuetify gif

Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。
Vuetifyが便利すぎる【マテリアルデザイン3分入門】

Vuetifyでマテリアルデザインをする流れ

  • 使用するコンポーネントを決める。
  • 配置。
  • コンポーネントにオプションを効かせる。
  • クラスを付与して微調整
  • 繰り返し

Vuetifyを使用していく【作業】

index.vueのテンプレートの中身を全部削除しておいてください。
今回は、紳士として、templateの中身以外は触りません

コンポーネントの選定

Vuetify
Vuetifyのサイトに行って左サイドバーのUIcomponentsから使用するコンポーネントを決めます。

今回はcardsの中に、inputや文字を入れていきますので、card、inputやtext等を利用します。
他にも様々なコンポーネントがありますが、基本的な利用方法は変わらないので、まずは使い方を覚えていきましょう!

コンポーネントの利用方法


新規会員登録フォーム

このように、Vuetifyのコンポーネントは、コンポーネント名で囲むだけで使用することが可能です。

ですが、ポツンと横幅100%のカードがいても少し困りますよね。
そこで、次はコンポーネントの配置を使いこなしていきましょう。

コンポーネントの配置

Vuetifyでは、配置をするために、v-flexと、v-layout、v-containerが用意されています。
ので、配置に関してはこの3つさえ覚えればOKという事になります。

v-flexの使い方

v-flexで包む事によって、Vuetifyに搭載されているグリッドシステムを使用することができます。

Vuetifyのグリッドシステムは12分割で、5種類のメディアブレークポイントを使用可能です。

まず、このコードを見てください。


新規会員登録フォーム

上記のコードは、一番簡単な例で、v-flexで、グリッドデザイン12分割のうちの6のエリアをください。と指定しています。
一つのデバイスのみを指定すると、全ての画面幅で50パーセントで表示されます。

ですが、今回は、980px未満では100%、それ以上では50%で表示させたいので、xsを12にmdを6に変更してください。


新規会員登録フォーム

このような動きになっていると思います。

グリッドの動き

ですが、真ん中に配置したいですよね。
そこで、出てくるのがv-layoutです。

v-layoutの使い方

v-layoutは、divで囲んでdisplay:flex;と書くのと同じ意味で、flexboxをCSSに書く代わりに使います。


新規会員登録フォーム

今回はオプションで、justify-centerを指定しています。
このオプションでは、cssのjustify-content:center;と同じで中央に配置してくれと言っています。

他にも,align-center,row,column,justify-space-around,justify-space-betweenなど
よく使うものは全て、オプションで指定することができます。

VuetifyGridオプション

flexboxの使い方を知らない方はこの機会にぜひ勉強してみてください。

CSS Flexbox の各プロパティの使い方を詳しく解説

v-container

Vuetifyでは最初のコンポーネントを綺麗に配置する為に、v-containerが用意されています。

v-cardをv-containerで包んでください。


新規会員登録フォーム

v-containerを利用すると、サイト内のコンテンツが900px以上にはならず、中央寄せになり、900px以下は可変。900px以上は幅固定のbeautifulなレイアウトをする事ができます!

あとpaddingが24pxつきます笑
この3つを覚えれば配置は完璧です!

クラスで微調整

今のままだと、新規会員登録フォームの文字が目立たないので、文字サイズと濃さの調整をします。
v-card-titleの部分にクラスを与えて見てください。

新規会員登録フォーム

太く、大きくなりましたね。

これは、VuetifyのTypographyという機能です。

Vuetify Typography

Typographyを使うと、cssを書くことなく、font-weight、font-family、font-sizeを調整する事が可能です。
typography以外にも、色指定の際には、class=”red”などと指定すると、色が変更される機能もVuetifyには用意されていますので、是非チェックして見てください!

Vuetify Typography
Colors

以上で、マテリアルデザインを使う一連の流れの紹介は終わりです。

この後の記事を読むと、margin、paddingの微調整や、colorsのちょっと凝った使い方がわかるようになりますが、少し休憩ということで、たんぽぽをプレゼント致します!

Vuetifyのspacingを使いこなす。

Vuetifyにはspacingという機能も搭載されていて、それがまた優れものです。
spacingを理解すると、marginや、paddingをクラス名のみで調整する事ができます。

現在のHTMLと表示


新規会員登録フォーム(3分で完了) WINDIIキャリアに登録すると、スキルシートを簡単にPDFに出力したり、企業からのオファーが届くようになります!

v-card-titleとv-card-textの隙間が空きすぎていて、少し、ほんの少し、見栄えが悪いような気がしませんか?
そんな時に活躍するのがspacing機能です。

スペーシングはクラスを付与して使います。

クラスは3つの要素の組み合わせです。
マージンかパディングか、方向、距離の3つの要素です。

  • マージンはm
  • パディングはp

  • topはt

  • bottomはb
  • rightはr
  • leftはl
  • topとbottomは、y軸だからy
  • rightとleftは x軸だからx
  • allはa

距離は単位が4px、5までで0から5までのいずれかの値を指定する。

padding-bottom:16px; = pb-4
margin-top:16px; = mt-4

今回は、v-card-titleのpadding-bottomを取り除きますのでpb-0です。

新規会員登録フォーム(3分で完了)

Vuetify Spacing

心なしかイケメンになりましたね!?

v-btnをカスタマイズ?!

現在のHTMLと表示


新規会員登録フォーム(3分で完了) WINDIIキャリアに登録すると、スキルシートを簡単にPDFに出力したり、企業からのオファーが届くようになります! 稼働する条件や、空き状況 2万円〜 2.5万円〜 3万円〜 3.5万円〜 4万円〜 それ以上

何だろう。あまり可愛くないですね?!
v-btnにはカスタマイズのオプションがいっぱいあるので、今回は、二つのオプションと一つのクラスを付与します!

2万円〜

outlineは、ボーダーのみを表示するオプションで、roundはボタンに丸みを与えます。
greenはcolorsの機能でしたね。

心なしか可愛くなりました!
よくを言えば、ボタンの中の色も変更したいですよね?

そんな時にcolors機能のcolor–textが使えます。

Vuetifyの色colorsを使いこなす

Vuetifyには、20色のメインカラーが定義されていて、そこから明るくなるか暗くなるか、アクセントっぽくするかなどで、全部で257種類もの色が使えるようになっています。

メインカラーに
lightenは5段階
darkenは4段階
accentは4種類程が搭載されているというイメージです。

なので、使用する際にはclass=”red”
としてメインカラーを与えた後に、明るくしたい場合はlighten-3、暗くしたいならdarken-1もっと暗くしたいならdarken-3などと付け加えて利用します。

Vuetify color一覧

今回は、ボタンの中身のテキストカラーを変更したいので、class=”green–text”とします。
そして、テキストの色の変更もメインカラーを与えた後に{lighten|darken}-{n}クラスを追加することで、変更ができます。

2万円〜

綺麗になったかは置いといて、このようにカラーを変更する事ができます。

input、selectとtextfieldを攻略

vuetifyではinputにも様々種類が用意されていますが、今回はselectとtextfieldを使用します。

まずは、selectから攻略していきましょう。
standard,outline,box,soloと、4つデザインがあるので、それから選んでオプションを指定するだけです!
個人的な好みで今回はsoloでいきます。


次は、テキストエリアです。
デフォルトでは、5列になっていますが、オプションで1列に変更をしています。
そして、auto-growを入れる事で、テキストを入力すると勝手に伸びるようになりました。

auto-grow


最終的なHTML


新規会員登録フォーム(3分で完了) WINDIIキャリアに登録すると、スキルシートを簡単にPDFに出力したり、企業からのオファーが届くようになります! 稼働する条件や、空き状況 2万円〜 2.5万円〜 3万円〜 3.5万円〜 4万円〜 それ以上 稼働開始可能日時 週に何日稼働できそうですか? 週2 週3 週4 週5 働き方の条件を教えてください 常駐 一部常駐OK フルリモート 出勤(打ち合わせ)可能エリアを選択してください 首都圏 関西 その他 職歴について教えてください 〜1年 1年 2年 3〜5年 それ以上 実務可能な技術を選択してください JaVa PHP Python C# Ruby React.js Angular Vue.js AWS Docker Laravel 簡単にアピールポイント教えてください。

お疲れ様でした

ベタがきなので、凄い冗長に見えますが、for文で回せばスッキリ、pugにするとさらにスッキリします!
恐らくここまでやれば、もう詰まる事なくCSS無しのVuetify生活が遅れるのではないかな〜と思います。

The following two tabs change content below.

zoe

1994年、京都生まれ。麻布高校卒業後、2年間FPSのクランマスターとして活躍し、駒澤大学の経営学部に進学 → 中退→ とんかつ屋→ WINDII→ Sier→ ベンチャー→ WINDII

Nuxtの最近記事

  1. Nuxt.js+Firebaseでデプロイまでの流れ【簡単5分】

  2. NuxtでOAuth認証を導入する

  3. Vuetifyチュートリアル。CSSを書かないマテリアルデザイン

  4. Nuxt入門〜create-nuxt-appでお手軽開発

  5. NuxtでJWT認証を導入する

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。