Railsチュートリアル備忘録 -HTML/CSS編-

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";

追加中...