#第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;
}
}
##パーシャル
1つのファイルにコードを全て書いてしまうと1つのファイルが煩雑になり、何がどこに書いてあるか分かりにくくなる。
パーシャルは別のファイルに一部のコードを記述させて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要素に関するテストを可能にする。結構なんでもテストできるっぽい。