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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-4

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

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

この章で学べること

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

学習キーワード

Copied!
- erb - scss

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

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

Copied!
app/views/top └── index.html.erb
app/views/top/index.html.erb
12345678
Copied!
<div class="loginPage"> <div class="container"> <div class="loginPage_contents"> <h1 class="h3 loginPage_contents_title">新しいマッチを見つけよう</h1> <%= link_to "メールアドレスでログインする", new_user_session_path, class: "btn loginPage_contents_btn" %> </div> </div> </div>

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

Copied!
app/assets └── stylesheets └── application.scss
app/assets/stylesheets/application.scss
12345678
Copied!
/* Library */ @import "bootstrap"; @import "font-awesome-sprockets"; @import "font-awesome"; /* ここから追加する */ /* pages */ @import "top";

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

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

Copied!
app/assets └── stylesheets └── top.scss
app/views/stylesheets/top.scss
123456789101112131415161718192021
Copied!
.loginPage { &_contents { height: 80vh; display: flex; flex-direction: column; justify-content: space-between; text-align: center; &_title { margin-top: 12vh; } &_btn { display: block; max-width: 400px; padding: 20px; margin: 0 auto; border-radius: 30px; background: #fd5068; color: #fff; } } }

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

image

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

現在のパート (5)
全パート (211)
みんなで助け合おう!
現在のパートのディスカッション 全5件
2-4
川野真幹 2020-06-12
質問です

2-4を完了しましたが、2-2で出てくるようなLogin画面が消えず残っている状況です。(添付画像参照)
どのように消せば良いのでしょうか。

image

2-4
akasatana 2020-05-05
質問です

「NameError in Top#index」といったエラーが起きてしまいました。

また「rails routes」とコマンド入力したところ、
「Prefix Verb URI Pattern Controller#Action
root GET / top#index」という結果が出ました。

image

2-4
YOSHIO 2020-04-18
質問です

##発生している問題
ネームエラーが出る。
(NameError in Top#index)

##ためしたこと、
new_user_sessionpathが問題と考え、5行目をコメントアウトなど試しましたがエラーが出ました。

image

2-4
kayo 2019-01-07
質問です

以下の写真にある@import "top";は、なんの役割のあるimportでしょうか?この記述を外すとボタンが丸くなくなったので、ボタンを丸くする役割のあるscssのimportでしょうか?

image

2-4
林恵美 2018-12-03
質問です

pathが間違っています
間違い
次にapp/views/stylesheets/top.scssを以下のように編集します。

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