教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
今回のパートではViewportを追加してスマートフォン用のサービス開発環境を整えていきます。
Copied!- Viewport
- デベロッパーツール
Viewportを導入することでスマートフォン用のスタイルを適用できます。
app/views/layouts/application.html.erbに以下のコードを追加してください。
Copied!app/views
└── layouts
└── application.html.erb
app/views/layouts/application.html.erb12345678910111213141516171819 Copied!<!DOCTYPE html>
<html>
<head>
<title>TechpitMatch</title>
<%= csrf_meta_tags %>
<!-- ここの行を追加する -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
</body>
</html>
これでviewportの設定は終わりです。
下記の動画のように
http://localhost:3000/ を開いて、メニューバーを開き検証を押してください。
するとデベロッパーツールが出てくるので、デベロッパーツールの左上にあるToggle devise toolbarを押すと、スマートフォンサイズのviewが表示されるようになります。
今回のカリキュラムではスマートフォン用に見た目を整えているので、上記の手順でデバッグしてください。