CSS
You'll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you'll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface. よくつかうpropertyが視覚的にわかるように解説されている
テキストのグラデーション
従来：画像必須
すりガラス表現
従来：画像必須
レスポンシブ対応で画像の縦横比を変える
従来：paddingを使ったhack
従来：JSでスナップ
アンカーリンクのクリックでスムーススクロール
従来：jQueryで実装
今後
子要素の状態によってスタイルを変更する
従来：JS
CSSのアプローチとツールが2018年の今日までどう進化してきたかについて歴史的背景をご紹介することです
read on as I share my personal tips on how you can improve your relationship with CSS
2017年8月
CSS
どの要素に対してどのようなことをするか
セレクタ： どの要素に対して就職するかを指定
プロパティ：どの性質を変化させるか
書き方
セレクタ{ プロパティ名： 値; ｝
code:セレクタの種類
ユニバーサルセレクタ *
要素{}
.class{}
セレクタの書き方
a, b：aおよびbを指定
a b：a以下のbを指定
a > b：a直下のbを指定
a + b：aの次のbを指定
ab：aかつbを指定
属性セレクタ
タグの属性の有無や値に合わせてスタイルを変化
tag
tagとすると部分一致
擬似クラス
要素の状態を指定する
例：
ul li:first-child {color: skyblue}
以下の順番は重要（CSSのスタイル適応ルールによる）
a:link { color: violet;} //未訪問
a:visited{ color :orange;}
a:hover{ color: pink;} //オンマウス
a:active{ color: red; } //クリックしたとき
inputがフォーカスされているときバックグラウンド色を変更する
input:focus{ background: red; }
擬似要素
要素の一部を指定する
p:first-line
一行目だけ色を変える
p:first-letter
最初の文字だけ色を変える
p:before{ content: “—>”; }
p要素の前に-->を加える
＃ セレクタの詳細度
複数セレクタの優先度を決める
(a) styleを書くとカウント
(b) idが入るたびにカウント
(c) 属性/擬似クラス/クラスが入るたびにカウント
(d) 要素/擬似要素
最も大きい物が優先
/0, 0, 0, 1/
a { color: skyblue; }
/0, 0, 1, 1/
a.link { color: pink; }
/ 0, 1, 0, 1 /
a#site { color: blue; }
プロパティの値の指定方法
値
- 長さ
- px
- em 親要素のフォントサイズに対して何倍か
- %
body{ font-size: 16p}
h1 { font-size: 2em; } / 162=32 px[/ /
h2 { font-size: 150%; } /]161.5=24px/
code:以下全て等価
h1{ color: blue; }
h1{ color: rgb (0, 0, 255); }
h1{ cplor: rgb (0%, 0%, 100%); }
heightに関する注意点
全ての親要素の高さを明示的に示さないといけない．
border
borderのもつプロパティ
border-color
border-width
border-style # solid dotted dashed double inset/outset
border color width styleでもOK．順不同かつ省略可能
ある面のみ指定する場合
border-top（bottom/left/right）
marginの相殺
paddingと同じように指定する
上下にブロックボックスが並んだ場合，大きな方の margin になる
textのプロパティ
color
font-size
font-family: Arial, Helvetica （優先度順）
font-weight: bold/normal
text-align: right/center/left
text-decoration: underline/line-through/none
# listのプロパティ
list-style-type: dicc/circle/square/decimal/lower-alpha
list-style-image
list-style-position: inside/outside
list-styleで一括指定可能
cursorのプロパティ
ソース参照
urlで画像を指定する場合，OSの互換性を考えて32x32pxにしたほうがよい．
Firefoxだと上限128x128px
あまり大きなサイズだとChromeは表示されなかった
backgroundのプロパティ
ソース参照
background: url(), no-repeat, fixed;
z-indexとoverflow
z-index
重なり順を決定する
positon:static以外の要素に対して
値が大きいほど上に来る
overflow
box要素の中の文字などがはみ出た場合にどうするか
visible
hidden
scroll
line-height vertical-align
line-height 行ボックスの高さ
vertical-align インラインレベル要素の縦位置（文字中に画像とか）
デフォルトは親要素のフォントのベースラインにあう
top/bottom 行ボックスの上/下
middle 英小文字の中央を通る線とインライン要素の中央を揃える
微調整したいときはベースラインからpx/emで指定
float clear
float
指定した要素を通常の流れから切り離し，左右に寄せる（位置変更）
floatを指定した時はwidthをつける
clear
floatを解除してfloatした要素の下に配置したいときに使う
ブロックレベル要素にしか適応できない