CSS3 スタンダード・デザインガイド

CSS3　スタンダード・デザインガイド

例示がしっかりとしているので、ざっと目を通すだけでも良くわかる。2012年5月の第四版では最新ブラウザの情報に対応していないのがやや残念だが、手元にあるととても便利。

CSS3とは何かや、基本的な知識がある人向け。

メモ

当面、個人的に必要そうな情報を以下にまとめる。

動作するデバイスに応じて適用するCSSを切り替える：@media(p36)

デバイスの解像度で分ける(p38)

@media screen and (max-device-width: 800px) {
  デバイスの横のピクセル数が800ピクセル以下ようのCSS
}

などとして、解像度に応じたレイアウトを指定できる。

スマホの方向に応じて分ける(p39)

@media screen and (orientation: portrait) {
  縦長方向
}

@media screen and (orientation: landscape) {
  横長方向
}

CSSの読み込みを切り替える(p39)

<link rel="stylesheet" type="text/css"
media="screen and (min-device-width: 1000px)"
href="style.css" />

ブロックの振る舞いの制御：display

display: block;

pやdivのように、ブロック(段落)で固まって動作するようにする。

display: inline;

a,em,spanなどの行中(文字)に含まれるようにする。

display: inline-block;

行中なのはinlineと同様だが、widthやheightが有効になる。

display: none;

要素を非表示にする。表示するスペースも消える。表示スペースを残したい場合はvisibilityを利用する。

ブロックの構成(p50)

• margin
  • border
    • padding
      • contents

marginなどの指定順(p51)

• 全方向
• 上、右、下、左
• 上、左右、下
• 上下、左右

ボックスの幅と高さの制限：min-/max-/width/height(p59)

これを使って、ページの最小幅と高さを外側のdivに定義して、レイアウトを守る。

以下、IDがidの要素の最小幅500px、最大幅1024pxにする例。

#id	{min-width: 500px;
    max-width: 1024px;
}

ブロックに収まらない部分をスクロールで表示する：overflow(p65)

メッセージ描画先に適用予定。表示先のブロックに文字が収まりきらない時の振る舞いを決める。

• visible
  • 初期値。オーバーしたまま表示
• hidden
  • オーバーした場所を隠す
• scroll
  • スクロールバーを常に表示して、オーバーしたものはスクロールで表示
• auto
  • 必要に応じてスクロールバーを表示。これを指定する。

スマホ対応

iOSやAndroidではスクロールバーは表示されず、iOSでは2本指でスクロール。Android3以上はタップでスクロール。Android2では非対応？

overflow-x / overflow-y

縦横を個別に指定も可能。

要素の表示設定：visibility(p69)

要素の場所を空けながら、表示、非表示ができる。

• visible
  • 表示
• hidden
  • 表示しない
• collapse
  • テーブル要素に利用すると、該当行をまるごと非表示にする

Operaのみ全対応で、それ以外は一部対応。どの程度動作するかは不明。

ボックスの表示位置：position(p95)

表示位置を調整。モバイルはfixed(スクロールの影響をうけない)が非対応。

角を丸くする：border-radius(p124)

ボックスの角を丸くする。殆どのブラウザで対応。

• 全方向
• 左上、右上、右下、左下
• 左上、右上と左下、右下
• 左上と右下、右上と左下

ボックスに影をつける：box-shadow(p132)

1行目のインデント：text-indent(p195)

1行目の字下げなどを設定。

p	{text-indent: 1em;}

文字のドロップシャドウ：text-shadow(p204)

IE9に非対応。