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

  2-5 スマホ用のサービスの開発環境を整える

今回のパートではViewportを追加してスマートフォン用のサービス開発環境を整えていきます。

学習キーワード


- Viewport
- デベロッパーツール

application.html.erbにViewportを追加


Viewportを導入することでスマートフォン用のスタイルを適用できます。

app/views/layouts/application.html.erbに以下のコードを追加してください。

app/views
└── layouts
    └── application.html.erb

これでviewportの設定は終わりです。

下記の動画のように

http://localhost:3000/ を開いて、メニューバーを開き検証を押してください。

するとデベロッパーツールが出てくるので、デベロッパーツールの左上にあるToggle devise toolbarを押すと、スマートフォンサイズのviewが表示されるようになります。

今回のカリキュラムではスマートフォン用に見た目を整えているので、上記の手順でデバッグしてください。

議論
0 質問
このコースの評価は?