遅ればせのCSS入門
今までだましだまし書いてきたCSSにも限界を見せてきたのでここいらで一つ、真面目にCSSに入門してみようと思う。
という訳で現場のプロから学ぶ CSSコーディングバイブルの学習メモを書いておく
CSSって?
CSSとはカスケーディングスタイルシート(Cascading Style Sheet)の略。HTMLを装飾する役割を持つ。 CSS Working Groupのメンバーによって仕様が決められているらしい。
基本文法
HTMLにCSSを適応させるには3種類の方法を持つ。
- HTMLのstyle属性に直接CSSを置く
- HTMLのstyleタグでCSSを挟む
- linkタグのhref属性にCSSファイルを読み込ませる ←主流
文法は単純(?)
.text {
background :#ccc;
}
用語の説明
.text: セレクタ、装飾を適応したい箇所を指す
background:: プロパティ、MDNでは
CSS のプロパティは、関連付けられた値によりブラウザーがどのように要素を表示するかを定義する特性です。
1 とある。
#ccc;: 値、まあ説明は不要だろう
キー概念
CSSを考える上で4つの概念が重要とある。
- カスケード
- 継承
- 優先度
- 詳細度
CSSで言うCascading、つまり上から下へ流れる滝のように、指定したセレクタが複数ある場合は下の行で上書きされる。 htmlタグの値は親から子へ受け継がれ、親要素で指定されている要素は継承プロパティと呼ばれる。そして、上書きされない限り子へ引き継がれる。 親子関係の例
<h2 class="title">見出し<span>サブタイトル</span></h2>
では
.title(親) > span(子)
となる CSSを書く上で重要なのがCSS優先度。まあどの値を優先するかを決めると考えればよいだろう。 具体的な優先度はこんな感じ 優先度高 style属性 IDセレクタ クラスセレクタ、属性セレクタ、擬似クラスセレクタ 要素セレクタ、疑似要素セレクタ 優先度低 詳細度が高いほど優先される。
セレクタ
IDセレクタ、クラスセレクタ、要素セレクタはよく見るね
CSS設計
この辺りを読みたかった。CSSのコーディングスタイルには3つ代表的なものが存在する。
- OOCSS
- BEM
- SMACSS
クラスにも代表的な指定方法が3つある。
マルチクラス、装飾や機能ごとにクラスを分ける (Boostrapで使われる)
- ここがイイ！ 再利用性が高い
- ここがダメ！ styleの適応範囲が分かりにくい
シングルクラス、使用する目的に合わせてクラスを作成
- ここがイイ！ styleの適応範囲が分かりやすい
- ここがダメ！ 再利用性が低い
ユーティリティクラス(汎用クラス) クラス名がCSSのプロパティを表しているクラス、(ちなみにこのブログのテーマであるkissはこのタイプを多用している。)
- OOCSS オブジェクト指向型CSSコーディングを指す。ストラクチャ(構造)とスキン(装飾)の分離、コンテナ(場所)とコンテンツ(パーツ)
- BEM クラスの命名に厳格なルールある。複数人作業する場合はオススメ
- SMACSS CSSを5つのカテゴリーに分ける
- Base
- Layout
- Module
- State
- Theme それぞれのディレクトリ名を使う
CSSの基本
CSSを学習上で必要な知識
- セレクタ
- カスケードと継承、詳細度
- ボックスモデル
- マージンの相殺
- デフォルトスタイルシート、リセットCSS CSSを書く上で最初にすること テンプレート、レイアウト、コンポーネント、エレメントの定義。
とりあえずここまで。 うーんCSSは奥深いなあ