Vue.js

【Vuetify】画像と文章を横一列で表示するAboutエリアの作成

はじめに

今回はVuetifyで画像と文章を横一列で表示するトップページのAboutエリアを作成していきます。

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

本記事の内容

■ 画像と文章を横一列で表示するAboutエリア作成方法

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

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

コンポーネント設計図

今回は下図の赤枠部分を作成していきます。

コンポーネント図

Aboutコンポーネントの作成

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

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

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

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

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

トップページのAboutエリア作成

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

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

セクションタイトル

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

セクションタイトルのスタイルのグローバル化

セクションタイトルのスタイルは今後別のコンポーネントでも使用するため、グローバル化しておきましょう。

以下のディレクトリへ「_parts.scss」というファイルを作成してください。

作成したら、先ほどstyleタグで定義したセクションタイトルのスタイルをコピーしてください。

また、以降で使用する画像に適用するクラス「img-fluid」もついでに追加しておきましょう。

さいごに以前作成した「common.scss」へ「_parts.scss」を読み込ませれば完了です。

なお、グローバルなscssを読み込ませるためのビルド設定等は以下の記事で解説しております。

Vuetifyでヘッダーメニューの作成②【タブメニュー】Vuetifyでレスポンシブなヘッダー(タブメニュー)を作成する方法をご紹介します。実装にあたって必要なVuetifyのコンポーネントの解説やVuetifyで生成されたクラスのスタイルを直接修正する方法、グローバルなscssファイルをあらかじめ読み込ませる方法について詳しく解説しております。...

Aboutエリアのメインコンテンツ作成

Vuetifyのグリッドシステムレイアウトを利用して、以下のような「画像 + 文章」のAboutエリアのメインコンテンツを作成します。

Aboutセクション

① グリッドシステムレイアウトを適用したい部分をv-containerで囲む

② breakpoint(上記コードのmd部分)をv-colへセット

今回、PC表示(画面幅がMedium(ノートPC)以上)のとき、画像と文章を横一列に表示したいため、md(Medium(ノートPC))というbreakpointを使用しております。

今回のコードを図解化すると以下のようなグリッドシステムレイアウトとなっております。

Aboutセクショングリッドレイアウト

なお、スマホのときは特にbreakpointを指定していないため、以下のように画像と文章が縦一列に表示されます。

Aboutセクションスマホ

さいごに

ここまででAboutエリアのメインの部分コーディングは完了です!
お疲れ様でした!

少し休憩して、次回はボタンコンポーネントを作成してみましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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