bootstrap
グリッドデザインシステムなので、基本は、
- row
- col-lg-幅
基礎部分の解説
bootstrap offcial site
bootsttap3超速レビュー
初心者のための簡単なbootstrap入門
参考サイト
// すごくよくまとまっている css2.0
http://hp.vector.co.jp/authors/VA022006/css/
// css3.0 ブラウザ別対応表
http://ebisu.com/note/css3/
// css3.0 リファレンス
http://memopad.bitter.jp/w3c/css3/css3_reference.html
// css, html5 機能のブラウザ対応表
http://fmbip.com/litmus/
// css チートシート
http://www.textdrop.net/wp-content/uploads/css-cheat-sheet-v2-ja.pdf
// css3.0 リファレンス詳細
http://www.textdrop.net/wp-content/uploads/css-cheat-sheet-v2-ja.pdf
要素
ブロックレベル要素内に、インライン要素は含めることはできる。
インライン要素内に、ブロックレベル要素は含めることはできない。
○ <div><a href=xxx >sample</a></div>
× <span><h1>sample</h1></span>
基本的には、bodyタグ内に直接インライン要素を設定することはできない。
× <img src=xxx alt=xxx>
○ <div><img src-xxx alt=xxx></div>
ブロックレベル要素
ブラウザでの表示に際してもひとつの「ブロック（通常改行を伴う表示上のまとまり）」として扱われます。
- div
- h1
- ul
- table
etc...
インライン要素
ブロックレベル要素の内容として用いられるもので、文書の構造を構成するというより、ブロックレベル要素内の特定の部分になんらかの役割や機能を持たせる要素です。
- span
- img
- a
etc...
位置(postion)
文章フロー = 記載通りに表示される流れ
相対位置配置(relative)
文章フローから相対的に指定分を適用する。
絶対位置配置(absolute)
文章フローから取り除かれ、画面左上から絶対的に指定する。
フローティング(float)
- left
- right
優先度
| 要素 | ポイント |
|---|---|
| *（全称セレクタ） | 0ポイント |
| p,h1 などのタグ | 1ポイント |
| .sample（classの場合） | 10ポイント |
| #sample（IDの場合） | 100ポイント |
複数使用した場合は、ポイントを足していき、
足したポイントが一番大きい設定が優先される。
要素の指定方法
要素などの複数条件指定
空白なしで、つなげる
div#new{
}
子孫要素指定
空白でつなぐ
div #child{
}
要素の状態を表す
:(コロン)でつなぐ
a:hover{
}
グループ化
,(カンマ)でつなぐ
div #first, div #second{
}
スコーピング
スコープの制限範囲 sample
- モジュール毎
- ページ毎
#new{
}
#new h1{
}
#old{
}
#old h1{
}
cssボックスモデル
マージン(margin)
マージンは、要素とその周辺の他の要素との間の余白領域です。それぞれの端からどれくらい
の空間を空けるかを指定します。要素に背景がある場合、このマージンは空で透明になります。
ボーダー(border)
ボーダーは、境界となる線(または他のスタイルで使われる装飾)です。ボーダーの太さ、スタイル、色を指定できます。
パディング(padding)
パディングは、要素の境界の内側にある余白領域です。それぞれの端の内側の内容との間にど
のくらいの空間を空けるかを指定します。
コンテンツエリア(contents area)
コンテンツエリアは、要素の最も内側の領域で、要素の内容が含まれます。他のプロパティとの間の幅や高さを設定できます。
tips
動的にサイズを変更させる
サイズだけの変更などは、idで共通部分のcssを記載し、
サイズなどの変更分のcssは、別のクラスで作成しておき、classを動的に変更させて活用する。