前のパートに戻る 完了して次のパートへ  

  2-4 ヘッダーの作成

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

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

本パートの目標物


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

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


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

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

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


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

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

app
└── views
    └── layouts
        └── application.html.erb

<a>タグの箇所はrailsのヘルパーメソッドであるlink_toメソッドに書き換えます。link_toメソッドを使うことでシンプルに記述することが可能になります。

【例】

<%= link_to "文字列", パス, class: "class名" %>

参考)link_to

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

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

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

app
└── assets
    └── stylesheets
        └── application.scss

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

3. ヘッダーのscssを追加


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

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

app
└── assets
    └── stylesheets
        └── custom.scss

上記のコードを追加したら、http://localhost:3000/ にアクセスしてみてください。下記の画像のようになっていればうまく動作してます。

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


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

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

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

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

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

app
└── views
    └── partial
        └── _header.html.erb

上記のコードは先ほどapplication.html.erbに追加したコードと全く同じコードになります。

また、app/views/layouts/application.html.erbで先程貼り付けた<header>... </header>の間を下記のコードに変更します。

application.html.erbを以下のように編集してください。

app
└── views
    └── layouts
        └── application.html.erb

下記の一行のコードがpartialフォルダー配下の_header.html.erbファイルを呼び出しています。

<%= render 'partial/header' %>

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

参考)Action View の概要

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

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

お疲れ様でした。

議論
0 質問
このコースの評価は?