webデザイン css基礎
過去記事です。消えたデータの一部が復旧？できたので。
本日２記事目！
ども。考えごとしてるとよく寝落ちするundertreeです。
※仕事中はちゃんと起きてます！
最近フロント側を対応することも増えてきて、javascriptはだいぶ使えるようになったが、
cssの基礎の部分の理解が曖昧だったので、まとめ。
要素
ブロックレベル要素内に、インライン要素は含めることはできる。 インライン要素内に、ブロックレベル要素は含めることはできない。
○ <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
通常のレイアウト指定は、主にフローティングを使用。 ３カラムは、３つともleftで構成されている。
幅を縮めることで、可変的に下にずれるので、レスポンシブデザインにも対応しやすい。
cssの優先度
http://www.stylish-style.com/csstec/base/order.html
| 要素 | ポイント |
|---|---|
| *（全称セレクタ） | 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)
コンテンツエリアは、要素の最も内側の領域で、要素の内容が含まれます。他のプロパティとの間の幅や高さを設定できます。
ps
今の現場にきてから、結構javascript学んだなので、
今度は、javascriptについて書こうかな。
