スタイルシート サンプル＆リファレンス

実践のCSSレイアウトで必要となる情報をまるごと収録
IE7とCSS2.1に対応
約270個の豊富なサンプルを収録
すべてのサンプルにブラウザ対応表つき
実践で必要となる裏ワザ、先行実装、独自拡張も掲載

00 CSS の基礎知識
■ CSS について
■ XHTML の用語
■ 要素の種類
ブロックレベル要素
インライン要素
置換要素
■ 要素の親子関係
■ CSS の書式
■ ボックス
■ 単位
■ 色の指定
RGB 値で指定する方法
16 色のキーワード
GUI の色のキーワード
■ スタイルの継承
■ スタイルの優先順位
■ ＠で始まる書式
@media
@import
@charset
■ 標準モードと互換モード

01 XHTML への組み込み
■ CSS を書いたファイルを読み込む
Sample 01-01-01 1 つのCSS ファイルを読み込む
Sample 01-01-02 複数のCSS ファイルを読み込む
Sample 01-01-03 NN4x には読み込ませない
Sample 01-01-04 NN4x とIE4x には読み込ませない
Sample 01-01-05 NN4x やIE4x 用に別のCSS を用意する
Sample 01-01-06 読み込むCSS ファイルを切り替え可能にする
■ Column ■ IE で代替スタイルシートを切り替えるには？
■ style 要素の内容として組み込む
Sample 01-02-01 style 要素の内容として組み込む
Sample 01-02-02 NN4x には組み込ませない
Sample 01-02-03 NN4x とIE4x には読み込ませない
■ Column ■ XHTML のstyle 要素の書き方と注意点
■ style 属性の値として組み込む
Sample 01-03-01 style 属性の値として組み込む

02 適用先の指定
■ 要素名で指定する
Sample 02-01-01 要素名で指定する
Sample 02-01-02 すべての要素に指定する
■ Column ■ ユーザースタイルシートでフォントサイズを変更する
■ class 属性・id 属性の値で指定する
Sample 02-02-01 指定した要素にＩＤを適用する
Sample 02-02-02 指定した要素にクラスを適用する
Sample 02-02-03 指定した特定の要素にクラスを適用する
Sample 02-02-04 １つの要素に複数のクラスを指定する
■ 特定の範囲に含まれる要素に適用する
Sample 02-03-01 特定の要素に含まれる要素に適用する
Sample 02-03-02 特定のクラスに含まれる要素に適用する
Sample 02-03-03 特定のページの要素だけに適用する
■ Column ■ body 要素に指定するid 属性とclass 属性の使い分け
■ リンク部分に適用する
Sample 02-04-01 ページ全体のリンクに適用する
Sample 02-04-02 クラスを指定したリンクに適用する
Sample 02-04-03 特定の範囲に含まれるリンクに適用する
Sample 02-04-04 リンクの下線を消す
Sample 02-04-05 カーソルが上にある時だけ下線を表示する
■ 1 文字目に適用する
Sample 02-05-01 １文字目の色を変える
Sample 02-05-02 ドロップキャップスを設定する
■ 適用先を複数指定する
Sample 02-06-01 適用先を複数指定する
■ 属性名・属性値で指定する
Sample 02-07-01 属性名で指定する
Sample 02-07-02 属性名+ 属性値で指定する
Sample 02-07-03 hover がリンク以外に適用されないようにする
Sample 02-07-04 新しいブラウザのみPNG 画像を表示させる
■ 子要素・直後にある要素に適用する
Sample 02-08-01 子要素に適用する
Sample 02-08-02 直後にある要素に適用する

03 色と背景
■ 文字色
Sample 03-01-01 ページ全体の文字色を設定する
Sample 03-01-02 #ff0000 形式の指定例
■ Column ■ 一般に色はどの形式で指定されているのか？
Sample 03-01-03 #f00 形式の指定例
Sample 03-01-04 rgb(255,0,0) 形式の指定例
Sample 03-01-05 rgb(100%,0%,0%) 形式の指定例
■ 背景色
Sample 03-02-01 ページ全体の背景色を設定する
Sample 03-02-02 テキストへの適用例
Sample 03-02-03 フォームへの適用例
Sample 03-02-04 テーブルへの適用例
■ Column ■ Mac 版IE4 のテーブルセルのパディングのバグ
Sample 03-02-05 ボーダー領域の背景が見える例
■ 背景画像 80
Sample 03-03-01 ページ全体の背景画像を設定する
Sample 03-03-02 テキストへの適用例
Sample 03-03-03 フォームへの適用例
Sample 03-03-04 テーブルへの適用例
■ 背景画像の並び方
Sample 03-04-01 1 つだけ表示
Sample 03-04-02 縦に繰り返す
Sample 03-04-03 横に繰り返す
Sample 03-04-04 縦横に繰り返す
■ 背景画像の位置
Sample 03-05-01 右100 ピクセル下50 ピクセルの位置に配置
Sample 03-05-02 右80% 下30% の位置に配置
Sample 03-05-03 中央に配置
Sample 03-05-04 右下に配置
Sample 03-05-05 右で縦に繰り返す
Sample 03-05-06 下で横に繰り返す
Sample 03-05-07 中央で縦に繰り返す
Sample 03-05-08 中央で横に繰り返す
Sample 03-05-09 上から30 ピクセルの位置で横に繰り返す
■ Column ■ Windows 版IE4 の背景画像の繰り返しのバグ
■ 背景画像の固定
Sample 03-06-01 縦に繰り返す背景画像を固定する
Sample 03-06-02 1 つの背景画像を左上に固定する
Sample 03-06-03 背景を半透明のように見せる
■ 背景関連の一括指定
Sample 03-07-01 背景色を設定する
Sample 03-07-02 背景画像を設定する
Sample 03-07-03 背景画像を縦に繰り返す
Sample 03-07-04 背景画像を下で横に繰り返す
Sample 03-07-05 1 つの背景画像を左上に固定する
Sample 03-07-06 角を丸くする
■ Column ■ Opera の背景に関する注意点

04 テキスト
■ 行揃え
Sample 04-01-01 左揃え
Sample 04-01-02 右揃え
Sample 04-01-03 中央揃え
Sample 04-01-04 両端揃え
Sample 04-01-05 テーブルセルへの適用例
Sample 04-01-06 テーブルキャプションへの適用例
■ 縦方向の位置
Sample 04-02-01 行全体の上に揃える
Sample 04-02-02 行全体の下に揃える
Sample 04-02-03 テキストの上に揃える
Sample 04-02-04 テキストの下に揃える
Sample 04-02-05 テキストの中央に揃える
Sample 04-02-06 画像をテキストの上に揃える
Sample 04-02-07 画像をテキストの中央に揃える
Sample 04-02-08 上付文字
Sample 04-02-09 下付文字
Sample 04-02-10 テーブル横列の上に揃える
Sample 04-02-11 テーブル横列の下に揃える
Sample 04-02-12 テーブル横列の中央に揃える
Sample 04-02-13 画像の下にできる隙間をなくす
■ 行の高さ
Sample 04-03-01 実数での指定例
Sample 04-03-02 ％での指定例
Sample 04-03-03 NN4x で画像がテキストに重なる例
■ 文字間隔
Sample 04-04-01 文字間隔を設定する
Sample 04-04-02 ボタンへの適用例
Sample 04-04-03 テーブルキャプションへの適用例
■ 単語間隔
Sample 04-05-01 単語間隔を設定する
■ 1 行目のインデント
Sample 04-06-01 １行目のインデントを設定する
■ 空白・タブ・改行の処理
Sample 04-07-01 空白・タブ・改行をそのまま表示させる
Sample 04-07-02 改行しないで表示させる
Sample 04-07-03 テーブルセル内での改行を禁止する
■ テキストに影をつける
Sample 04-08-01 見出しへの適用例

05 フォント
■ フォントの種類
Sample 05-01-01 フォント名での指定例
Sample 05-01-02 一般分類名での指定例
Sample 05-01-03 フォームへの適用例
■ Column ■ Windows とMac にインストールされているフォントは？
■ フォントサイズ131
Sample 05-02-01 数値、％、smaller、larger での指定例
Sample 05-02-02 ７段階の大きさを示すキーワードでの指定例
Sample 05-02-03 フォームへの適用例
Sample 05-02-04 テーブルへの継承
■ 太字
Sample 05-03-01 太字にする
Sample 05-03-02 フォームへの適用例
■ 斜体
Sample 05-04-01 斜体にする
Sample 05-04-02 フォームへの適用例
■ 下線・上線・取消線
Sample 05-05-01 下線・上線・取消線をつける
■ 大文字・小文字140
Sample 05-06-01 大文字・小文字にする
■ スモールキャップス
Sample 05-07-01 スモールキャップスにする
■ フォント関連の一括指定
Sample 05-08-01 フォントの種類とサイズを指定する
Sample 05-08-02 フォント関連のプロパティをまとめて指定する
Sample 05-08-03 入力フィールドへの適用例

06 ボックス
■ マージン
Sample 06-01-01 基本的な例
Sample 06-01-02 見出しへの適用例
Sample 06-01-03 見出しと段落への適用例
Sample 06-01-04 ブロックレベル要素をセンタリングする
■ マージンの一括指定
Sample 06-02-01 基本的な例
Sample 06-02-02 フレーム内のマージンを設定する
■ パディング
Sample 06-03-01 基本的な例
Sample 06-03-02 見出しへの適用例
Sample 06-03-03 段落への適用例
■ パディングの一括指定
Sample 06-04-01 基本的な例
Sample 06-04-02 ボタンへの適用例
Sample 06-04-03 テーブルセルへの適用例
■ ボーダー色
Sample 06-05-01 基本的な例
■ ボーダー色の一括指定
Sample 06-06-01 基本的な例
■ ボーダーの太さ
Sample 06-07-01 基本的な例
■ Column ■ ブラウザによるボーダーの太さの違い
■ ボーダーの太さの一括指定
Sample 06-08-01 基本的な例
■ ボーダーの種類
Sample 06-09-01 基本的な例
■ ボーダーの種類の一括指定
Sample 06-10-01 基本的な例
Sample 06-10-02 背景を適用した例
■ ボーダー色・太さ・種類
Sample 06-11-01 ボーダーで横罫線を引く
Sample 06-11-02 見出しへの適用例1
Sample 06-11-03 見出しへの適用例2
Sample 06-11-04 見出しへの適用例3
Sample 06-11-05 見出しと段落への適用例
Sample 06-11-06 インライン要素への適用例
Sample 06-11-07 リンクの下線を点線にする
■ ボーダー関連の一括指定
Sample 06-12-01 基本的な例
■ Column ■ ボーダーを一括で指定する場合の初期値について
Sample 06-12-02 フォームへの適用例
Sample 06-12-03 リンクした画像のボーダーを消す1
Sample 06-12-04 リンクした画像のボーダーを消す2
■ 幅
Sample 06-13-01 基本的な例
Sample 06-13-02 フォームへの適用例
Sample 06-13-03 テーブルへの適用例
■ 高さ
Sample 06-14-01 基本的な例
Sample 06-14-02 画像への適用例
Sample 06-14-03 テーブルへの適用例
■ 幅の最小値・最大値
Sample 06-15-01 幅の最小値を設定する
Sample 06-15-02 幅の最大値を設定する
■ 高さの最小値・最大値
Sample 06-16-01 高さの最小値を設定する
Sample 06-16-02 高さの最大値を設定する

07 配置と表示
■ 回り込み
Sample 07-01-01 画像を左に寄せてテキストを回り込ませる
Sample 07-01-02 画像との間隔を空ける
Sample 07-01-03 画像を左右に配置して中央に回り込ませる
Sample 07-01-04 同じ側に複数の画像を寄せて回り込ませる
Sample 07-01-05 見出しへの適用例
■ 回り込みの解除
Sample 07-02-01 左に寄せた画像への回り込みを解除する
Sample 07-02-02 右に寄せたテーブルへの回り込みを解除する
■ 相対配置・絶対配置
Sample 07-03-01 相対配置の例
Sample 07-03-02 絶対配置の例
Sample 07-03-03 固定配置の例
■ 上下左右の位置指定
Sample 07-04-01 相対配置の基本的な例
Sample 07-04-02 絶対配置の基本的な例
Sample 07-04-03 ボーダーの上にボックスを配置する
Sample 07-04-04 縦横の中心に配置する
■ 重なる順序
Sample 07-05-01 基本的な例
■ 表示形式210
Sample 07-06-01 インライン要素をブロックレベル要素のように表示させる
Sample 07-06-02 label 要素への適用例
Sample 07-06-03 ボックスを消す
■ 表示・非表示213
Sample 07-07-01 ボックスを透明にする
■ はみ出る部分の表示方法
Sample 07-08-01 はみ出して表示させる
Sample 07-08-02 はみ出る部分は表示させない
Sample 07-08-03 スクロールさせる
Sample 07-08-04 テーブルの一部をスクロールさせる

08 リスト
■ マークの種類
Sample 08-01-01 記号
Sample 08-01-02 数字
Sample 08-01-03 ローマ数字
Sample 08-01-04 アルファベット
Sample 08-01-05 ギリシャ文字
Sample 08-01-06 漢数字
Sample 08-01-07 ひらがな
Sample 08-01-08 カタカナ
Sample 08-01-09 マークを表示しない
■ マーク画像
Sample 08-02-01 リストに同じ画像を指定する
Sample 08-02-02 リストの項目ごとに画像を変える
■ Column ■ 実践では使われていないlist-style-image プロパティ
■ マークの表示位置
Sample 08-03-01 基本的な例
■ マーク関連の一括指定
Sample 08-04-01 マークの種類と画像と表示位置を指定する
Sample 08-04-02 マークを表示しない
Sample 08-04-03 マークの色と太さを変える
Sample 08-04-04 マークを背景画像で表示させる

09 テーブル
■ テーブルの表示方法
Sample 09-01-01 基本的な例
■ セルのボーダーの表示形式
Sample 09-02-01 基本的な例
Sample 09-02-02 線を１本にした例１
Sample 09-02-03 線を１本にした例２
Sample 09-02-04 線を１本にした例３
Sample 09-02-05 線を１本にした例４
■ セルのボーダーの間隔
Sample 09-03-01 基本的な例
■ 空セルのボーダーの表示・非表示
Sample 09-04-01 基本的な例

10 その他
■ テキストや画像を挿入する
Sample 10-01-01 テキストを挿入する
Sample 10-01-02 画像を挿入する
Sample 10-01-03 属性値を挿入する
■ カーソルの形状
Sample 10-02-01 デフォルト
Sample 10-02-02 リンク Sample 10-02-03 十字型
Sample 10-02-04 時計
Sample 10-02-05 進行中
Sample 10-02-06 ヘルプ
Sample 10-02-07 テキスト
Sample 10-02-08 移動
Sample 10-02-09 リサイズ
Sample 10-02-10 カーソルのデータを指定する
■ 印刷時の改ページ
Sample 10-03-01 テーブルの直前で改ページする

11 応用サンプル
■ 2 段組
Sample 11-01-01 回り込みA パターン（左メニュー）
Sample 11-01-02 回り込みA パターン（右メニュー）
Sample 11-01-03 回り込みB パターン（左メニュー）
Sample 11-01-04 回り込みB パターン（右メニュー）
Sample 11-01-05 回り込みC パターン（左メニュー）
Sample 11-01-06 回り込みC パターン（右メニュー）
Sample 11-01-07 回り込みC パターン応用（左メニュー）
Sample 11-01-08 回り込みC パターン応用（右メニュー）
Sample 11-01-09 絶対配置パターン（左メニュー）
Sample 11-01-10 絶対配置パターン（右メニュー）
■ Column ■ XHTMLでメニューの段よりもメインコンテンツの段の内容を先に配置するには?
■ 3 段組
Sample 11-02-01 回り込みA パターン（全段の幅を固定）
Sample 11-02-02 回り込みA パターン（全段の幅を% 指定）
Sample 11-02-03 回り込みＢパターン（全段の幅を固定）
Sample 11-02-04 回り込みC パターン（全段の幅を固定）
Sample 11-02-05 回り込みC パターン（左右段の幅を固定）
Sample 11-02-06 回り込みC パターン（全段の幅を% 指定）
Sample 11-02-07 回り込みC パターン応用（全段の幅を固定）
Sample 11-02-08 絶対配置パターン（左右段の幅を固定）
Sample 11-02-09 絶対配置パターン（全段の幅を% 指定）
■ ナビゲーション
Sample 11-03-01 リスト項目を線で区切る
Sample 11-03-02 項目ごとにボックスを表示させる（縦）
Sample 11-03-03 項目ごとにボックスを表示させる（横）
Sample 11-03-04 ナビゲーション・バー
Sample 11-03-05 ナビゲーションのテキストを背景画像に置き換える
■ Column ■ Firefox15 以降で選択時に線が表示される問題
■ 角を丸くする
Sample 11-04-01 2 つの角を丸くする
Sample 11-04-02 4 つの角を丸くする
Sample 11-04-03 ドロップシャドウをつける
■ Column ■ 色指定の「#f00」形式と「#ff0000」形式の使い分け295
■ 印刷用のスタイルシート
Sample 11-05-01 印刷用スタイルシートの例
Sample 11-05-02 リンク部分の直後にURL を追加して印刷する
■ 問題回避のための裏ワザ
Sample 11-06-01 Windows 版IE60 以前に別の指定をする
Sample 11-06-02 Mac 版IE5x に別の指定をする
Sample 11-06-03 Windows 版IE60 以前を除いた新しいブラウザに別の指定をする
Sample 11-06-04 Windows 版IE60 の配置に関わるバグを解消する
Sample 11-06-05 Windows 版IE50 にだけCSS ファイルを読み込ませる
Sample 11-06-06 Windows 版IE55 にだけCSS ファイルを読み込ませる
Sample 11-06-07 Windows 版IE50 と55 にだけCSS ファイルを読み込ませる
Sample 11-06-08 Mac 版IE5x にだけCSS ファイルを読み込ませる
Sample 11-06-09 音声ブラウザ向けのメッセージを入れる1
Sample 11-06-10 音声ブラウザ向けのメッセージを入れる2
Sample 11-06-11 音声ブラウザ向けのメッセージを入れる3
Sample 11-06-12 ボックスの最後でfloat をクリアする
■ Column ■ 今では使われなくなった古い裏ワザ
■ 先行実装と独自拡張
Sample 11-07-01 長いURL の途中で改行させる
Sample 11-07-02 条件分岐コメント：Windows 版IE だけに読み込ませる
Sample 11-07-03 条件分岐コメント：IE70 だけに読み込ませる
Sample 11-07-04 条件分岐コメント：IE60 だけに読み込ませる
Sample 11-07-05 条件分岐コメント：IE7 未満(50/55/60) に読み込ませる
Sample 11-07-06 条件分岐コメント：IE6 未満（50/55）に読み込ませる
Sample 11-07-07 条件分岐コメント：IE55 未満(50) に読み込ませる

12 付録
■ CSS2 セレクタ一覧
■ CSS2 全プロパティ・値一覧
■ Web セーフカラーチャート
■ 10 進数⇔ 16 進数⇔％対応表
■ プロパティ索引
■ サンプル項目索引