:: 使えるCSS3のプロパティ

/ / WEB制作・開発デザイン

最近のWEBサイトでよく使われているCSSのプロパティについて。今までは画像で対応していたことをCSSで実現できるようになった。たくさんあるプロパティの中でも結構目にする有名どころで使えるプロパティをメモ。

なお、CSS3を使う場合は通常対応ブラウザに注意して使うべきです。中でも主要ブラウザと呼ばれる代表的なブラウザを押さえておけば問題ないかと思います。

デスクトップ: Internet Explorer、Google Chrome、Firefox、Safari、Opera
スマートフォンブラウザ: iOS SafariAndroid Browser

※対応しているバージョンはcaniuse.comから確認できます。

 

目次

1) ベンダープレフィックス
2) transform
3) border-radius
4) グラデーション

 

 

ベンダープレフィックス

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の機能を先行実装/独自拡張を使用する時に使う。

将来的に仕様が変更されるリスクに備えて、前後に「-」を付けたベンダー識別子(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 など)

 

-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);

-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);

 

 

border-radius

ボーダーの角丸が簡単に実現できる。

角丸10pxの例↓↓

border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

 

 

グラデーション

cssでグラデーションが実現できる。-moz系と-webkit系で書き方が異なる。

 

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: 終了色

※さらなる詳しいグラデーションについての情報は「CSS Lectureさん」の記事がとても参考になります。

SNS SHARE

LEAVE A REPLY