Help us understand the problem. What is going on with this article?

Vuetify初心者の備忘録① グリッドシステムについて

Vuetifyでわかんなくて調べたことを出来るだけ平易な言葉でメモっていきます。
また、出来るだけカタカナ語はこの記事の中で完結するようにします。
間違っていたらお教えください。

前置き

Vuetifyとは

vue.jsでマテリアルデザインを実現するためのUIフレームワークです!
↓Vuetify公式
https://vuetifyjs.com/ja/
https://github.com/vuetifyjs/vuetify

マテリアルデザイン

Googleさんが言い出した、「ユーザーさんにとってわかりやすくて操作しやすいページの作り方」です!
「ポップアップみたいに画面の上の方にウインドウが出てきたら影をつけようね!」とか、
「ボタンとボタンの間はこれぐらい間隔をあけてね!」とかめちゃめちゃ事細かに決めてあります。
そんな複雑なCSS書いてられるか!って人のためにVuetifyが簡単に実現してくれます!
↓Googleさんのマテリアルデザイン指南
https://material.io/

グリッドシステム

スイスのデザイナーさんが1981年に考えた、デザインの手法だよ!
マテリアルデザインには必要不可欠な概念で、最初は、紙ベースの表現で用いられていたけど、最近になってWebデザインに流用されてきたよ!
グリッド=格子 つまり格子状に切ったブロックそれぞれに情報を配置していくことで、
規則性が生まれたり、情報の関係性を視覚的に捉えたりできて、見る人にとって、欲しい情報がわかりやすく表現できるよ!

ブレークポイント

vuetifyのグリッドシステムでは、フレックスボックスと言われる、「CSSにdisplay:flexが指定された要素」の横幅を12分割して、そのうちのグリッド何個分って指定をするんだけど、
「画面サイズや表示するデバイスによって、グリッド何個分を変えたい!」って思った時の「画面サイズの境界線」だよ!
詳しくは、下記の公式ガイドラインの表を見てみてね!
https://vuetifyjs.com/ja/customization/breakpoints#breakpoints

グリッドシステムを作るためのタグ

v-app

Vuetifyは、このタグの中で使ってね!このタグの中じゃないと正常に動作しないよ!

v-container

レイアウトをいじる範囲を示すコンテナだよ!
paddingがついてるから、真ん中に寄ったレイアウトになるね!
子要素にpadding効かせたいときはgrid-listを指定するよ!
特徴:
width: 100%;だが、max-widthはブレークポイントに従って段階的に設定されている
max-widthを常に親要素に合わせたい場合は、タグのプロパティにfluidを指定する
margin-right: auto; margin-left: auto;により子要素が左右中央寄せとなる
・上下中央寄せにするには、fill-heightプロパティをタグに指定する
・設定で変更できるが、paddingが初期値12pxと設定されている

v-layout

まとまりをあらわして、子要素の並び方を制御するよ!
デフォルトでは、CSSのdisplay: flex;が効いてて、直下の要素が横並びになるよ!
縦並びにしたいときは、columnプロパティを入れようね!
グリッドシステムを効かせたいときはwrapプロパティを入れようね!横幅がいっぱい(グリッド12個分超え)になったら改行してくれるよ!
特徴:
display: flex;が指定されている
・タグの要素にcolumnを指定すると縦並びになり、reverseを指定すると並び順を逆にできる。併用も可能
・デフォルトでは、flex-wrap: nowrap;が指定してあり、横幅いっぱいになっても改行されずに続いていくが、
 wrapプロパティを指定すると、flex-wrap: wrap;となり、横幅に応じて、自動で改行される。

v-flex

横幅の指定を行うよ!オフセットっていう、要素の左側にmarginをいれたりできるよ!
CSSのflex: 1 1 autoを自動的に入れてくれるよ!
参考:http://www.htmq.com/css/flex.shtml
グリッドシステムで位置の指定を行う対象だよ!

<!-- 左側に横幅1/12の空白、5/12の範囲にテキストエリアがあって、残りの右側6/12は空白 -->
<v-flex offset-xs1 xs5>
  <textarea />
</v-flex>

特徴
・デフォルトではmax-width: 100%が設定されているが、例のxs5などのブレークポイントとサイズの指定があった場合は、max-widthflex-basisがそれに応じて設定され、flex-grow: 0が指定されて横に伸びなくなる
・例のようにoffset-xs1などのoffset-[ブレークポイント][サイズ]の指定があった場合は、指定に応じた値がmargin-leftに設定される

以上

一応、vuetifyのソースを見ながら書いたのですが、何か間違いなどがありましたらご指摘いただきたいです!
よろしくお願いいたします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした