Vue.js

Vuetifyでのトップページ画像エリア(ヒーローエリア)作成方法

はじめに

今回はVuetifyでトップページ画像エリア(ヒーローエリア)を作成していきます。

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

本記事の内容

■ ヒーローエリアの実装方法

■ ヒーローエリアのレスポンシブ化

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

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

コンポーネント設計

TOPページを作成するにあたって、今回は以下のようなコンポーネント設計とします。

トップページコンポーネント図

コンポーネントの準備

今回実装するにあたって必要な以下のコンポーネントを作成していきます。

src/components配下に以下のファイルを作成してください。

HomeHero.vue

こちらはトップページ画像エリア(以降、ヒーローエリア)部分のコンポーネントとなります。

のちほど実装するので、一旦ファイルの中身空で大丈夫です。

なお、今回のようにトップページのコンポーネント(Home.vue)と親子関係の場合、先頭に親コンポーネントの名前を入れるのが一般的です。

Home.vue

こちらはトップページのコンポーネントとなります。

トップページのベースとなるコンポーネントであるため、トップページの子コンポーネントはすべてこちらで読み込みます。

今回は先ほど作成したヒーローエリアのコンポーネント(HomeHero.vue)を下記のようにコーディングして読み込みます。

トップページ下部は少し間を空けたいので、今回はhomeクラスを定義し、paddingを設定しました。

これでヒーローエリアのコンポーネントの読み込みは完了です。

App.vue

次に、すべてのページのベースとなるApp.vueでトップページのコンポーネント(Home.vue)を読み込みます。

1点注意事項なのですが、トップページのコンポーネントは必ずv-contentで囲ってください。

今回、別ページに遷移する際、vue-routerという機能を使用してトップページのコンポーネントを別のページ(例えば、次回以降作成するAboutページやServiceページ)のコンポーネントに書き換えたり、別ページ遷移時にヘッダーのタブメニューも連動させたいためです。

難しいこと書きましたが、いまいちピンとこない方は、Vuetifyを使用する場合、ページのベースとなるようなメインコンポーネントはv-contentで囲うという理解でOKです。

詳しい理由については、以下の記事で解説しております。

【最新】Vuetify2系のインストールと書き方・使い方Vuetifyを使用するのが初めてという方に向け、Vuetifyの最新バージョンであるVuetify2系のインストール方法や使い方・書き方を解説しております。Vuetifyを使用することでWebサイトに最低限必要な機能を実装することができます。...

ここまでで今回の実装に必要なコンポーネントの準備は完了です。

ヒーローエリアの実装

以下のようなヒーローエリアを実装していきます。

まずは、スマホ表示時のヒーローエリアを作成します。

スマホヒーローエリア

① v-containerタグ・v-rowタグ・v-colタグの3セットを追加

② v-containerタグへfluid・fill-heightプロパティ追加

③ v-containerタグへバックグラウンド画像が適用されるようcssクラス定義

v-container・v-row・v-colについて

一言でいうと、以下の通り。

v-container:全体をwrapしているもの

v-row:行

v-col:列

今回のケースの構造を図解すると以下のようになります。

v-container

こちらについては、以下の記事で詳しく解説してますので、いまいちピンと来ない方はご参照ください。

【最新】Vuetify2系のインストールと書き方・使い方Vuetifyを使用するのが初めてという方に向け、Vuetifyの最新バージョンであるVuetify2系のインストール方法や使い方・書き方を解説しております。Vuetifyを使用することでWebサイトに最低限必要な機能を実装することができます。...

v-containerのプロパティ

ヒーローエリアを作成する際は、以下のプロパティを使用しましょう。

fluid 余白を削除し、要素いっぱいに表示してくれる。v-containerを使用すると自動で余白をとってくれるが、ヒーローエリアでは余白不要のため設定。
fill-height v-container内の要素を上下中央寄せしてくれる。

ヒーローエリアのスタイル

今回以下のように設定したのですが、少し複雑なので、解説します。

background: url(“../assets/img/home-hero.png”); 背景画像として表示したい画像をurlで指定。urlはcssを記述したファイルからの相対パスを記述。
background-size: cover; 縦横比は保持して、背景領域を完全に覆うよう画像表示。
background-position: center center; 画像の中心を表示。ちなみに、background-position: 横位置 縦位置;という構造になっており、画像をずらしたいときに使用。
width: 100%; 横幅いっぱいに表示。
height: 50vh; vhは画面の高さに対する割合。画面の高さいっぱいに表示したのであれば100vh、画面高さの半分だけ表示したいのであれば50vhを指定。

これでスマホのヒーローエリアは完成です。

ヒーローエリアのレスポンシブ化

PC時は以下のように画面いっぱいかつ文字サイズ大きめにヒーローエリアを表示したいので、こちらの記事で定義したメディアクエリを使用してPC用のスタイルを定義しましょう。

PCヒーローエリア

さいごに

ここまででヒーローエリアのコーディングは完了です!
お疲れ様でした!

少し休憩して、次回はVue Routerを導入してみましょう。

Vue Routerのインストール方法・使い方・Vuetifyへの設定本記事ではVue Routerの概要、Vue Routerのインストール方法・使い方・書き方、Vuetifyで作成したコンポーネントへVue Routerを設定する方法について解説します。ハンズオン形式でVuetifyで作成したタブメニューやサイドメニューへVue Routerを設定するところまで解説します。...

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

【最新版】JavaScript(ES6)が学べるおすすめサイト・書籍まとめ【無料あり】はじめに 今回はこんな疑問に答えていきます。 本記事の内容 ■ JavaScript(ES6)が学べ...

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

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

JavaScriptの基礎からVueJsが学べるスクールは以下の記事で紹介しております。

【2020年最新版】おすすめJavaScriptスクール【未経験からフロントエンドエンジニアへ】未経験からフロントエンドエンジニアになりたいけど、独学で限界を感じている方に向け、客観的審査基準から厳選したおすすめのJavaScriptスクールを公開。実践的でモダンなフロントエンド技術が学べるスクールのみご紹介しております。...

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

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

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

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

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

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

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

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

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

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

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