キリンめも(技術)

記事を書いています #rails #swift #JS #UE4 #unity

Railsの会18,19日目「bootstrap /partial /Sass 」

今日の範囲です。祝 5章!!!
今回はHTMLの部分は飛ばしているので部分的な説明になると思います。(レイアウトの話。)

f:id:geta206:20170411193012p:plain

IEの処理

IEに対応することがなければ記述しなくて大丈夫

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

imageタグ

画像のリンク貼る link_toに link_tagを貼る

image_tag(画像ファイルへのパス, [, (オプション or HTMLオプション)])
<%= link_to image_tag("rails.png", alt: "Rails logo"),'http://rubyonrails.org/' %>

ファイル場所 app /assets /images/

ファイル名が重ならないようにRailsが文字列を追加している
もしRailsの写真使いたい時はu9jfoshfiu90...文字をそのままコピーして使わないといけない。

Bootstrap を作る

 @import "bootstrap-sprockets";
 @import "bootstrap";

CSS復習

/*テキストの大文字・小文字を指定する [upperdcase : 全て大文字で表示]*/
 text-transform :uppercase;
/*フォントの太さを指定[bold: 一般的な太さ]*/
font-weight :bold;
/*テキストの下線・打ち消し線等を指定[none: 何も表示しない(初期値) ]*/
text-decoration: none;

partial (パーシャル)

部分テンプレートまたはパーシャルは、出力を扱いやすく分割するための仕組みです。パーシャルを使用することで、ビュー内のコードをいくつものファイルに分割して書き出し、他のテンプレートでも使いまわすことができます。

ルール: 出力(viewの一部)するには、viewでrender メソッドを使用します。

 <%= render "menu" %>


読み込む場所 app/views/layouts/apprication.html.erb

<%=render 'layouts/footer' %>

Action View の概要 | Rails ガイド

アセットパイプライン

静的ファイルを目的別に分類する3つのディレクトリが使用されている。

  app /assets          現在アプリケーション固有のアセット
  lib  /assets           開発チームにより作成されたライブラリ用アセット
  vendor /assets     サードパーティのアセット
マニフェストファイル

app/assets/stylesheets/application.css

*=require_tree,
*=require_self

引数として与えられたディレクトリ下を再帰的に全てを検索する。

 *= require_tree . 

require_self呼び出しの時にCSSがあれば読み込む。
複数のディレクティブを記述しているとき、読み込まれる順番を指定したい場合に利用します。

 *= require_self

Sass

Sassの使い方について紹介します!
通常の書き方 

#logo{                  
float: left;
   ...
}

#logo:hover {
  color: #fff;
}

1. Sassの書き方をすると入れ子にできます

#logo {
  float: left;
  &:hover {
    color:#fff;
  }
}

2. 他には bootstrap-sass というgemを利用すると、変数を作れます!
LESS変数一覧: Customize and download · Bootstrap
LESSとSassの変数の見分け方
LESS: @
Sass: $

使用例

$light-gray: #777;

h2{
 color: $light-gray;
}

Railsでページごとのscssを管理する方法 -- blog.10rane.com