前のパートに戻る 完了して次のパートへ  

  2-4 トップ画面の見た目を整える

このパートではトップ画面の見た目を整えて行きます。

この章で学べること


- Viewの編集
- 見た目を整える方法

学習キーワード


- erb
- scss

トップページのhtmlを編集する


まず、app/views/top/index.html.erbを以下のように編集します。

app/views/top
└── index.html.erb

次にapp/assets/stylesheets/application.scssに以下のコードを追加します。

app/assets
└── stylesheets
    └── application.scss

上記のコードを追加することでstylesheets/top.scssファイルのコードを読み込めるようになります。

次にapp/assets/stylesheets/top.scssを以下のように編集します。

app/assets
└── stylesheets
    └── top.scss

top/scssを編集したら、サーバーを一度再起動して、http://localhost:3000/ にアクセスしてください。以下の画面のようになってるとうまく動作してます。

以上で今回のパートは終了です!

議論

5 質問

このコースの評価は?