JavaScript

【v-col vuetify よくわからん人向け】解説ページ4選

こんにちは、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://vuetifyjs.com/ja/layout/grid
CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見ただけではイメージし辛い。
しょうがないので実際に動かしつつ内容を確認した。

https://qiita.com/nulltemp/items/07c6998a4ad8927a9b54

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

会員登録フォームの作り方を流れに沿って解説してくれています。

手を動かしながら学べるのでわかりやすいです。

VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。
Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。
マテリアルにまつわるオプションがデフォルトで備わっています。
マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。
今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう!

https://windii.jp/frontend/nuxt/vuetify-tutorial