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;
      };