今日はフロントエンドのデザインの修正を進めました。
CSSフレームワークにVuetifyを使用しているのでひたすらYouTube動画見たり公式ドキュメントを読んだりしてちょっとずつコード書きました。
コミットは以下になります。
現在個人開発しているアプリで画面右上に新規登録、ログイン、写真投稿などのボタンを表示するようにしているのですが、レスポンシブ対応ができておらずモバイルではボタンが隠れてしまう現象が起きていました。
自分のイメージとしてはモバイルではハンバーガーメニューが表示されてタップしたら各メニューを選べるようになる感じにしたかったんですね。
レスポンシブ対応はあまりやったことがないので上手く実装できるかわかりませんでしたが、フロントエンドの技術を学ぶ良い機会なのでモバイル画面でのハンバーガーメニューのコーディングをやってみました。
コーディングするにあたっては以下の動画が大変参考になりました。
動画で書いているコードを参考にして自分のアプリにも組み込んでいってなんとかPCの画面では右上にボタンが表示されてモバイルではハンバーガーメニューを実装することができました。
あとはハンバーガーメニュー内の各メニューの表示が自分のイメージと違う感じになってしまったりしたので、公式ドキュメントを読みながら自分のイメージに近づきていきました。
Vuetifyの公式ドキュメントも読みやすくまとまっていて助かります。
こちらのページでv-btnで使えるAPI(CSSフレームワークでもAPIと表現されるんですね)が一通り記載されています。
まだデザイン微妙な箇所が多々あるので、ちょっとずつ改善していきたいと思います。
