11時に出席して12時に帰るという何しにいったんだろう状態。
ちょっと不意な予定ができて、外に出てしまったらもう教室戻る気がなくなったんだ。なんていうか、応用は本当に教室でやる意味がない気がする。
ちょっと今日は勉強が進んでないので深夜にちくちく進めます。
ruby
print puts
- print 改行なし
- puts 改行あり
%記法
”や’、\(エスケープ)の記述を省略し、可読性をあげる記法
%Q %q
文字列用の記法
%Q(“aaa”)
\”aaa\”
%W %w
配列を作成する記法。
%Wは式展開あり。%wは式展開なし。
%w(日 月 火 水 木 金 土)
["日", "火", "水", "木", "金", "土"]require 'date'
a = Date.today.wday
arr = %w(日 月 火 水 木 金 土)
print "今日は#{arr[a]}曜日"
puts "da!!" if a==6SASS
.sassと.scssがある。scssを用いる。
&
&(アンパサンド)は、適用されているセレクタを指す。
パーシャル
分割したSassファイル
ファイル名を_（アンダースコア）をつける。
読み込むには、@import ファイル名と記述。
@import "reset"; /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */mixin
スタイルを定義する。
_clearfix.scssのような別ファイルで管理する。
@mixin clearfix() {
&:after {
content: '';
display: block;
clear: both;
}
}mixinしたい要素はincludeを用いて記述する。
.menu {
@include clearfix();
}リセットCSS
ブラウザごとにCSSの初期値を持つため、ブラウザ間で差が生じる場合がある。
これを解消するために別の初期値を当てたCSSのこと。
以下のようなメジャーなものがある。
- YUI 3
- Eric Meyer’s
- HTML5 Doctor
- normalize.css
フォルダ管理
以下のようなサブフォルダで管理することが多い。
- config
- mixin
- module
- vendor ・・・ ライブラリを管理
- oberride
BEM
Block、Element、Modifierの頭文字
CSSのクラスの命名規則を考える。
| 要素 | 説明 |
|---|---|
| Block | 大元となるブロック要素 ElementやModifierは、このBlockを起点に命名する。 |
| Element | Blockに属する子要素。 1つ以上のElementにより、Blockは構成されています。 |
| Modifier | 上記に特別な修飾をする要素です。 Modifierの命名には形容詞を用いる。 |
- BlockとElementは、アンダースコア2つでつなぐ
- Modifierは、ハイフン2つでつなぐ
- 単語を繋ぐ場合はハイフン1つ。
<ul class='menu'>
<li class='menu__list'>hogehoge</li>
<li class='menu__list menu__list--black'>fugafuga</li>
</ul>Haml
HTMLを簡単に記載する方法。
Railsではhaml-railsというGemがある。
%でタグ付け
インデントで子要素
変数が使えるので#{}で式展開
= でerbで使う式を記述
GEMの管理
＃いずれの環境でも必要
gem 'devise'
＃開発環境にのみ必要
group :development do
gem 'rspec'
end
＃テスト環境にのみ必要
group :test do
gem 'rspec'
end
＃本番環境にのみ必要
group :production do
gem 'unicorn'
end新規プロジェクトの始め方haml/scss
rails new NewProject
rails db:create
gemファイルに
gem "haml-rails", "~> 2.0"
bundle install
rails haml:erb2haml
rails g controller hogehoges
hogehogez/index.html.hamlを作成
routes.rb
root 'hogehoges#index'
application.css削除
application.scss追加し@import "hogehoges";と記載
hogehoges.scssを_hogehoges.scssへリネーム
_reset.scssを作成し、リセットCSS内容をコピペ
application.scssに@import "reset";と記載
rake db:create と rails db:create
rails5からはrakeではなくrailsコマンドを使うように変更された。
rakeコマンドも使えるが、あえて使う意味はない。
rails4以前ではバージョン情報をgemファイル内に記載していたため、bundle exec rake db:**としていたが、rails5からはbundle execは不要となり、単にrails db:**でよくなった。
コラム 2.1. Rakeについてを参照。
fontawesome
gemfile
gem font-awesome-rails
bundle install
application.scss
@import "font-awesome";
コメント