教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートではトップ画面の見た目を整えていきます。
Copied!- Viewの編集
- 見た目を整える方法
Copied!- erb
- scss
まず、app/views/top/index.html.erb を以下のように編集します。
Copied!app/views/top
└── index.html.erb
app/views/top/index.html.erb12345678 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.scss12345678 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.scss123456789101112131415161718192021 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/ にアクセスしてください。以下の画面のようになってるとうまく動作してます。
以上で今回のパートは終了です。
2-4を完了しましたが、2-2で出てくるようなLogin画面が消えず残っている状況です。(添付画像参照)
どのように消せば良いのでしょうか。
「NameError in Top#index」といったエラーが起きてしまいました。
また「rails routes」とコマンド入力したところ、
「Prefix Verb URI Pattern Controller#Action
root GET / top#index」という結果が出ました。
##発生している問題
ネームエラーが出る。
(NameError in Top#index)
##ためしたこと、
new_user_sessionpathが問題と考え、5行目をコメントアウトなど試しましたがエラーが出ました。
以下の写真にある@import "top";は、なんの役割のあるimportでしょうか?この記述を外すとボタンが丸くなくなったので、ボタンを丸くする役割のあるscssのimportでしょうか?