yamk-yamk/frontend_training

frontend_training's Issues

STEP5. JSの実装を加える

やること

#2 でCSSを適用させたものに、さらに追加でJSを加える。

実装する内容は以下のとおり。

• 「メイン」「ソーシャル」「プロモーション」のタブの上にカーソルを置くと、黒い吹き出しが表示される
• 「メイン」「ソーシャル」「プロモーション」のタブをクリックすると、タブの表示が変わる
• 「メイン」「ソーシャル」「プロモーション」のタブをクリックすると、メールの内容（テーブルの内容）が変わる
• チェックボックスをクリックすると、チェックがつき、その行の背景色が変わる
• お気に入りボタン（☆）をクリックすると、お気に入りボタンが色付きに変わる

スクショはないです。自分のgmailのページを参考に実装してください

STEP6. 一連のフローを実践する

やること

今までのSTEPで学んできたことを活かして、以下のスクショ（Githubのtech blogの一覧ページと詳細ページ）のフロント実装を行ってみる。

github tech blog (リンク)

特に注意してもらいたいポイント

ページごとのCSSファイルを作るのでなく、部品ごとのCSSを作り、1枚目・2枚目に共通して使えるようなものにすること。

要件

一覧ページ

• 最新２記事分を実装
• タイトル部分にhover時にアンダーラインを表示
• 右の分類表のhover時の変化も実装
• リンクの文字色は変更

詳細ページ

• １記事分を実装する

スクショ（参照用）

一覧ページ

### 詳細ページ

STEP4. CSSを実際に適用する

やること

#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ファイルをコンポーネント単位で分割して管理することで、コンポーネント意識を強く持てるようになる

STEP3. HTMLのclass組み

やること

以下のスクショを見て、コンポーネントを意識してhtmlでのclass組みのみを考える

例）

.container
  .content
    .title
    .description
  .content
    .title
    .description.description--small

このclass組みの時に、すでにCSSのどのようなプロパティを使って実装するかを意識しなければならない。
paddingはどのclassに、borderはどのclassにetc.

## 課題のスクショ ### こちらのメールの中身部分のみをclass組みで考える

### 参考用