最近のWEBサイトでよく使われているCSSのプロパティについて。今までは画像で対応していたことをCSSで実現できるようになった。たくさんあるプロパティの中でも結構目にする有名どころで使えるプロパティをメモ。
なお、CSS3を使う場合は通常対応ブラウザに注意して使うべきです。中でも主要ブラウザと呼ばれる代表的なブラウザを押さえておけば問題ないかと思います。
デスクトップ: Internet Explorer、Google Chrome、Firefox、Safari、Opera スマートフォンブラウザ: iOS Safari、Android Browser
※対応しているバージョンはcaniuse.comから確認できます。
目次
ベンダープレフィックス
ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の機能を先行実装／独自拡張を使用する時に使う。
将来的に仕様が変更されるリスクに備えて、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定する。
主要ブラウザのベンダープレフィックスは以下の通り。
| -ms- | Internet Explorer |
| -webkit- | Google Chrome, Safari |
| -moz- | Firefox |
| -o- | Opera |
transform
生成されたボックスに対して、変形、移動や回転などの指定が出来る。指定できる値は以下の通り。
| rotate(deg) | 回転（deg で指定。10deg や -10deg など） |
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | X軸，Y軸へのゆがみ（degで指定。10deg や -10deg など） |
| translate(xy[x,y]) | 移動（px で指定。10px など） |
|
1 2 3 4 5 6 7 8 |
.demo1 { -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); } .demo2 { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); } |
-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);
border-radius
ボーダーの角丸が簡単に実現できる。
角丸10pxの例↓↓
|
1 2 3 4 5 |
.demo { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
グラデーション
cssでグラデーションが実現できる。-moz系と-webkit系で書き方が異なる。
|
1 2 3 4 |
.demo1 { background: -moz-linear-gradient(left, #85bcff, #3498db); /* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#85bcff), to(#3498db)); /* Safari,Google Chrome用 */ } |
background: -moz-linear-gradient(left, #85bcff, #3498db); background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
-moz-linear-gradient(left, #85bcff, #3498db);
→left: 左から右
→#85bcff: 開始色
→#3498db: 終了色
-webkit-gradient(linear, left top, left bottom, from(#85bcff), to(#3498db));
→left top: 開始位置
→left bottom：終了位置
→#85bcff: 開始色
→#3498db: 終了色
→left top: 開始位置
→left bottom：終了位置
→#85bcff: 開始色
→#3498db: 終了色
※さらなる詳しいグラデーションについての情報は「CSS Lectureさん」の記事がとても参考になります。
LEAVE A REPLY