今日もレイアウト。ブートストラップやCSSを使い慣れていないせいで一つ一つにとても時間がかかっている。
進捗
- 検索フォームのサイドバーのレイアウトを整えた。
- Viewのメインとフッターに背景画像を入れた。
- フォントが適用された
- ロゴを作成した
学習
今日はいろいろ学習できた。参考資料もたくさん見つけることができた。
- セレクトボックス内にチャックボックスの作成。JavaScriptも使用。
(参考資料：https://web-studio-swing.com/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9in%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AAui%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9/） - クラウド９のショートカットキー。参考資料にはなかったが、インデントをまとめて一つ詰めたい場合はShift+Tabでいける。ただしMacに限る。
(参考資料：https://qiita.com/shin1kt/items/03eed49c12104002a2c7) - ブートストラップでブロック要素に枠組みをつける時。
(参考資料：https://getbootstrap.jp/docs/5.0/utilities/borders/) - おまけのような話ではあるが、今までブートストラップの使用バージョンを５だと思っていて、実際は４だった。なので今回ブートストラップがうまく反映されなくて悩んでいたのは全て５でできることだった。
- ブートストラップでの余白の開け方。
(参考資料：https://himatoto.com/bootstrap2/) - HTMLで文字の色を一部変更。
(参考資料：https://magazine.techacademy.jp/magazine/9799) - 背景画像が綺麗に反映されなくて、メンターさんに聞いてもわからなかったが自力で一応解決できたので備忘録として残しておこう。background-size: 100% 100%;これで背景画像を全体に適用させて縮小されてるという動きができた。正しいかはわからない。
- フッターをメインの情報量に関わらず下に固定する方法。
(参考資料：agazine.techacademy.jp/magazine/19410) - ブートストラップでlgやmdを使う時に基本となる考え方で、画面は１２として考えるのでいろいろ合わせて合計１２にした方がいいらしい。足りないも余るのもよくない。
ヒント
- ロゴ作成に便利。URL:https://www.canva.com/projects
- 和風アイコンのフリー素材。URL:https://icooon-mono.com/tag/%E5%92%8C%E9%A2%A8/
- 背景画像の位置決めに。URL：https://developer.mozilla.org/ja/docs/Web/CSS/background-position-
明日の予定
今日でチーム開発のメンバーともお別れになった。ラインなどでつながりはしようと思っているが、やはり仲良くしてただけに寂しい。それに次のメンバーも決まったが知らない人ばかりで緊張と不安がある。
明日は新しいメンバーとの顔合わせとWBSの発表なので午前中はほとんど学習出来ないと思うので午後から頑張ろう。
進捗予定としてはTopページを完成させて、userの寺社投稿ページに入ることを目安にする。