0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RailsTutorial 5章メモ

Posted at

#第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要素に関するテストを可能にする。結構なんでもテストできるっぽい。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?