CSS3&javascript&jQuery
【 CSS2 】
CSS2はCSS1に比べると複雑になっていますが、
人が読書き可能な簡潔なスタイル言語です。
CSS2やCSS2.1までは、
角丸・ボックスやテキストの影・
グラデーションなどの装飾を
用いる場合、装飾した画像ファイルを
作成する必要がありました。
【 CSS3 】
従来のCSS1やCSS2との互換が在るのが特徴。
CSS3になり新たに仕様が追加されている
カスケードスタイルシートであり、
仕様が追加されたことで
柔軟なスタイルを可能にしている
のが特徴です。
1 | a |
---|---|
2 | b |
3 | c |
4 | d |
5 | e |
6 | f |
これは | グラデーションと |
---|---|
CSS3で | ボーダーと影と角丸などで |
つくられた | テーブルを装飾してみました |
テーブル | マウスオーバーでテーブルの色が変わります |
サンプル | このように細部まで |
です | こだわった装飾が可能です |
ベンダープレフィックス | 各ブラウザ名 |
---|---|
-moz- | Firefox |
-webkit- | Google Chrome・Safari |
-o- | Opera |
-ms- | Internet Explorer |
グラデーション | div{background-image: linear-gradient (top,yellow.blue);} |
div要素の背景に上から下へと黄色から青色になるグラデーションを指定 |
変形 | div{transform: rotate(180deg); } | div要素を180度回転 |
角丸 | div {border-radius: 10px;} | div要素の四隅を半径10pxの角丸に |
透過 | div:{opacity:0.5; } | div要素を50%透過 |
ボックス レイアウト |
div{display:box; } | div要素の直下の子要素を横並びにする |
ボックス シャドウ |
div{box-shadow: 1px 1px 5px #000;} |
div要素の右1px、下1pxの位置に5pxのぼかしで黒の影を指定 |
テキスト シャドウ |
div{text-shadow: 1px 1px 5px #000} |
div要素内の文字の右1px、下1pxの位置に5pxのぼかしで黒の影を指定 |
段組 | div{column-count:n; } | div要素の内容をn個の段組みにする |
アニメーション | a{background:#000; color:#FFF; transition: background-color 1.0s ease; } a:hover {background:#00f;} |
a要素にマウスカーソルが乗ったときに、 a要素の背景色を1秒間かけて白(#FFF)から青(#00F)に変化させる |
複数背景 | div{background-image: url(hoge.png),url(fuga.png)} |
div要素の背景にhoge.pngとfuga.pngを指定 |
Begins with | div[foo^=bar”]{ } | foo属性の値がbarで始まっているdiv要素 |
End with | div[foo $=bar”]{ } | foo属性の値がbarで終っているdiv要素 |
last-child | div:last-child{ } | 親要素の中で最後に登場するdiv要素 |
nth-child | div:nth-child(n){ } | n番目のn要素 |
nth-last -child |
div:nth-last-child(n){ } | 後ろからn番目のdiv要素 |
first-of -type |
div:first-of-type{ } | 兄弟(並列)関係にあるもののうち最初のdiv要素 |
last-of-type | div:last-of-type{ } | 兄弟(並列)関係にあるもののうち最後のdiv要素 |
nth-of-type | div:nth-of-type(n){ } | 兄弟関係にあるもののうちn番目のdiv要素 |
nth-last-of-type | div:nth-last-of-type(n){ } | 兄弟関係にあるもののうち後ろからn番目のdiv要素 |
enabled | input:enabled{ } | 入力できる状態(有効)になっているinput要素 |
disabled | input:disabled{ } | 入力できる状態(無効)になっているinput要素 |
checked | input:checked{ } | チェックされた状態になっているラジオボタンやチェックボックス |
target | div:target{ } | アンカーで飛んだ先のdiv要素 |