このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
00.vue用デザインフレームワークvuetify:index.html [2018/12/17] adash333 [index.htmlとsrc/App.vueの編集] |
00.vue用デザインフレームワークvuetify:index.html [2019/03/08] (現在) adash333 [index.htmlを編集] |
||
---|---|---|---|
行 4: | 行 4: | ||
Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい!』という方に非常にお勧めです。 | Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい!』という方に非常にお勧めです。 | ||
+ | |||
+ | ただし、画像のリンクの設定については紛らわしいので< | ||
https:// | https:// | ||
{{: | {{: | ||
+ | ===== メニュー ===== | ||
+ | |||
+ | [[01.CodeSandboxのVue.jsでVuetify]] | ||
+ | |||
+ | [[00.vue用デザインフレームワークvuetify: | ||
+ | |||
+ | [[00.vue用デザインフレームワークvuetify: | ||
+ | |||
+ | [[00.vue用デザインフレームワークvuetify: | ||
+ | |||
+ | [[00.vue用デザインフレームワークvuetify: | ||
+ | |||
+ | [[00.vue用デザインフレームワークvuetify: | ||
+ | |||
+ | |||
+ | |||
+ | 日付を選択datepicker | ||
+ | |||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
< | < | ||
行 15: | 行 36: | ||
CodeSandboxでやってみます。 | CodeSandboxでやってみます。 | ||
- | 今回は、https:// | + | ローカルパソコンで、Vue.js(Version2, |
- | ===== CodeSandboxで新規Vue.jsアプリを作成 ===== | + | ===== CodeSandboxで新規アプリを作成 ===== |
*https:// | *https:// | ||
{{: | {{: | ||
- | *Vue をクリック | + | *Vanilla をクリック |
- | {{: | + | {{: |
*すると、以下のような画面になります。 | *すると、以下のような画面になります。 | ||
- | {{: | + | {{: |
- | ===== index.htmlとsrc/ | + | ===== index.htmlを編集 ===== |
- | Vuetify公式サイトの「CDNを利用」のところのサンプルコードの一部をコピーします。 | + | index.htmlを、以下のように書き換えます。 |
- | + | ||
- | https:// | + | |
- | {{: | + | |
- | + | ||
- | index.htmlと、src/ | + | |
< | < | ||
行 42: | 行 58: | ||
- | 作成中 | + | すると、以下のようになります。 |
+ | |||
+ | {{: | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | https:// | ||
===== メニュー ===== | ===== メニュー ===== | ||
- | [[01.index.html一つでVuetify]] | + | [[01.CodeSandboxのVue.jsでVuetify]] |
- | [[02.ヘッダーとフッター]] | + | [[00.vue用デザインフレームワークvuetify: |
- | [[03.コンテイナーとカード]] | + | [[00.vue用デザインフレームワークvuetify: |
- | [[04.ボタン]] | + | [[00.vue用デザインフレームワークvuetify: |
- | [[05.フォーム]] | + | [[00.vue用デザインフレームワークvuetify: |
- | [[06.日付を選択datepicker]] | + | [[00.vue用デザインフレームワークvuetify: |
+ | |||
+ | |||
+ | |||
+ | 日付を選択datepicker | ||
===== 写経元サイト ===== | ===== 写経元サイト ===== | ||
行 66: | 行 92: | ||
Vuetify.js を使ってマテリアルデザインに挑戦しよう! | Vuetify.js を使ってマテリアルデザインに挑戦しよう! | ||
2017年7月12日 | 2017年7月12日 | ||
+ | |||
+ | https:// | ||
+ | Vuetifyチュートリアル。CSSを書かないマテリアルデザイン | ||
https:// | https:// | ||
行 76: | 行 105: | ||
Vuetifyをインストールして使ってみる | Vuetifyをインストールして使ってみる | ||
+ | https:// | ||
+ | 2018/11/11 | ||
+ | Vuetifyチュートリアル。CSSを書かないマテリアルデザイン | ||
+ | →わかりやすい!写経してみたいです。 | ||
+ | |||
+ | http:// | ||
+ | 2018-03-19 | ||
+ | Vuetify.jsでかっこいいWebトップ画面を作りたい | ||
+ | → img のリンクの注意点 | ||