Railsの会18,19日目「bootstrap /partial /Sass 」
今日の範囲です。祝 5章!!!
今回はHTMLの部分は飛ばしているので部分的な説明になると思います。(レイアウトの話。)
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' %>
アセットパイプライン
静的ファイルを目的別に分類する3つのディレクトリが使用されている。
app /assets 現在アプリケーション固有のアセット lib /assets 開発チームにより作成されたライブラリ用アセット vendor /assets サードパーティのアセット
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; }