Vue.js

【Vuetify】カードコンポーネントの作成方法

はじめに

今回はVuetifyでカードコンポーネントを持つServiceエリアを作成していきます。

完成イメージは下記の通りです。

本記事の内容

■ Vuetifyのカードコンポーネントを持つServiceエリア作成方法

本記事は、以下の記事で紹介しているハンズオンの個別解説記事となりますので、全体像やこれまでの実装が知りたい方は以下の記事をご参照ください。

Vuejsでレスポンシブ対応のホームページを作成&公開する方法本記事ではVuejsでレスポンシブ対応のポートフォリオサイトの作成方法をハンズオン形式で解説していきます。ハンズオンを通したVuejsの解説、実践を意識した保守性・可読性の高いコーディング方法、レスポンシブ対応のサイト作成方法を盛り込んだ内容となっております。...

トップページServiceコンポーネントの作成

コンポーネントの新規作成

以下のディレクトリへHomeService.vueとService.vueを作成していきます。

コンポーネントの読み込み

次に作成したコンポーネントをトップページのベースコンポーネント(Home.vue)へ読み込みます。

これで事前準備は完了です。

カルーセルコンポーネントを持つWorkエリア作成方法

セクションタイトルの実装

まずは下図の赤枠のようなセクションタイトルを作成していきます。

下記のコードをHomeService.vueへ貼り付けてください。

こちらは以前作成したグローバル化したstyleが適用されております。

【Vuetify】画像と文章を横一列で表示するAboutエリアの作成本記事ではVuetifyのグリッドレイアウトシステムを使用して、画像と文章を横一列で表示するトップページのAboutエリアを作成していきます。PC表示(画面幅がMedium(ノートPC)以上)のとき、画像と文章を横一列に表示し、スマホのときは画像と文章が縦一列に表示されるPGMを実装していきます。...

Vuetifyでのカードの実装

次に、Vuetifyで下図のようなカードを作成していきます。

下記のコードをHomeService.vueへ貼り付けてください。

作業内容

v-card追加

② カードのスタイル追加

v-cardタグの書き方・使い方

v-cardタグは以下のような構造になっており、カードにしたい要素をv-cardタグで囲むことにより一般的なカードデザインを作成することができます。

また、今回は使用しておりませんが、v-card-title(タイトル), v-card-subtitle(サブタイトル), v-card-text(テキスト), v-card-actions(リンクなど)を使用すると、デフォルトで以下のようなスタイルがあたります。

さらに、v-cardには様々なオプションを付けることができます。

以下に今回使用しているオプションをまとめました。

to ボタン押下後の遷移先(Vue Router)を指定。
hover ホバーしたときにシャドーが強調されるようにしたいとき指定。

その他オプションは公式サイトをご参照ください。

カードの遷移先である詳細ページの作成

カードの遷移先である詳細ページのServiceコンポーネントを作成していきます。

以下のようにカルーセルの遷移先は単純なページ遷移だけでなく、該当ID部分までスクロールされるような作りにしていきます。

詳細ページのServiceコンポーネント作成

Service.vueに以下のコードを貼り付けてください。

今回、AppBackgroundHolderコンポーネントは以下で作成した下層ページタイトル部分の共通コンポーネントとなります。

【Vuetify】下層ページタイトル部分の共通コンポーネント作成Vuetifyを使用した下層ページタイトル部分の共通コンポーネント作成を解説。また、下層ページタイトル部分は様々なコンポーネントから参照されるため、汎用的に作成するための設計についてもハンズオンを通して学んでいきます。...

また、該当ID部分までスクロールされたことが分かりやすくなるよう各セクションの高さは1000pxとしております。

詳細ページのルーティング

詳細ページに遷移させるため、以前作成したrouter.jsへ下記部分を追記します。

該当ID部分までスクロールさせる方法は前回の以下の記事ですでに実装済みなので、今回は特に何もする必要はございません。

【Vuetify】カルーセル(スライダー)コンポーネントの作成方法Vuetifyでカルーセル(スライダー)コンポーネントを作成する方法を紹介します。カルーセルを実装するにあたって必要なVuejsの基礎知識やVuetifyのコンポーネントについて詳しく解説しております。...

以下のようになれば、カードの実装は完成です。

さいごに

以上でカードコンポーネントを持つServiceエリアの作成は完了です!

お疲れ様でした!

ES6について基礎から学習したい方は、以下の記事で紹介している教材がおすすめです。

【最新版】JavaScript(ES6)が学べるおすすめ書籍・Udemy講座まとめJavaScript(ES6)が学べるおすすめサイト(無料あり)や書籍、Udemy講座をまとめました。自身が参考にした教材の中でも非常に業務に役立ったものを厳選しております。...

VueJsの基礎知識についてより詳しく網羅的に学習したい方は、以下の記事で紹介している教材がおすすめです。

【これだけでOK!】おすすめのVue.js入門教材「Vue.jsを初めてみたいけど、どの教材から手をつけてよいか分からない」という方や「Vue.jsできるようになるためにどんなことをやったらよいのか?」という疑問をもった方向けにおすすめのVue.js入門教材の紹介とその教材の使い方について詳しく解説しております。...

さいごまで読んでいただき、ありがとうございました。

フリーランスエンジニア転職完全ロードマップ

知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。

というもの以下のような不安があったからです。

■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか?

■フリーランスエンジニアって不安定なのではないのか?

■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか?

しかし、実際にフリーランスエンジニアになってみて気づきました。

これらはすべて間違いです。

過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。

この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。