STEP4. CSSを実際に適用する

[yamk-yamk]

やること

#1 で組んだclassを元に、CSSを実際に適用させて、以下のスクショと同じように作ってみる。

注意事項をよく読むこと！！

---

注意事項

• 文言は全てスクショ通りにやる必要はない
• 既読メールをどれにするかも指定はないが、複数の既読メールが実装されていれば良い
• メールのテーブルの、hover時に左端に出てくるブロック状のものの表示はいらない
• 「メイン」「ソーシャル」「プロモーション」は、クリックしてテーブルの内容が変わる、という実装はこのissueではいらない（後ほど実装）
• 「メイン」「ソーシャル」「プロモーション」のタブは、hover時に色付きのborderが出るが、それは表示する
• 「メイン」「ソーシャル」「プロモーション」のタブは、hoverで黒の吹き出しが出るが、それは今はいらない（後ほど実装）
• 「メイン」「ソーシャル」「プロモーション」のアイコンは、スクショのものでなく、以下のものを代わりに使う

メイン用のアイコン
ソーシャル用のアイコン
プロモーション用のアイコン

##### CSSのファイル構成

app / assets / stylesheets /
├── app.sass
├── base (今回は使わない)
├── layout (今回は使わない)
├── module
├── state (今回は使わない)
├── thema (今回は使わない)

とし、moduleに以下のようにファイルを作って実装する。

module
├── _tab.sass
├── _table.sass

##### 実装箇所

HogesControllerのindexに実装

## スクショ

## GOAL - CSSを使って、実際にデザイン通りのものが作れる - Sassを使える - Sassファイルをコンポーネント単位で分割して管理することで、コンポーネント意識を強く持てるようになる