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

課題

Flex課題をCSS設計（BEM）を取り入れリファクタリングしてみる

<aside> 💡 実施するファイルについて

`html / design.html`・`css / design.css`ファイルへ実装する

`css-design`ブランチを作成し実施

</aside>

### 目的

- CSS設計の一つであるBEMについて学ぶことで実践でも使える技術を身につける
- 「良いCSS」の定義を理解する

### 実装内容

[Flexレイアウト課題](<https://alchemy-inc.notion.site/Flex-e6153dfa277b4dbd9644e61a1dde5c7e>)

※必要であればFlex課題で作成したCSSを修正しても問題ない

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

- インデントが崩れていないこと
-  CSS設計（BEM）に沿って実装がされている
- レスポンシブ対応がされていること
    - PC（1440px）
    - SP（iPhoneX）
- レイアウト崩れがないか
- リセットCSSを取り入れること

</aside>

参考文献

- [CSS設計の説明](<https://alchemy-inc.notion.site/CSS-2c2e6ba3d6614a35941ff7cffadb3b2d>)