<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5f6e7806-7a2c-47fb-867b-54742c37b10e/透明画像10001000.png" width="40px" /> ファストス

</aside>

課題

LPをFlexで実際に作成してみる

<aside> 💡 実施するファイルについて css_learningフォルダ内にある html / flex.html・css / flex.cssファイルへ実装を行う

flex-layoutブランチを作成し実施

</aside>

目的

レイアウトデザインの一つであるFlexについて学ぶことで実践でも使える技術を身につける

実装する項目

• SERVICEセクション
• プラン料金セクション

<aside> 💡 下記条件を満たしていること

• インデントが崩れていないこと
• 中身の連続するコンテンツは全てflexで調整する
• レスポンシブ対応がされていること（PCとSPのみ対応）
  • PC（1440px）
  • SP（iPhoneX）
• レイアウト崩れがないか
• リセットCSSを取り入れること

</aside>

下記を既存のファイルにコピーし実装

• flex.html
• flex.css

完成画面

• PC
• SP

実装する際の参考文献