HTML
複数のクラスの設定
class="クラス1 クラス2"
リンクの作り方
パターン1 : <%= link_to "名前", "リンク先",class:"クラス名" %>
パターン2 : <a href="リンク先" class="クラス名"> 名前 </a>
箇条書き
<ul class="クラス名">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
...
</ul>
画像の挿入
<%= link_to image_tag("画像ファイル名", alt:"名前"),'リンク先' %>
変数埋め込み
<%= @変数 %>
フォーム
/userにpostリクエスト(@userを保持して)
<%= form_for(@user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.label :email %>
<%= f.email_field :email %>
<%= f.label :password %>
<%= f.password_field :password %>
<%= f.label :password_confirmation, "Confirmation" %>
<%= f.password_field :password_confirmation %>
<%= f.submit "Create my account", class: "btn btn-primary" %>
<% end %>
/signupにポストリクエスト(@userを保持して)
<%= form_for(@user,url:signup_path) do |f| %>
モデルが存在しないとき
リソースの名前とそれに対応するURLを具体的に指定する必要がある
form_for(:session, url: login_path)
params[:session][:email]とparams[:session][:password]
HTMLの分割(パーシャル)
<%= render '読みだすHTML" %>
例: app/views/layouts/_shim.html.erbというファイルを探してその内容を評価し、結果をビューに挿入する場合
<%= render 'layouts/shim' %>
CSS
基本的な文法
クラスの指定
.クラス名{
内容;
}
例
.center {
text-align: center;
}
idの指定
#id名{
内容;
}
例
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
Bootstrap
Bootstrapを使うと、洗練されたWebデザインとユーザーインターフェイス要素を簡単にHTML5アプリケーションに追加することができる。最も大きな利点はレスポンシブデザインにできること。
bootstrap-sassのインストール
gem 'bootstrap-sass', '3.3.7'
$ bundle install
scssファイルの作成
$ touch app/assets/stylesheets/custom.scss
Bootstrap CSSの追加
app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";