CSS3の概要

CSS3 CSS

CSS3でできるようになること

  • classやidに頼らないセレクタ作りが可能になる
  • CSS3だけで表現できるデザインの幅が格段に広がる
  • 簡単に柔軟な多段組を実現できる
  • CSSだけでウェブに「動き」をつけられる
  • Webフォントをサポート
  • ウィンドウやデバイス画面サイズ等に応じて柔軟にCSSを切り替えられる

 

ベンダープレフィックス

IE                               -ms-

Google Chrome         -webkit-

Safari                         -webkit-

Firefox                       -moz-

 

ブラウザへの実装状況の確認

「Can I use」

 f:id:develog:20160818000548p:plain

 

ベンダープレフィックスの使い方

プレフィックス付きのプロパティを書いて、その下にプレフィックスなしのプロパティを記述する。

(例)

.example { -webkit- opacity: 0.5; }

.example { opacity: 0.5; }

 

Webフォント

PCの中にフォントがなくてもサーバー上のフォントデータを利用することができる。

画像に比べて拡大しても劣化しない。

 

Google Fontsは種類が多いが、対応フォントは英文のみ 

(url) https://fonts.google.com/