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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

2-4

ヘッダーの作成

このパートではヘッダーを作成していきます。ヘッダーとは、WEBページの上部に位置し、どのページが開かれても常に共通して表示される部分です。

本教材はRailsの大まかな流れを把握することを一番の目的としているので、HTML/CSSの解説は省略しています。細かく知りたい方はご自身で調べましょう。

本パートの目標物

本パートでは下記の画像のように画面上部にヘッダーを表示させるところまでやっていきます。

image

目標物を作成するまでの流れ

  1. ヘッダーのビューを作成
  2. custom.scssファイルをインポート
  3. ヘッダーのscssを追加
  4. 部分テンプレートを使って共通化

では実際に進めていきましょう。

1. ヘッダーのビューを作成

まず、app/views/layouts/application.html.erbにコードを追加していきます。

(HTMLのソースコードに関しては本教材のメインではないので、コピー&ペーストをしても構いません。)

Copied!
app └── views └── layouts └── application.html.erb
app/views/layouts/application.html.erb
12345678910111213141516171819202122232425262728293031323334353637383940
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メソッドを使うことでシンプルに記述することが可能になります。

【例】

erb
1
Copied!
<%= link_to "文字列", パス, class: "class名" %>

参考)link_to

2. custom.scssファイルをインポート

本教材のcssのコードはcustom.scssファイルに記載します。

custom.scssに記載したコードを読み込むにはインポートする必要があるので、application.scssに以下のコードを追加してください。

app/javascript/stylesheets/application.scss
1234
Copied!
@import '~bootstrap/scss/bootstrap'; /* ここの行を追加する */ @import "custom";

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

3. ヘッダーのscssを追加

次にapp/javascript/stylesheets/ディレクトリの中にcustom.scssファイルを作成します。作成したらcustom.scssに以下のコードを追加してください。

(CSSのコードの関しては本教材のメインではないので、コピー&ペーストをしても構いません)

app/javascript/stylesheets/custom.scss
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
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/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。

image

4. 部分テンプレートを使って共通化

ビューで共通パーツや繰り返し処理をするパーツは部分テンプレート(複数箇所で使う一部分をテンプレート化してまとめる)を使います。

ヘッダーはトップページ以外でも使うので部分テンプレートにします。まずapp/views/の中にpartialというディレクトリを作成してください。

作成したpartialというディレクトリに今度は_header.html.erbというファイルを作成します。

部分テンプレートのファイル名は先頭にアンダーバーをつけます。

_header.html.erbファイルには以下のコードを追加してください。

Copied!
app └── views └── partial └── _header.html.erb
app/views/partial/_header.html.erb
1234567891011121314151617181920
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.erb
12345678910111213141516171819
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ファイルを呼び出しています。

erb
1
Copied!
<%= render 'partial/header' %>

部分テンプレートについては以下の記事を参考にしてください。

参考)Action View の概要

では、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。

image

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

お疲れ様でした。

現在のパート (8)
全パート (121)
みんなで助け合おう!
現在のパートのディスカッション 全8件
2-4
伊藤滉暉 2021-12-11
scssが適用されません

発生している問題

2-4パートの手順を踏んでいるのにscssが適用されない

エラー画面をスクショで添付してください

Taskapp3 - Google Chrome 2021_12_11 8_21_23.png

試したこと

何回か同じ作業を繰り返しましたが、特に効果はありませんでした。

補足情報(フレームワークのバージョン・OS)

rails6.1.4
すみません、windowsです。サポート外を覚悟で質問しています。

2-4
Daipon! 2021-04-25
ルーティングに関する疑問点

発生している疑問点

ルーティングによって, top/index.html.erbが呼び出されるまでは理解できますが,その前に何故 /layouts/application.html.erb を呼び出せているのでしょうか..?

試したこと

ルーティングについて調べたり,top/index.html.erbのファイル内を確認しましたが,理由はわかりませんでした.

2-4
Akihito Kimura 2021-03-20
cssが適用されない

下記画像通りcssが適用されません。

エラー画面をスクショで添付してください

https://gyazo.com/0ed59af9dc1a08da94116dca94067710

試したこと

何度も最初からやり直しました。

補足情報(フレームワークのバージョン・OS)

Rails 6.0.35 ・ Mac OS

2-4
髙野 晃 2020-11-30
cssが正しく反映されません

発生している問題

cssが正しく反映されない
Bootstrap導入までは正常でした
cssファイルをインポートしてからおかしくなった

エラー画面をスクショで添付してください

(ドラッグ & ドロップで添付できます)スクリーンショット 2020-11-30 8.56.33.png

試したこと

Bootstrap導入で作ったボタンに影響が出てたので導入し直してみました

補足情報(フレームワークのバージョン・OS)

Rails 6.0.3.4・Mac OS

2-4
阿部隆一朗 2020-07-24
質問です

#headerのサインアウトボタンの位置が揃わない。

#https://gyazo.com/c42ebe8fff5a2e886c55f77c152b7232

#scssを工夫してもうまく修正出来ませんでした
 よろしくお願いします