今日は前回紹介したVueのUIライブラリのVuetifyを使ってゲームのスタート画面のようなUIを作ってみます。 今日のテーマは、Vueの基礎、JavaScriptの基礎、CSSの基礎の復習や知識を固めるために練習する良い素材になると思います。 完成したコードはGitHubで公開しているので見てみてください。 前回の続きなのでVue＋Vuetifyのプロジェクトを用意して早速とりかかりましょう。 もし、Vuetifyを使いたくない方はViteでVueのプロジェクトを作成するだけでも同じことができるのでご安心を。 まずは、使えそうなレイアウトをコピペします。 v-containerは、コンテンツを左右の真ん中と、上下の真ん中に位置させることができるコンポーネントです。 v-rowは、v-colのwrapper（囲うもの）でflexを使って中のcol（カラム）のレイアウトをコントロールすることができます。 v-colはかならずv-rowの直下に位置されます。ここに表示されるコンテンツを入れることになります。 v-sheetは複数のコンポーネントで使えるベースラインになります。 レイアウトの作成 では、ゲームの画面のように左側にメニュー、右側にカードを作成します。 Vueitfyのv-colにはmax-widthが100%で設定されていたため、divに右と左のcolクラスを作成して別々のサイズにしました。 見やすいようにわざと色を付けていますが、後から外します。 背景画像 では、バックグラウンドの画像をPixabayで見つけて貼り付けます。これは商用無料で使える写真を探すときに便利なサイトです。 背景画像のファイルはsrc/assetsに、bg-img.jpgファイルで置いておきます。プロジェクトが大きくなったら、画像をまとめる用のフォルダを作成するべきですが今はOKとします。 ではスタイルに追加します。 このように背景画像が加わり、いい感じになりました。 メニューの作成 メニュー（ナビゲーションバー）を作成します。これは別のコンポーネントを作成してApp.vueにインポートする形にします。 では、components/Menu.vueファイルを作成して下記のように書きます。 次にApp.vueの方でこのコンポーネントをインポートしてあげます。 これでホバーエフェクトのあるメニューができました。次にメニューのタイトルをpropsとして親コンポーネントのApp.vueから子のMenu.vueに渡してあげます。 次に、メニューにガラスのような透明エフェクトをかけたいのでこのCSSツールから作成します。他にもデザインで使えるCSSツールを記事にしているので是非読んでください。 とりあえず、このような感じになりました。 コードはこのようになります。 Menu.vue コンテンツを作成 次に、各メニューをクリックした際に表示される右側のコンテンツのコンポーネントを作成します。ファイルはcomponents/Content.vueの名前にしました。これも同じようにApp.vueにインポートさせます。 コンテンツの中身もpropsでContent.vueに渡してあげるようにします。 次に、メニューボタンをクリックしたときに各コンテンツが切り替わるようにします。 App.vue Content.vueはとりあえずこのようにしておきます。 親のApp.vueからコンテンツのpropsをもらえるようにしておきます。 Content.vue これでクリックするとコンテンツが表示されるようにはなりました。 次にransform: perspective(600px) rotateY(10deg);のCSSを左と右のcolクラスに追加して、３Dに見えるようにします。 最後にボタンがアクティブの際にボタンに色を付けて完了です。 完成したイメージはこちらです。 完成したコードはこちら（GitHub）からどうぞ。