Closed kenta0425 closed 3 years ago
link_to
<%= link_to "Sign up naw!", "#", class: "btn btn-lg btn-primary" %>
Bootstrap
カスタムCSS
CSSの形式
body {
padding-top: 60px;
}
.center {
text-align: center;
}
.center h1 { margin-bottom: 10px; }
↓
.center { text-align: center; h1 { margin-bottom: 10px; } }
- hover属性などはアンパーサンド&を使って実現する
color: #fff; }
- 変数を使って書き換えられる
h2 { . color: #777; } footer { . color: #777; }
↓
$light-gray: #777; h2 { . color: $light-gray; } footer { . color: $light-gray; }
**パーシャル**
<%= render 'layouts/shim' %>
- renderと呼ばれるRailsヘルパー呼び出しだけで、HTMLのスタイルシート行を置換している
- ファイル名 _shim.html.erb の先頭にアンダースコアが入る
**アセットパイプライン**
- アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、3つの主要な機能がある
- 本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成される
- 開発環境ではプログラマにとって読みやすいように整理され、本番環境ではAsset Pipelineを使ってファイルを最小化してくれ、異なった状況に対して最高の環境を提供してくれる
**アセットディレクトリ**
- 静的ファイルを目的別に分類する、標準的な3つのディレクトリが使われる
- cusom.scssはsample_app固有のアセットなので、app/assets/stylesheetsに配置されている
- app/assets : 現在のアプリケーション固有のアセット
ls app/assets/
config image stylesheets
- lib/assets : あなたの開発チームによって作成されたライブラリ用のアセット
- vendor/assets : サードパーティのアセット(デフォルトでは存在しない)
**マニフェストファイル**
- マニフェストファイルを使ってアセットをどのように1つのファイルにまとめるかをRailsに指示することができる
- 実際にアセットをまとめる処理を行うはSprocketsというgem
- CSSとJavaScriptには適用されるが、画像ファイルは適用されない
*= require_tree .
- app/assets/stylesheetsディレクトリ(サブディレクトリを含む)中の全てのCSSファイルが、アプリケーションCSSに含まれるようにしている
*= require_self
- CSSの読み込みシーケンスの中、application.css自身もその対象に含めている
**プリプロセッサエンジン**
- 主な拡張子はScss用の.scss、CoffeeScript用の .coffee、埋め込みRuby(ERb)用の .erb の3つ
**レイアウトリンク**
<%= link_to "About", about_path %>
- 上記のようにすることでコードの意味がわかりやすくなり、about_pathの定義を変えればabout_pathが使われているすべてのURLを変更できるため、柔軟性が高まる
**RailsのルートURL**
- ブラウザからアクセスしやすくする
- root_path や root_url といったメソッドを通してURLを参照することができる
root_path -> '/' root_url -> 'https://www.example.com/'
- 生のURLではなく、名前付きルートを使ってURLを参照することができる
get 'static_pages/help'
↓
get '/help', to: 'static_pages#help'
<%= link_to "About", '#' %>
↓
<%= link_to "About", about_path %>
**Integration Test (統合テスト)**
- アプリケーションの動作を端から端までシュミレートしてテストすることができる
assert_select "a[href=?]", root_path, count: 2
- aタグとhrefタグを使って特定のリンクが存在するか調べる
- リンクが2つ以上存在するときはcountを使って指定する
WHY
WHAT