教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
このパートではヘッダーを作成していきます。ヘッダーとは、WEBページの上部に位置し、どのページが開かれても常に共通して表示される部分です。
本教材はRailsの大まかな流れを把握することを一番の目的としているので、HTML/CSSの解説は省略しています。細かく知りたい方はご自身で調べましょう。
本パートでは下記の画像のように画面上部にヘッダーを表示させるところまでやっていきます。
では実際に進めていきましょう。
まず、app/views/layouts/application.html.erb
にコードを追加していきます。
(HTMLのソースコードに関しては本教材のメインではないので、コピー&ペーストをしても構いません。)
Copied!app
└── views
└── layouts
└── application.html.erb
app/views/layouts/application.html.erb12345678910111213141516171819202122232425262728293031323334353637383940 Copied!<!DOCTYPE html>
<html>
<head>
<title>kanban</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%# ==========ここから追加する========== %>
<header class="header">
<nav class="nav">
<ul class="header_menu">
<li class="nav-link">〇〇さん</li>
<li class="header_menu_title"><%= link_to "kanban", root_path, class: "nav-link" %></li>
<li>
<ul class="header_menu_inner">
<%# リストを作成するリンクは今後開発していくので、今は"#"にしておきます。 %>
<li>
<%= link_to "#", class: "nav-link" do %>
<span class="mr-1">リストを作成</span>
<i class="fas fa-edit"></i>
<% end %>
</li>
<li><%= link_to "サインアウト", "#", class: "nav-link" %></li>
</ul>
</li>
</ul>
</nav>
</header>
<%# ==========ここまで追加する========== %>
<%= yield %>
</body>
</html>
<a>
タグの箇所はrailsのヘルパーメソッドであるlink_toメソッドに書き換えます。link_toメソッドを使うことでシンプルに記述することが可能になります。
【例】
erb1 Copied!<%= link_to "文字列", パス, class: "class名" %>
参考)link_to
本教材のcssのコードはcustom.scss
ファイルに記載します。
custom.scss
に記載したコードを読み込むにはインポートする必要があるので、application.scss
に以下のコードを追加してください。
app/javascript/stylesheets/application.scss1234 Copied!@import '~bootstrap/scss/bootstrap';
/* ここの行を追加する */
@import "custom";
上記のコードを追加することでcustom.scssファイルのコードを読み込めるようになります。
次にapp/javascript/stylesheets/
ディレクトリの中にcustom.scss
ファイルを作成します。作成したらcustom.scss
に以下のコードを追加してください。
(CSSのコードの関しては本教材のメインではないので、コピー&ペーストをしても構いません)
app/javascript/stylesheets/custom.scss123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 Copied!body {
overflow: visible;
}
.notice,
.alert {
display: none;
}
// header
.header {
background: #026aa7;
padding: 10px;
.nav {
.header_menu {
display: flex;
width: 100%;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
align-items: center;
li {
list-style: none;
color: #fff;
a {
color: #fff;
}
}
&_title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
font-weight: bold;
}
&_inner {
display: flex;
padding: 0;
align-items: center;
.listNew {
&:after {
font-family: "Font Awesome 5 Free";
content: "\f044";
display: inline-block;
margin-left: 10px;
font-size: 20px;
}
}
}
}
}
}
上記のコードを追加したら、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。
ビューで共通パーツや繰り返し処理をするパーツは部分テンプレート(複数箇所で使う一部分をテンプレート化してまとめる)を使います。
ヘッダーはトップページ以外でも使うので部分テンプレートにします。まずapp/views/
の中にpartial
というディレクトリを作成してください。
作成したpartial
というディレクトリに今度は_header.html.erb
というファイルを作成します。
部分テンプレートのファイル名は先頭にアンダーバーをつけます。
_header.html.erb
ファイルには以下のコードを追加してください。
Copied!app
└── views
└── partial
└── _header.html.erb
app/views/partial/_header.html.erb1234567891011121314151617181920 Copied!<header class="header">
<nav class="nav">
<ul class="header_menu">
<li class="nav-link">〇〇さん</li>
<li class="header_menu_title"><%= link_to "kanban", root_path, class: "nav-link" %></li>
<li>
<ul class="header_menu_inner">
<%# リストを作成するリンクは今後開発していくので、今は"#"にしておきます。 %>
<li>
<%= link_to "#", class: "nav-link" do %>
<span class="mr-1">リストを作成</span>
<i class="fas fa-edit"></i>
<% end %>
</li>
<li><%= link_to "サインアウト", "#", class: "nav-link" %></li>
</ul>
</li>
</ul>
</nav>
</header>
上記のコードは先ほどapplication.html.erb
に追加したコードと全く同じコードになります。
また、app/views/layouts/application.html.erb
で先程貼り付けた<header>... </header>
の間を下記のコードに変更します。
application.html.erb
を以下のように編集してください。
Copied!app
└── views
└── layouts
└── application.html.erb
app/views/layouts/application.html.erb12345678910111213141516171819 Copied!<!DOCTYPE html>
<html>
<head>
<title>kanban</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%# <header>...</header>の間のコードを消して下の一行に入れ替える %>
<%= render 'partial/header' %>
<%= yield %>
</body>
</html>
下記の一行のコードがpartial
フォルダー配下の_header.html.erb
ファイルを呼び出しています。
erb1 Copied!<%= render 'partial/header' %>
部分テンプレートについては以下の記事を参考にしてください。
では、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。
以上で今回のパートは終了です。
お疲れ様でした。
2-4パートの手順を踏んでいるのにscssが適用されない
何回か同じ作業を繰り返しましたが、特に効果はありませんでした。
rails6.1.4
すみません、windowsです。サポート外を覚悟で質問しています。
ルーティングによって, top/index.html.erbが呼び出されるまでは理解できますが,その前に何故 /layouts/application.html.erb を呼び出せているのでしょうか..?
ルーティングについて調べたり,top/index.html.erbのファイル内を確認しましたが,理由はわかりませんでした.
https://gyazo.com/0ed59af9dc1a08da94116dca94067710
何度も最初からやり直しました。
Rails 6.0.35 ・ Mac OS
cssが正しく反映されない
Bootstrap導入までは正常でした
cssファイルをインポートしてからおかしくなった
(ドラッグ & ドロップで添付できます)
Bootstrap導入で作ったボタンに影響が出てたので導入し直してみました
Rails 6.0.3.4・Mac OS
#headerのサインアウトボタンの位置が揃わない。
#https://gyazo.com/c42ebe8fff5a2e886c55f77c152b7232
#scssを工夫してもうまく修正出来ませんでした
よろしくお願いします