チームサンタの三浦です。レスポンシブwebデザインでの制作がほとんどになってきましたね。HTML5、CSS3の勉強をしようしようと思って、ずるずると先延ばしにしている人はおりませんか?そろそろ勉強しましょう!もうほとんどのブラウザで対応してますよ!ということで今回はCSS3の超入門として、新しく増えた要素を学びつつ、CSS3の基礎中の基礎を学ぶための記事を書いてみたいと思います。CSS3を復習しようかなと考えている方に向けた記事となっています。誰かのためになれれば幸いです。念のためですが、「CSS」は、ウェブページの見栄えを定義するための言語です。Sheets」の略ですが、単に「スタイルシート」と呼ばれる事が多いです。最初のCSSである「CSS1」の規格は、1996年に確定し、その後、仕様に改良を加えた「CSS2」「CSS2.1」が公表され、その最新版が「CSS3」となっております。CSSは新旧が混合しても問題ないので、「CSS3で新しく追加されたプロパティを使いたい!」という場合でも、既存のソースをすべて書き換える必要はありません。「今使っているCSSソース」の中に、いきなり「CSS3の記述」を追記するだけで使えます。「HTML5、CSS3」をセットのように説明されることが多いですが、別にHTML5とCSS3を一緒に使わなければいけないわけではありません。HTML3.2やHTML4.0で記述されているものにも、CSS3を使ってデザインすることが可能です。withなど)が追加されております。今回は追加されたプロパティに注目して、その中からよく使われると思われる下記、7つをピックアップしてご紹介致します。・アニメーションまた追加セレクタですが、詳しくはチートシートがございますので、そちらで確認が出来ます。セレクタチートシート(PDF)実際に動かしてみよう!とそのまえにベンダープレフィックスとは?少しコーディングをいじったことのある人であればどこかで見た事があるかと思いますが、CSSのプロパティの先頭につける-webkit-、-o-などのことを指します。各ブラウザによって実装がまちまちの状況です。そのため、機能を動作させるために、プロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。種類は下記のものがあります。safari-moz-:firefox-o-:opera-ms-:ie例えば、border-radiusにベンダープレフィックスをつけると、&lt;style&gt;border-radius:5px;-webkit-border-radius:5px;&lt;/style&gt;と、このように使います。現在どのブラウザがどの要素を対応しているのかは下記のサイトで確認することが出来ます。#CCC;}上記のコードだと、ブラウザではこのように表示されます。それではこれに「角丸」の効果をつけたいと思います。「角丸」をつけるには「border-radius」を使用します。border-radius:20px;}無事角丸になりましたね!!角丸はmarginやpaddingのように4つの指定を行うことが出来ます。パーセント指定で表示することも可能です。それぞれ対応させると次のようになります。50%;}実際の様子はデモページでご確認ください。デモページ透過(色の指定)次は透過と色の指定についてご説明致します。テスト4〜5透過はすでにお使いの方も多いかも知れませんね!下記のプロパティを使用します。opacity:0.5;値は0〜1を指定し、値が低くなればなるほど、透明度が増します。0で完全に見えなくなります。色の指定はもちろん以前のCSSからあったのですが、CSS3から新たに「rgba」というものが追加されました。今回の指定では「黒の半透明」の指定になります。デモページボックスに影divなどのボックス要素に影を落とす効果です!テスト6〜9ボックスに影をつけるには下記のプロパティを使用します。10px;値はそれぞれx方向、y方向にどれだけ動かすかを示します。今回の場合は「右に5px」「下に10px」に位置に影をつける事を意味しています。ブラウザで確認するとこのようになります。「box-shadow」は2〜4つの値で定義されますが、任意で「色」、「insetキーワード」を指定する事が出来ます。「insetキーワード」とは内側に影をつくる事をいいます。ぼかし距離」「影の広がり(大きさ)」「色と透明度」「内側or外側」の値となっております。カンマで区切ることで、複数の影を効果としてつける事ができます。例として様々なパターンを指定したボックスシャドウをご紹介します。blue;}デモページ線形グラデーション(円形グラデーション)グラデーションについて説明致します!テスト12〜15プロパティは「background:linear-gradient」を使用します。background:linear-gradient(red,blue);上記指定してあげると、上から下にかけて、赤から青にグラデーションするbackgroundをつける事が出来ます。※グラデーションはまだ対応していないブラウザも多いので、実際に指定する場合はベンダープレフィックスを用いて複数書いて上げましょう。基本的には開始と終わりの2色を指定することが多いのですが、中間色を指定することも出来ます。70%);またグラデーションの開始位置、そして線形グラデーションではなく円形グラデーションをかけることも出来ます。違いを比べて頂ければと思います。次は変形についてご説明致します!テスト16〜19使用プロパティは「transform」これで、大きさや移動、回転等の指定をしていきます。起点の位置を示す「transform-origin」というプロパティもあります。大きさを変化させます。left;transform:scale(1.2,1.5);まずは大きくし始める起点を左上に固定しています。実際のデモを見てご確認して頂ければと思います。20deg);}デモページアニメーションいよいよ最後のアニメーションの説明をさせて頂きます!テスト20〜22アニメーションにはたくさんのプロパティが存在しております。(こちらも実際はベンダープレフィックスを使用して制作してください。)・transition-property:all;(対象になるもの)・transition-duration:1s;(アニメーションにかかる時間)・transition-timing-function:ease;linear(一定),ease(なめらか),ease-in(最初だけなめらか),ease-out(後半なめらか),ease-in-out(最初と後半なめらか)・transition-delay:0.3s;(処理を遅らせる)以上の4つから構成させれていますが、これらを一つにまとめることが出来ます。0.3s;順位に決まりはありませんが、最初に出て来た数字が「duration(アニメーションにかかる時間)」となっております。実際にホバー時に上記アニメーションを仕掛けたデモを確認してみて下さい。デモページ(テスト20)ホバー時のアニメーションだが、ホバー前の元要素に書くのも一つのポイントです。キーフレームちょっと複雑になってきますが、アニメーションの途中途中で複数の変化をつけたい場合に「キーフレーム」という要素を使用します。こちらもたくさんの値が存在します。一つ一つ確かめて覚えていきましょう。infiniteは無限)・animation-direction:normal;(normal,alternate)一つにまとめることが出来ます。normal;決めた名前「animationFrames」に「keyframes」を指定します。「keyframes」とはいつ何の動きをさせるか複数の動きを指定する時に使用するものです。blue;}}この場合、徐々に高さが大きくなり、背景色が変わる指定になっています。blue;}}ホバーするとアニメーションが動き出します!デモページまとめいかがでしたでしょうか?CSS3を勉強したい人の為の初心者向け入門講座でした。スマートフォンではもうガリガリCSS3を使えますし、憎っくきIEさんもどんどんバージョンアップして、多くのプロパティに対応しております。PCでガリガリとCSS3を使う日ももう間近でしょう。実際に手を動かして、ブラウザで動きを確認して、楽しく勉強してもらえればと思います。