RailsTutorial 5章メモ

第5章 レイアウトを作成する

CSS

クラスとidの違い

クラスはページ内で何度も使えるが、idは一度しか使えない。

領域

• div・・・領域を分けるときに使う
• header・・・header領域に使う
• nav・・・？
• section・・・？
• container・・・？

クラスに対してスタイルを適用

.クラス名 {
//適用するもの
}

#id名 {
//適用するもの
}

SCSSではネストが可能

クラス

.center {
　text-align: center;
}
.center h1 {
　margin-bottom: 10px;
}
↓↓↓↓↓↓↓↓↓↓↓こうできる↓↓↓↓↓↓↓↓↓↓↓↓
.center {
　text-align: center;
　　h1 {
　　　margin-bottom: 10px;
　　}
}

パーシャル

１つのファイルにコードを全て書いてしまうと１つのファイルが煩雑になり、何がどこに書いてあるか分かりにくくなる。
パーシャルは別のファイルに一部のコードを記述させてrenderで見に行くことで整理をしやすくする。

パーシャルを利用したい場所に下記のコードを入れると

<%= render 'layouts/header' %>

views以下のフォルダ構造を見て、layoutsフォルダ内の_header.html.erbファイルのコードを挿入する。

アセットパイプライン

//要調査

RailsのルートURL

routes.rb

root 'static_pages#home' 　　　⇒　'/'にアクセスするとStaticPagesコントローラのhomeアクションを呼ぶ
　　　　　　　　　　　 　　　⇒　さらにroot_pathが使えるようになる
get '/help', to: 'static_pages#help'⇒'/help'のURLでStaticPagesコントローラのhelpアクションを呼ぶ
　　　　　　　　　　　　　　　⇒さらにhelp_pathが使えるようになる

リンクのテスト

assert_template 'static_pages/home' 　　　　⇒　Homeページが正しいビューを描画しているか確認
assert_select "a[href=?]", root_path, count: 2　⇒　同ページにroot_pathのリンクが2つあるか

assert_selectはHTML要素に関するテストを可能にする。結構なんでもテストできるっぽい。