Vue.js

Vuetifyでのフッダー作成方法

はじめに

今回はVuetifyでフッダーを作成していきます。

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

完成イメージ

本記事の内容

■ Vuetifyによるフッダー作成方法

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

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

フッダーの作成

フッダーコンポーネントの作成

src/components配下に以下のファイルを作成してください。
中身はまだ空のままでOKです。

フッダーコンポーネントの読み込み

メインコンポーネントであるApp.vueにフッダーコンポーネントを読み込ませるため、以下のようなコードを追加します。

フッダーの実装

Vuetifyを利用して下図のようなフッダーの実装をしていきます。

フッダー画像

作業内容

v-footerタグの追加

v-footerタグにabsoluteプロパティ追加

③ テキスト

v-footerの使い方・書き方

v-footerを使用すると複雑なcssをコーディングすることなく、以下のようにコーディングすることで簡単にフッダーを作成することができます。

また、v-footerに様々なプロパティを加えることでカスタマイズできます。

今回v-footerに追加したプロパティは以下の通りです。

dark v-footerに適用するデザインテーマの種類。darkテーマを設定すると、バーの背景色が黒色になり、文字の色は白に変わる。他にもlightやprimaryが指定可能。他にもどんなテーマがあるか気になる方は、こちら
absolute フッダーをページの一番下に固定するためのスタイルプロパティ。フッダーを実装するとき、基本的に必須のプロパティ。

その他のv-footerのプロパティが気になる方は公式サイトをチェックしてみてください。

フッダーのスタイル修正

上述したスタイルのままだとフッダーテキストが左寄りになってしまっているため、下図のように中央寄りになるよう修正していきます。

フッダー画像

作業内容

① フッターテキストをdivタグで囲む

② divタグにclass="footer"を追加

③ styleタグを追加し、footerクラスのスタイル設定

v-footerで囲まれた要素はブロック要素となるため、ブロック要素を中央寄せするためにmargin: auto;を使用して中央寄せしております。

さいごに

ここまででフッダーのコーディングは完了です!
お疲れ様でした!

次回からはいよいよトップページの実装です。
少し休憩して、トップページのヒーローエリアを作成しましょう!

Vuetifyでのトップページ画像エリア(ヒーローエリア)作成方法Vuetifyでトップページ画像エリア(ヒーローエリア)の実装方法を解説します。ヒーローエリアを実装するにあたって必要なVuetifyのディレクティブやプロパティ、ヒーローエリアのレスポンシブ化もハンズオンを通して詳しく解説しております。...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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