【応用39％】TECHCAMP名古屋14日目
railsで12個、Sassで9個、BEMで6個、Hamlで8個のことについて学んだので、それぞれ説明します
★railsで学んだこと★
1.Hamlを使えるようにするためのGem
haml-rails
2.erbファイルを一括でHamlに変換するコマンド
rails haml:erb2haml
3.Sassを使えるようにする手順
application.cssの中身をすべて消す
拡張子をscssに変更
_reset.scssを作成
application.scssで@importを使って_reset.scssを読み込む
4.application.scssの使い方
リセットscssを含む全てのscssファイルを@importで読み込みます
5._reset.scssの使い方
リセットCSSを記述します
有名なリセットCSSを4つ紹介します
YUI 3
Eric Meyer’s
HTML5 Doctor
normalize.css
6.stylesheets/configディレクトリの使い方
プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理します
7.stylesheets/mixinディレクトリの使い方
scss内で使用するmixinファイルを管理するフォルダです
8.stylesheets/modulesディレクトリの使い方
モジュールを管理するためのフォルダです
モジュールとは、いくつかの要素をまとめた部品の集合という意味です
9.stylesheets/vendorディレクトリの使い方
ライブラリのファイルを管理するディレクトリです
cssにはライブラリと呼ばれるものがあります
ライブラリとはあらかじめcssが書かれたファイルです
有名なCSSのライブラリでは、bootstrapが挙げられます
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がります
10.stylesheets/overrideディレクトリの使い方
vendorフォルダに格納してある外部ライブラリを上書きするためのscssファイルを管理するフォルダです
11.FontAwesome
Webフォントの1つで、文字列を扱うのと同じようにアイコンを表示させることができます
12.FontAwesomeを使えるようにする方法
Gemfileにgem 'font-awesome-sass'を記述し、
bundle install
★Sassで学んだこと★
1.Sassとは
CSSを拡張した言語です
セレクタのネスト化、変数、パーシャル、mixinなどが使えるようになります
2.Sass記法
Sassの記法の一つです
今世界で最も使われているプログラミング言語
Pythonのような書き方ができる記法です
しかし、CSSとは大きく書き方が異なっており、
普及しませんでした
3.Scss記法
Sassの記法の一つです
さまざまなCSSの記述を簡略化することができます
4.変数
変数を使うことができます
$light_grey: #eeeeee ;
ドル 変数名 値の形で変数を定義できます
color: &light_grey;
プロパティ 変数名の形で使用することができます
5.パーシャル
Sassファイルは分割できます
分割したファイルはパーシャルと呼びます
分割したファイルをSass内で@importを用いて読み込むことができます
パーシャルは、ファイル名の先頭を_にします
6.パーシャルファイルをインポートする方法
@import "reset"
ファイル名からアンダーバーと拡張子を抜いた文字列を指定します
@import "modules/message"
別のディレクトリに入っている場合は、
ディレクトリ名/ファイル名から_と拡張子を抜いた文字列を指定します
7.mixin
まとまったスタイルを定義する機能です
@mixin note(){}
アットミックスイン ミックスイン名の形で定義します
mixinを呼び出す時は@include note();のようにします
アットインクルード ミックスイン名
8.calc関数の罠
CSSでよく使われるcalc関数には罠があります
railsもエラーを吐かず、初学者が見つけるには極めて困難な罠です
バグのような挙動をします
その罠とは、四則演算の両脇に半角の空白を入れないと機能しないというものです
×height: calc(100%-100px);
◯height: calc(100% - 100px);
9.ボタンにマウスカーソルを乗せた時にポインターを変更する方法
cursor: pointer;
★BEMで学んだこと★
1.BEMとは
Block、Element、Modifierの略です
多くの開発者が取り入れているCSS設計です
厳格なクラス命名規則が特徴的です
BEMの命名規則に従って記述されたHTMLおよびHamlは、
Sassの能力を最大限に引き出すことができます
2.Block
ある要素の大元となるブロック要素です
Blockの命名には名詞を使用します
ElementやModifierは、このBlockを起点に命名されます
3.Element
Blockに属する子要素です
1つ以上のElementによってBlockは構成されています
Elementの命名規則には名詞を使用します
4.Modifier
BlockまたはElementに特別な修飾をする要素です
Modifierの命名には形容詞を使用します
5.BlockとElementを繋ぐ方法
side-bar__group-list
アンダーバー2つで繋ぎます
6.Modifierに繋ぐ方法
side-bar__group-list--black
ハイフン2つで繋ぎます
★Hamlで学んだこと★
1.Hamlとは
HTMLよりも簡単に書くためのビューテンプレートエンジンです
Hamlを使用することで、「綺麗に」「読みやすく」「生産的に」ビューを
作成することができます
2.クラス付きdivの書き方
先頭に.をつけてクラス名を記述します
<div class="header"></div>
↓
.header
3.1行の入力欄を作成する方法
%input{type: :text}
補足
%input{type: :text, class: "input", placeholder: "message"}で
クラスを付与したり初期表示を設定したりもできます
4.送信ボタンを作成する方法
%input{type: :submit}
補足
%input{type: :submit, value: "Send", class: "sendbtn"}で
クラスを付与したり送信の文字列を変更したりもできます
5.ファイルを開くボタンを作成する方法
%input{type: :file}
補足
%input{type: :file, class:”file”}
クラスを付与することもできます
6.ファイルを開くボタンをアイコンに割り当てる方法
1.ラベルを作成します
%label{class: "file"}
2.ラベルにアイコンとファイルを開くボタンを割り当てます
%label{class: "file"}
= icon('fas', 'image')
%input{type: :file, class:"none"}
3.CSSでファイルを開くボタンを非表示にします
.none{
display:none;
}
7.入力フォームにアイコンを重ねる方法
1入力フォームとアイコンの親要素を作成します
.window
%input{type: :text}
.icon
= icon('fas', 'image')
2.cssで親要素をdisplay:flex;で横並びにしたあと、
position:relative;で、相対位置設定にします
.window{
display:flex;
position:relative
}
3.子要素でアイコンをposition:absolute;で絶対位置設定にし、
right:0;などとすると入力フォーム内にアイコンを重ねることができます
.icon{
position:absolute;
right:0px;
}
8.#を表示する方法
そのまま#と記述するとエラーとなるので、
=“#”と記述します