カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

2-5

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

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

学習キーワード

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

application.html.erbにViewportを追加

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

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

Copied!
app/views └── layouts └── application.html.erb
app/views/layouts/application.html.erb
12345678910111213141516171819
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が表示されるようになります。

image

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

現在のパート (0)
全パート (211)
みんなで助け合おう!
現在のパートのディスカッション 全0件