こんにちは、ProgLearn;編集部です。
本ブログ記事で以下の記事がよく読まれているとわかりました。
なので今日はVurtifyについて解説しているページをご紹介します!
Vuetify(v2.0.0 )でv-colのxsを設定する
ご自身がハマったことに対する対処ほうが解説されています。
vuetify(v2.0.0)からは、
v-col
でBreakpointsごとのgridの設定を行う。
Breakpointsは、これまで通り。スマホでのBreakpointはxsとなる。スマホとそれ以外でgridを変えたい場合に、うまくいかずハマった。
https://qiita.com/iss-f/items/a86586de095368cdd9a3
Vuetifyのグリッドシステムの属性について
コードとそれに対する出力結果について画像付きで載っているため、非常にわかりやすい記事です。
仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。
https://qiita.com/nulltemp/items/07c6998a4ad8927a9b54
https://vuetifyjs.com/ja/layout/grid
CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見ただけではイメージし辛い。
しょうがないので実際に動かしつつ内容を確認した。
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
会員登録フォームの作り方を流れに沿って解説してくれています。
手を動かしながら学べるのでわかりやすいです。
VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。
https://windii.jp/frontend/nuxt/vuetify-tutorial
Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。
マテリアルにまつわるオプションがデフォルトで備わっています。
マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。
今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう!