0
0

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 3 years have passed since last update.

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

Last updated at Posted at 2020-04-25

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

追加中...

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?