CSS（スタイルシート）の新しい規格「CSS3」について詳しく解説していきます。

この記事は、以下に該当する人に向けた内容となっています。

  • CSSのことを勉強し始めたところだ
  • CSSとCSS3の違いについて知りたい
  • 従来のCSSとの違いはどこなのか？

CSS3の特徴や書き方、機能や効果的な使い方。そして、対応ブラウザをどうやってチェックすれば良いかまで網羅しています。

CSS3のことを知りたい人はぜひご一読ください。

CSS3について

CSS（スタイルシート）というのは、HTML・XMLの要素を修飾するものです。webページのデザインを向上させる言語として使用されています。

CSS3はそんなスタイルシートの新しい規格（バージョン）のことを指します。


W3Cが仕様書を公開している

1994年に創設されたW3Cが、CSSの仕様書（TR）を公開しています。このW3Cが草案から技術をテストしているということです。

そして、全てのテストが終了して国際的に信頼性が高いと認められた技術文書が完成した時に勧告という形で「このCSS3は完成しました」と発表します。


CSS3は3番目のスタイルシート

CSSにはCSS3の他に下記のものが存在します。

  • CSS1：1996年12月に勧告
  • CSS2：1998年5月に勧告
  • CSS2.1：CSS2の改訂版。2011年6月に勧告

他にもCSS4と呼ばれるバージョンもあります。

CSS3はCSS2.1の次に生まれたCSSのバージョンです。2011年から策定が進行しています。


従来のものと何が違う？

元々存在するCSSとCSS3の違いは、前のlevel（レベル）には存在しない新たな仕様が加えられているところです。

今まで使い勝手が悪かったところが便利に使えるようになっています。

具体的に、どういう機能が追加されたのかは後の項目で説明しますのでそちらをご覧ください（「CSS3で使える機能」参照）。


CSS3という規格は存在しない

ここまで説明してきたことをひっくり返すことになりますが、正確には「CSS3」という規格は存在しません。

CSSは「level」という段階を持っており、CSS1なら「Cascading Style Sheets, level 1」。

CSS2なら「Cascading Style Sheets, level 2」という総称があります。

上の例で理解頂けるとおり、CSS3は「Cascading Style Sheets, level 3」というのが正式な名前となります。

同じようにlevelという記載をされているCSSですが、CSS3は前のlevelとは1点だけ違う部分があります。

CSS3から機能（モジュール）単位でテストされるようになった点です。

  • CSS Fonts Module Level 3
  • CSS Color Module Level 3
  • CSS Image Values and Replaced Content Module Level 3

というように、CSS3は新しい機能の追加・改良を小さな部位に分けて実装しています。

そのため、モジュールによって勧告されていたり、まだ勧告には至っていなかったり……草案段階というものもあったりとバラつきが見られます。


CSS3の特徴

この項目では、CSS3の特徴について詳しく見ていきましょう。

CSS3ソースはCSS1やCSS2などのソースと基本的なところに違いはなく、下位互換性（前バージョンとの互換性）があります。

そのため、前規格の記述方法でもそのまま使うことができます。

既存ソースにそのままCSS3ソースを使用可能なので、全部を書き換える必要がないのは非常に強いメリットといえます。

また、CSS3はHTML5のみで使うわけではないことを理解しておきましょう。

セットにされることが多い両者ですが、CSS3はHTML5以外のwebページ（XTML1.0やHTML4.01など）もデザインすることが可能です。


CSS3の書き方は他規格と違いがあるのか

CSS3がCSSの新しい規格なのは前の項目でご説明したとおりです。

その説明を読んだことで「新しい規格ということは、CSS3は他規格と書き方が全く異なるのではないか」と思う人もいるでしょう。

ご安心ください。CSS3はただ新しい機能を追加したCSSに過ぎません。

これも前項目で解説しましたが、CSSには下位互換性があります。そのため、今までのlevelで使えた書き方が通用しないということはありません。

基本的な書き方に変化が生じた部分はほとんどないといって良いでしょう。


CSS3で使える機能

この項目では、CSS3で使える機能（プロパティ）の中でも特に注目したい機能をご紹介します。


linear gradients

線形にグラデーションさせる機能です。複数の色を指定することができます。


radial gradients

円形にグラデーションさせる機能です。複数の色を指定することができます。


animation

アニメーション機能です。アニメーションのスタート時間を指定したり、繰り返しの回数を指定したりもできます。


transform

要素を変形させる機能です。2D変形、3D変形を適用させることができます。


hsla colors

要素の色相・彩度、明度や透明度を操作する機能です。


opacity

要素の透明度を操作する機能です。完全に透明・不透明にしたり、好みの透明度を指定できます。


Multi-column

マルチカラムレイアウトが可能です。文章の段組を作れます。段数と段幅を指定することができます。


border-radius（角丸）

角を丸くできる機能。ボックス要素に角丸を付加できます。4つの角を全て丸くするだけでなく、指定箇所のみ角を丸くすることも可能です。


text shadow

テキスト（文章）に陰影をつけることができます。水平・垂直（x,y）方向の距離、ぼかしの半径や影の色などの指定も可能。

ぼかしの半径＆影の色についてはオプションなので、指定しなくても大丈夫です。


text stroke

文字の輪郭線について指定できる機能です。


selection color

ユーザーが選択したテキストの背景・文字の色を指定することができます。


word wrap

単語の途中で改行するかを指定できます。

この指定がない場合、文字列が長すぎるとボックスから文字がはみ出して表示されてしまいます。

「word wrap」を使用することで、はみ出すことなく文字を表示することが可能です。


CSS3の効果的な使い方

ここからは、CSS3を使った効果的なデザインの一部についてやり方を解説します。

他にも効果的なCSS3もありますが、紹介する使い方は下記の3つです。

  1. 角丸にする
  2. 変形させる
  3. 線形グラデーションを作る

CSS3を使ってみたい人向けに書き方も記述しています。


CSS3の効果的な使い方①角丸にする

1つの値を指定すると4つの角を同じ値で丸くできます。

角の丸みをそれぞれの角で異なるものにすることも可能です。

それぞれ違う値を入力したい時は、左上から時計回り（左上→右上→右下→左下）で値を指定しましょう。

半角ブランクを挟み、4つまで値を指定できます。


構文

4つの角を同じ値で丸くしたい場合

  1. border-radius: 値;

4つの値を指定したい場合

  1. border-radius: 左上 右上 右下 左下;


ポイント

それ以外に、個別に角を指定することもできます。

左上の角丸を指定したい場合は「border-top-left-radius」、右上の角丸を指定したい場合は「border-top-right-radius」です。

左下の角丸を指定したい場合「border-bottom-left-radius」、右下の角丸を指定したい場合「border-bottom-right-radius」としましょう。


CSS3の効果的な使い方②変形させる

transformプロパティを使ったやり方です。

要素を回転・移動や傾斜、拡大や縮小させることができます。


構文

  1. transform: トランスフォーム関数();


ポイント

トランスフォーム関数は下記のものがあります。

回転の際は、rotate(R)：Rには回転角度の値を入力します。

移動の際は、translate(Tx, Ty)：Txにはx軸方向の移動距離、Syにはy軸方向の移動距離の値を入力してください。

一方だけ指定したい場合はx軸だけ指定するなら「translateX(Tx)」、y軸だけ指定するなら「translateY(Ty)」と記述してください。

傾斜（スキュー）では、skew(Sx, Sy)：Sxにはx軸方向の角度、Syにはy軸方向の角度の値を入力します。

一方だけ指定したい場合はx軸だけ指定するなら「skewX(Sx)」、y軸だけ指定するなら「skewY(Sy)」と記述してください。

拡大・縮小では、scale(Sx, Sy)：Sxにはx軸方向の拡大縮小の倍率、Syにはy軸方向の拡大縮小の倍率の値を入力します。

一方だけ指定したい場合はx軸だけ指定するなら「scaleX(Sx)」、y軸だけ指定するなら「scaleY(Sy)」と記述してください。

webページはブラウザ左上が座標の原点です。それを意識して座標を構成しましょう。


CSS3の効果的な使い方③線形グラデーションを作る

背景を線形グラデーションさせたい時に使えます。

方向や角度、開始色・途中色・終了色など細かく指定することができるため、理想のグラデーションを表示させることが可能です。


構文

  1. linear-gradient(角度or方向, 開始色, 途中色, 終了色);


ポイント

角度や方向：指定しない場合はデフォルト値（to bottom）となります。

開始色：位置を指定することができます。指定しなかった場合はデフォルトで0％。

途中色：位置を指定することができます。オプションのため、指定しなくても大丈夫です。

終了色：位置を指定することができます。指定しなかった場合はデフォルトで100％。


CSS3の対応ブラウザのチェック方法

技術を利用するためには、ブラウザ（IE、Edge、Chromeなど）を確保するのが絶対条件です。

ですが、「ここでCSS3のプロパティを書きたい！」と思ってもブラウザが未対応だったら書きたくても書けません。

そこで、どのブラウザがCSS3プロパティに対応しているのかチェックできる方法についてお伝えします。

使いたいCSS3プロパティに対応しているブラウザかどうか確認するのに一番簡単な方法は、「技術対応チェックサービスサイト」を利用することです。

この項目では代表的な2つのチェックサービスサイトをご紹介します。


Can I use

CSS3以外にHTML5やJavaなどの技術が対応しているかどうかも調べることができます。

web技術者の相棒といっても過言でない有名なチェックサービスサイトです。

調べ方は至って簡単。

調査したい技術を検索ボックス（Can I use～の後に続くボックスです）に入力するだけです。

そうすると、検索結果の一覧が表示されます。

対応可能かどうかわかるのは、下記のブラウザです。

  • IE
  • Edge
  • Firefox
  • Chrome
  • Safari
  • Opera
  • IOS Safari
  • Opeara Mini
  • Android Browser
  • Chrome for Android

結果は4つのカラーで表されます。

グリーン＝サポートしている

レッド＝対応していない

イエロー＝一部サポートしている

グレー＝不明


MOBILE HTML5

モバイルブラウザの対応状況を知りたい時はこちら。

HTML5と銘打っていますが、CSS3の対応状況も調べることができます。

先に挙げた「Can I use」よりも多くのモバイルブラウザの対応状況を調査することができるのが魅力です。

iPhoneやiPad、Android以外にもKindleやBlackberryなどのブラウザ対応状況も調査可能です。


まとめ

CSS3についての記事、いかがだったでしょうか。

あまり意識することなくCSS3を使っている人も多いはずですが、正しい知識を持っていると理解力もアップします。

  • CSS3とはどんなものなのか
  • 特徴は何なのか
  • 他規格と書き方は違うのか
  • 使える機能
  • 効果的な使い方
  • 対応ブラウザのチェック方法

今回詳しく取り扱ったのは、上記のことについてでした。

ぜひ、CSS3を使う上で役立ててください。