Weboo!

CSS3&javascript&jQuery

 

 

 

もくじ


CSS3の機能、特性を中心に紹介します。


CSS3とは メリット 比較 使ってみよう リンク

CSS3とは?



CSS3とは、端的に言えば従来のCSSに"さらに便利で新しい仕様を加えたもの"です。
1996年に確定した規格「CSS1」から、仕様に改良を加えた「CSS2」、「CSS2.1」が公表され、その最新版が「CSS3」です。
最新版といっても従来のCSSと互換性があるので、CSS3とCSS2.1が混在していても問題ありません。
CSS3で新しく追加されたプロパティを使いたい場合、既存のソースはそのままで、追記するだけでOKです。

またCSS3はHTML5とセットで取り上げられることが多いですが、必ずしもHTML5と一緒に使わなければならないわけではありません。
HTML4.0とCSS3の組み合わせでも問題なく使えます。


CSS3を使うと、従来JavaScriptで行っていたアニメーション効果や入力内容チェックをCSS3だけで実現できるほか、
Webサーバーからフォントをダウンロードしてブラウザ上で表示させることもできるようになります。


( ※ CSSの基礎についてもっと詳しく → CSS*STUDY )



スライドして詳しく見る→

新たに追加された仕様の一例



文字の縦書き
段組み
ふりがな
角丸
文字や図形の影(ドロップシャドウ)
2次元的/3次元的な変形(トランスフォーム)
時間をかけた遷移、変化(トランジション)
アニメーション
透過色
グラデーション
表示環境に応じてスタイルを切り替えるメディアクエリ
「最初の」「n番目の」などを含む高度なセレクタ
印刷や音声を制御するためのプロパティ

etc...

CSS2とCSS3の違いは?

  

 

 

【 CSS2 】


CSS2はCSS1に比べると複雑になっていますが、
人が読書き可能な簡潔なスタイル言語です。

CSS2やCSS2.1までは、
角丸・ボックスやテキストの影・
グラデーションなどの装飾を
用いる場合、装飾した画像ファイルを
作成する必要がありました。



【 CSS3 】


従来のCSS1やCSS2との互換が在るのが特徴。

CSS3になり新たに仕様が追加されている
カスケードスタイルシートであり、
仕様が追加されたことで
柔軟なスタイルを可能にしている
のが特徴です。

CSS2の場合


CSS3を使用するのと使用しないのとではどのくらい差があるのか、
  テーブルを使って比較してみました



例えば従来のテーブルは下のように、飾り気が無くシンプルなものでした


1 a
2 b
3 c
4 d
5 e
6 f

CSS3の場合



従来のCSSと比べ、CSS3では下のようなテーブルが実装可能になりました


これは グラデーションと
CSS3で ボーダーと影と角丸などで
つくられた テーブルを装飾してみました
テーブル マウスオーバーでテーブルの色が変わります
サンプル このように細部まで
です こだわった装飾が可能です

CSS3を使うメリット

1. やりたい事がシンプルに実装できるようになった!



多様なセレクタが実用できるので、作業効率の向上にも繋がります。
従来は「HTMLにid属性やclass属性を指定→CSSを書く」という手順が必要でした。
しかし、多様なセレクタが使える事により「CSSを書く」のみで作業を進める事ができるようになりました。

セレクタ以外にも、ビジュアルデザインでよく使われる角丸は、
これまでは画像として切り出して実装していました。
角丸の種類が増えると画像数が増え、管理や運用が大変でした。

CSS3では角丸はコードで指定できるようになっているので、画像は必要なくソースコードのみで実装できます。
角丸だけでなく、グラデーションやドロップシャドウもコードで実装する事ができるようになりました。




2. これまで出来なかった表現ができるようになった!



作業効率のみに留まらず、プレーンテキストへのドロップシャドウや要素の変形など、
これまでは実現する事が難しかった表現も実装出来るようになりました。

3. ファイルサイズが軽い!



今まで画像やJavascriptに頼ってきた部分をCSSだけで実装することが可能になり、
サイト全体の軽量化に加え、CSSで一括管理ができるので運用性も高くなりました。


また、スマートフォン用のサイトを作る時に気になる事のひとつ、ファイルサイズ。
スマートフォンから利用するケースを考えると、画像の使用はPCと比べて慎重にならざるを得ません。
しかし、前述の通りCSS3ならグラデーションや角丸を画像を使わずに実装できるので、
最低限の画像ファイルのみを使用し、ファイルサイズを抑える事ができます。

CSS3を使ってみよう!


CSS3で追加された新機能の一部をご紹介します。

はじめに: CSS3の機能を動作させるためには、
各ブラウザ毎にベンダープリフィックス(*1)で個別に対応します。
(プロパティによっては不要)

▼主要ブラウザのベンダープレフィックス

ベンダープレフィックス 各ブラウザ名
-moz- Firefox
-webkit- Google Chrome・Safari
-o- Opera
-ms- Internet Explorer

*1:ベンダープレフィックス - vendor prefix
CSSで各WEBブラウザメーカーが独自に実装した、まだ標準化されていない仕様(拡張機能)を記述するための識別子。
主にCSS3の動作・装飾を使いたいときに必要となる。
通常のCSSプロパティの接頭(プレフィックス)に各WEBブラウザメーカーを表す文字列を追記する。
          

スライドして詳しく見る→

CSS3で追加されたプロパティ


グラデーション 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を指定

CSS3で追加されたセレクタ


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要素

JavaScriptやjQueryも
学んでみよう!