Edited at

CSS3の基礎知識

More than 3 years have passed since last update.

CSS3 は CSS2.1 を元に機能を細分化(モジュール化)したもの

モジュールごとに仕様の策定が進められている

まだ勧告候補のものや草案段階のものもあり、今後仕様が変更される可能性がある

スタイルの切り替えを行うメディアクエリも CSS3 の機能の1つ。

CSS3 を使用すると、以前の CSS では表現できなかったドロップシャドウや角丸、

グラデーションなどを容易に実現できるため、個別に画像を用意する場合と比べ、

ファイルサイズが小さくなるメリットもある。

TIPS

* CSS3 と HTML5 は独立技術なので、必ず組み合わせて使わなくてはならないわけではない

* HTML4 + CSS3 や XHTML + CSS3 の組み合わせでも問題なく利用可能


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


text-shadow プロパティ


  • フォントに影をつける

text-shadow: 横方向のズレ幅 下方向のズレ幅 ぼかし具合 影色;


textshadowプロパティの指定例.css


p {
text-shadow: 3px 3px 2px #555
}



box-shadowプロパティ


  • ボックスに影をつける

box-shadow: 横方向のズレ幅 下方向のズレ幅 ぼかし具合 影色;


bos-shadowプロパティの指定例.css

p {

box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.3);
}



border-radiusプロパティ


  • 要素の角を角丸にする

border-radius: 楕円半径の長さ;


border-radiusプロパティの指定例.css

p {

border-radius: 25px;
}


RGBaプロパティバリュー


  • 要素に対して透明度を持った色を指定する

  • 1.0は透明度無し状態、0.0は透明になり、透明度は0.0〜1.0で指定する

  • RGBの各色の指定値は、0~255または0%〜100%で指定する

  • color プロパティ以外にも、border-color、background-color、text-shadow、box-shadow など様々なプロパティに指定できる

color: rgba (赤, 緑, 青, 透明度);


HTML5&CSS3の対応状況確認


参考サイト

Can I use

:各ブラウザの HTML5 や CSS3 の要素・API への対応状況を確認できるサイト

 要素や API をクリックすると対応状況が確認できる

findmebyIP

:各ブラウザの HTML5 や CSS3 への対応状況を確認できるサイト

 Chrom、Safari、Firefox、IE(IE6〜IE9)の対応状況が一覧確認できる


CSS3のテンプレート作成


  • 主に以下の項目を設定する

①文字エンコードの設定

②clearfix の設定

③ブレイクポイントの設定


プレイクポイントとは


  • レスポンシブWebデザインにおいて「表示するレイアウト」を切替える画面サイズ」である

  • サイト設計の早い段階でブレイクポイントを決定することが重要


ブレイクポイントの指定例.css

/* 481px [tablet-size] */

/* min-width; 481px と min-width; 769px の値がブレイクポイント */

@media only screen and (min-width; 481px) {
nav {
margin: 0 0 0 7%;
padding: 0 0 0 7%;
background-color: #6B69b9;
}
}

/* 769px [PC-size] */

@media only screen and (min-width; 769px) {
article.main {
width; 65%;
float: right;
}
}



ピクセル密度と devicePixelRatio


  • ブレイクポイントを決定する際は各デバイスに搭載されているディスプレイの「ピクセル密度」に注意する必要がある

  • ピクセル密度とは1インチあたりのピクセル数

解像度例

* 非Retina ディスプレイの iPhone: 320px × 480pxx

* Retina  ディスプレイの iPhone: 640px × 960pxx


ブレイクポイントの決定方法


  • どの画面サイズ以下でスマートフォン向けのレイアウトを表示するのか考慮する

  • どの画面サイズ以下でタブレット向けのレイアウトを表示するのか考慮する

  • 最適なブレイクポイントはサイトのデザインやレイアウト、情報量により異なる

  • 既存ページのブレイクポイントを参考にする

参考サイト:

Adobe HTML5 特設サイト

(ブレイクポイント:520pxと920pxの2種類)

Microsoft社

(ブレイクポイント540pxと680pxと900pxの3種類)


この記事の参考書籍

レスポンシブWebデザイン 「超」実践デザイン集中講義

山崎大助 著