Day4_オリジナルアプリ
トップ画面実装
- マテリアルデザインを採用
- application.html.hamlにmaterializeのリンクを貼らないで見よう見まねで作成してみることにした。
- フレームワークであるmaterializeは導入しない
- inline-boxで横並び→liに当てる
- カードを均等に横並びにする→ display: flex; justify-content: space-between; を親要素に当てる
- サイズを小さくするとナビゲーションの右側のリンクが消え、左側にあるロゴマークが真ん中にくるようにする。
→ @media only screen and (max-width: 640px) {
left: 50%;
transform: translateX(-50%);
};
→ @media only screen and (max-width: 640px) {
display: none;
};