Webの新しいデザイン「CSS3」入門

CSSはHTMLファイルの中に記述します。そのCSSの設置の方法として大きく３つの方法があります。

CSSは、HTMLタグのデザインを定義します。そのHTMLタグを指定するのがセレクタです。セレクタには、いくつかの指定方法があり、それらをまとめて説明します。

それでは、今までのWebページでもとても多用されている、コンテンツを囲む枠をCSSで作ってみましょう。

それでは、いよいよCSS3でのリッチなデザインのひとつめ「角丸」です。角を自由に丸くして、コンテンツや画像の表現をより豊かにしましょう。

次に、CSS3で影をデザインしてみましょう！上下左右想いのままに影をつけると、コンテンツが立体的になってさらにリッチなデザインが可能になります。

リッチなデザインの最後はグラデーションです。グラデーションには、線形のグラデーションと円形のグラデーションがあります。従来は、画像処理ソフトで画像を作り、背景指定するなどしてグラデーションをデザインしていましたが、CSS3では、簡単なコードだけで、グラデーションを作ることができます。そうすることで、サイトも軽くなり、デザインのコントロールもしやすくなります。

「レスポンシブWebデザイン」というデザイン手法があります。ひとつのHTMLファイルで、スマホ画面からPC画面までのあらゆる端末に最適に表示できるようにしようというものです。このデザインの中でもっとも重要な手法がメディアクエリです。メディアクエリは各端末のCSSをCSS内で切り替えて適用させるものです。リッチなデザインとは異なりますが、とても有用なCSS3の仕様ですので、ここで一緒にご紹介します。

CSS3では、コンテンツを、回転させたり、伸縮させたり、移動させたり、さらに歪ませることまでできるようになりました。しかもコードは簡単です。一緒に試してみましょう。

トランジションは、時間をかけてCSS3を変化させるデザインです。たとえば「シングル・ページ・Web・アプリケーション」という最近のページのデザインでは、ユーザのスクロールや時間軸にそってコンテンツを変化させることができます。その基礎としてこのトランジションの仕組みもを学んでください。なお、トランジションは、前のレクチャの変形CSS3だけではなく、みなさんが知っているほとんどすべてのCSSプロパティを時間をかけて変化させることが可能です。

CSS3のアニメーションプロパティは、アニメーションのシナリオ（＝キーフレーム）を立ててCSSを変化させて、変形したり色が変わったり、消えたり表示させることができるようになりました。

CSS3では、リッチなデザインや変形、そしてアニメーションができることを学んできましたが、最後に三次元でのデザインを学びましょう。三次元の変形もできますから、みなさんは今までにないコンテンツを作ることができるようになります。

通常は、HTMLファイルを作るときにCSSを設定するのであとで変更することはできません。しかしHTML5はインタラクティブ（双方向）な技術です。私達のコントロールによってCSSを変化させることができます。このレクチャではCSSをJavaScriptで変化させる方法を学びましょう。