XHTML/HTML&CSS スタイルシート・デザイン辞典

※本ページはソーテック社発行の書籍「XHTML/HTML&CSS スタイルシート・デザイン辞典」購入者のためのものです。
サンプルは書籍内容をマスターする目的のみ使用することができ、他の用途での使用・配布は一切禁止します。

一括ダウンロード

圧縮ファイルにはパスワードが設定されています。
解凍の際は、本書9ページに記載されているパスワードを半角英数字で入力してください。


Macintosh用
(sit形式；約0.7MB)
解凍方法は10.5以上／10.4／10.3

Windows用
(zip形式；約0.7MB)
解凍方法は7／Vista／XP

各サンプルのファイル名をクリックすると、ブラウザでCSSの効果を確認することができます。

本書のキャプチャ画面とサンプルデータの英文書体の違いについて

本書の紙面に掲載されているキャプチャとサンプルデータではソースの内容は同じですが、サンプルデータの段階で文字コードを Shift_JISからUTF-8に変更しています。
Shift_JISでも問題はありませんが、現在のWeb制作においてはUTF-8が主流となっていますので、最終的にこちらで統一しました。
Internet Explorerでは、フォント指定のない英文の表示が、Shift_JISではゴシック系（ひげ無し）の表示、UTF-8では明朝系（ひげ付き）に表示されます。ご了承ください。ゴシック系に表示させる場合は、英文の要素にfont-familyプロパティにゴシック系のsans-serifやゴシックフォントを指定してください。
SECTION ファイル名 タイトル
Part 1 CSSの基本
SECTION 1-06 1_6_1.html style要素を使用してXHTML/HTML文書にまとめて設定する
SECTION 1-06 1_6_2.html style属性を使用してタグに直接設定する
SECTION 1-06 1_6_3_1.html link要素を使って外部のCSSファイルを読み込む
SECTION 1-06 1_6_3_2.html link要素を使って外部のCSSファイルを読み込む
SECTION 1-06 1_6_3_3.html link要素を使って外部のCSSファイルを読み込む
SECTION 1-07 1_7_1.html 要素名
SECTION 1-07 1_7_2.html 要素名,要素名
SECTION 1-07 1_7_3.html すべての要素
SECTION 1-07 1_7_4.html 要素名,クラス名
SECTION 1-07 1_7_5.html .クラス名
SECTION 1-07 1_7_6.html 要素名#ID名
SECTION 1-07 1_7_7.html #ID名
SECTION 1-07 1_7_8.html 親要素 子要素
SECTION 1-07 1_7_9.html 親要素 > 子要素
SECTION 1-07 1_7_10.html 前要素 + 後要素
SECTION 1-07 1_7_11.html 要素名 [要素の属性]
SECTION 1-07 1_7_12.html 要素名[要素の属性 ="値"]
SECTION 1-07 1_7_13.html 要素名：疑似クラス
SECTION 1-07 1_7_14.html 要素名：疑似要素
SECTION 1-10 1_10_1.html 全称セレクタに!importantを指定する
SECTION 1-10 1_10_2.html 全称セレクタに!importantを指定する
SECTION 1-15 1_15_1.html 幅とパディングを指定した場合
SECTION 1-15 1_15_2.html 幅とパディングを指定した場合
SECTION 1-15 1_15_3.html 高さの値に割合を指定した場合
SECTION 1-15 1_15_4.html 高さの値に割合を指定した場合
SECTION 1-15 1_15_5.html インライン要素の幅を指定した場合
SECTION 1-15 1_15_6.html インライン要素の幅を指定した場合
Part 2　疑似要素・疑似クラス
SECTION 2-01 2_1_1.html リンク部分に色を指定する
SECTION 2-01 2_1_2_1.html リンク部分の下線を設定する
SECTION 2-01 2_1_2_2.html リンク部分の下線を設定する
SECTION 2-01 2_1_3.html リンク部分に色を指定する
SECTION 2-01 2_1_4.html リンク部分の背景色を指定する（応用）
SECTION 2-02 2_2_1.html クリックされたときのフォーム要素の背景色を指定する
SECTION 2-03 2_3_1.html 最初の文字のスタイルを設定する
SECTION 2-03 2_3_2.html 最初の行のスタイルを設定する
SECTION 2-03 2_3_3.html 要素の直前と直後に内容を追加する
SECTION 2-04 2_4_1.html 英語と日本語にそれぞれスタイルを設定する
Part 3　色と背景
SECTION 3-01 3_1_1.html 見出しと段落に指定する
SECTION 3-01 3_1_2.html 斜体、段落、文字列の一部に指定する
SECTION 3-01 3_1_3.html フォームの色を指定する
SECTION 3-01 3_1_4.html テキストと背景の色
SECTION 3-02 3_2_1.html body要素
SECTION 3-02 3_2_2.html h2要素
SECTION 3-02 3_2_3.html p要素
SECTION 3-02 3_2_4.html フォームの背景色を指定する
SECTION 3-02 3_2_5.html 見出しと段落をデザインする（応用）
SECTION 3-02 3_2_6.html クラス指定を使った例1（応用）
SECTION 3-02 3_2_7.html クラス指定を使った例2（応用）
SECTION 3-02 3_2_8.html CSSの独立ファイルを活用したデザイン（応用）
SECTION 3-03 3_3_1.html ページ全体に画像を適用する
SECTION 3-03 3_3_2.html 見出しに画像を指定する
SECTION 3-03 3_3_3.html 背景に画像を使ったページのデザイン（応用）
SECTION 3-03 3_3_4.html テーブル要素の背景を指定する（応用）
SECTION 3-04 3_4.html 背景画像をアイコンとして設定する
SECTION 3-04 3_4_1.html 繰り返しを指定しない
SECTION 3-04 3_4_2.html 横方向に繰り返しを指定する
SECTION 3-04 3_4_3.html 縦方向に繰り返しを指定する
SECTION 3-04 3_4_4.html 1つだけ表示させる
SECTION 3-04 3_4_5.html 横方向の繰り返しを利用した例（応用）
SECTION 3-04 3_4_6.html 縦方向の繰り返しを利用した例（応用）
SECTION 3-05 3_4_7.html ページに影を付けたようなデザイン例1（応用）
SECTION 3-05 3_5_1.html 背景画像を固定する
SECTION 3-05 3_5_2.html 全体と段落要素の画像を固定する（応用）
SECTION 3-06 3_6_1.html 背景画像の表示位置を指定する
SECTION 3-06 3_6_2.html 表示位置を割合で指定する
SECTION 3-06 3_6_3.html 表示位置を実数値で指定する
SECTION 3-07 3_7_1_1.html 個別指定のソース
SECTION 3-07 3_7_1_2.html 一括指定のソース
SECTION 3-07 3_7_2.html 背景画像をフッターとしたデザイン例（応用）
Part 4　フォント
SECTION 4-01 4_1_1.html Windows OSの標準的な欧文フォント
SECTION 4-01 4_1_2.html Windows OSの標準的な和文フォント
SECTION 4-01 4_1_3.html Mac OSX独自の和文フォント
SECTION 4-01 4_1_4.html 複数のフォント名を指定する
SECTION 4-01 4_1_5_1.html 一般ファミリー名を指定する
SECTION 4-01 4_1_5_2.html 一般ファミリー名を指定するときの注意点
SECTION 4-02 4_2_1.html 文字サイズを数値と割合で指定する
SECTION 4-02 4_2_2_1.html 文字サイズをキーワードで指定する
SECTION 4-02 4_2_2_2.html 後方互換モードで表示する
SECTION 4-03 4_3_1.html 文字の太さを指定する
SECTION 4-04 4_4_1.html 値をItalicに指定する
SECTION 4-04 4_4_2.html 値をObliqueに指定する
SECTION 4-04 4_4_3.html 値をnormalに指定する
SECTION 4-05 4_5_1.html 文字にスモールキャピタルを指定する
SECTION 4-05 4_5_2.html 文字を通常に指定する
SECTION 4-06 4_6_1.html 文字をまとめて指定する
SECTION 4-06 4_6_2.html 文字サイズ、フォントを指定する
COLUMN 4column_hiragino.html Safariでのヒラギノ書体の表示
Part 5　テキスト
SECTION 5-01 5_1_1.html 行揃えを左に指定する
SECTION 5-01 5_1_2.html 行揃えを中央に指定する
SECTION 5-01 5_1_3.html 行揃えを右に指定する
SECTION 5-01 5_1_4.html 行揃えを両端揃えに指定する
SECTION 5-02 5_2_1.html 文字を上に指定する
SECTION 5-02 5_2_2.html 文字を中央に指定する
SECTION 5-02 5_2_3.html 文字を下に指定する
SECTION 5-02 5_2_4.html 文字を上付き下付きに指定する
SECTION 5-02 5_2_5.html 化学式を記述する
SECTION 5-03 5_3_1.html 行の高さを指定する
SECTION 5-04 5_4_1.html テキストの頭にインデントを付ける
SECTION 5-04 5_4_2.html 字下げの値をpxで指定する
SECTION 5-04 5_4_3.html 2行目から字下げを指定する
SECTION 5-05 5_5_1.html 文字に装飾を指定する
SECTION 5-05 5_5_2.html ロールオーバー時にのみ下線を表示する（応用）
SECTION 5-06 5_6_1.html 文字間隔を設定する
SECTION 5-06 5_6_2.html 文字間隔をemで設定する
SECTION 5-07 5_7_1.html 英文の単語の間隔を設定する
SECTION 5-07 5_7_2.html メニューの単語の間隔を設定する（応用）
SECTION 5-07 5_7_3.html メニューの単語の間隔を使ったナビゲーションデザイン
SECTION 5-08 5_8_1.html 文字をそのまま表示する
SECTION 5-08 5_8_2.html 先頭の文字を大文字に表示する
SECTION 5-08 5_8_3.html すべての文字を大文字に表示する
SECTION 5-08 5_8_4.html すべての文字を小文字に表示する
SECTION 5-09 5_9_1.html 標準準拠モードでの表示
SECTION 5-09 5_9_2.html 後方互換モードでの表示
SECTION 5-09 5_9_3.html 何も指定していない状態
SECTION 5-10 5_10.html 文字表記の方向を変更する
Part 6　ボックス
SECTION 6-01 6_1_1.html マージンを個別に指定する
SECTION 6-01 6_1_2.html ボーダーを付けた要素のマージン
SECTION 6-01 6_1_3.html マージンを割合で指定する
SECTION 6-01 6_1_4.html body要素のマージンを0に指定する
SECTION 6-01 6_1_5.html 要素を中央に寄せる
SECTION 6-01 6_1_6.html マージンを使ったページのデザイン（応用）
SECTION 6-02 6_2_1.html 上下と左右のマージンを指定する
SECTION 6-02 6_2_2.html 上下左右のマージンを指定する
SECTION 6-02 6_2_3.html 見出しと段落のデザイン
SECTION 6-02 6_2_4.html すべての要素のマージンを0に指定する
SECTION 6-03 6_3_1.html 上下左右のパディングを個別に指定する
SECTION 6-03 6_3_2.html ボーダーの付いたp要素にパディングを指定する
SECTION 6-03 6_3_3.html フォームにパディングを指定する
SECTION 6-04 6_4_1.html 上と左右と下のパディングを指定する
SECTION 6-04 6_4_2.html 上下左右のパディングを指定する
SECTION 6-04 6_4_3.html パディングを指定していない例
SECTION 6-04 6_4_4.html パディングを指定した例
SECTION 6-05 6_5.html ボーダーの境界
SECTION 6-05 6_5_1.html ボーダーの種類を個別に指定する
SECTION 6-05 6_5_2.html ボーダーを活用してページをデザインする（応用）
SECTION 6-06 6_6.html ボーダーの種類
SECTION 6-06 6_6_1.html ボーダーを指定する-1
SECTION 6-06 6_6_2.html ボーダーを指定する-2
SECTION 6-07 6_7_1.html 上下左右のボーダーの色を指定する
SECTION 6-07 6_7_2.html ボーダーの種類を指定して色を指定しない例
SECTION 6-07 6_7_3.html ボーダーを活用したページデザイン1（応用）
SECTION 6-07 6_7_4.html リーダーを活用したページデザイン2（応用）
SECTION 6-08 6_8_1.html 上下左右のボーダーの色を指定する
SECTION 6-08 6_8_2.html 画像にボーダーを指定する
SECTION 6-08 6_8_3.html 見出しのバリエーション1
SECTION 6-08 6_8_4.html 見出しのバリエーション2（応用）
SECTION 6-09 6_9.html 破線の太さ
SECTION 6-09 6_9_1.html ボーダーの太さをキーワードで指定する
SECTION 6-09 6_9_2.html ボーダーの太さを個別に指定する
SECTION 6-09 6_9_3.html ボーダーの太さを変えたフォームのデザイン（応用）
SECTION 6-10 6_10_1.html ボーダーの太さを数値で指定する
SECTION 6-10 6_10_2.html ボーダーの太さを変えた見出しのパターン（応用）
SECTION 6-11 6_11_1.html ボーダーの種類、色、太さをボーダーごとに指定する
SECTION 6-11 6_11_2.html ボーダーを活用してロールオーバーボタンを作る（応用）
SECTION 6-12 6_12_1.html ボーダーの種類、色、太さをまとめて指定する
SECTION 6-12 6_12_2.html ロールオーバーするとへこんで見えるボタン（応用）
SECTION 6-13 6_13.html 輪郭線の種類を指定する
SECTION 6-14 6_14.html 輪郭線の色を指定する
SECTION 6-15 6_15.html 輪郭線の太さを指定する
SECTION 6-16 6_16.html 輪郭線の種類、色、太さをまとめて指定する
SECTION 6-17 6_17_1.html 要素の幅を指定する
SECTION 6-17 6_17_2.html 要素の幅をピクセルで指定する
SECTION 6-17 6_17_3.html 要素の幅を文字数で指定し、パディングを指定する
SECTION 6-18 6_18_1.html 要素の高さを指定する
SECTION 6-18 6_18_2.html 画像の高さを指定する
SECTION 6-19 6_19.html 要素の幅の最大値を指定する
SECTION 6-20 6_20.html 要素の高さの最大値を指定する
SECTION 6-21 6_21.html 要素の幅の最小値を指定する
SECTION 6-22 6_22.html 要素の高さ の最小値を指定する
Part 7　配置
SECTION 7-01 7_1_1.html 表示形式を指定する前の状態
SECTION 7-01 7_1_2.html 要素の表示形式を指定した状態
SECTION 7-01 7_1_3.html a要素をブロック要素に指定する
SECTION 7-01 7_1_4_1.html 変更する前の状態
SECTION 7-01 7_1_4_2.html インライン要素に変更した状態
SECTION 7-02 7_2_1.html 要素を通常配置に指定する
SECTION 7-02 7_2_2.html 通常の位置から相対配置に指定する
SECTION 7-02 7_2_3.html 左上端を基準として絶対配置で指定する
SECTION 7-02 7_2_4.html 左上端を基準として固定配置で指定する
SECTION 7-02 7_2_5.html マイナスの値を相対配置で指定する
SECTION 7-02 7_2_6.html 複数の要素を相対配置で指定する
SECTION 7-02 7_2_7.html 包含する要素と複数の要素を相対配置で指定する
SECTION 7-02 7_2_8.html 複数の要素を絶対配置で指定する
SECTION 7-02 7_2_9.html position:relativeで絶対配置の基準を指定する1
SECTION 7-02 7_2_10.html position:relativeで絶対配置の基準を指定する2
SECTION 7-03 7_3_1.html 絶対配置で上からの位置と左からの位置を指定する
SECTION 7-03 7_3_2.html 要素の順を変更する
SECTION 7-03 7_3_3.html 基になる作例
SECTION 7-03 7_3_4.html 見出しを相対配置で斜め上に移動する
SECTION 7-03 7_3_5.html 相対配置で作成したボックスを繰り返し使用する1（応用）
SECTION 7-03 7_3_6.html 相対配置で作成したボックスを繰り返し使用する2（応用）
SECTION 7-04 7_4_1.html 指定した要素を左に、後に続く要素を右に配置する
SECTION 7-04 7_4_2.html 指定した要素を右に、後に続く要素を左に配置しマージンを指定する
SECTION 7-04 7_4_3.html 画像以外の要素に回り込みを指定する
SECTION 7-04 7_4_4.html 左に要素と画像を配置し、後に続く要素を回り込むよう指定する
SECTION 7-04 7_4_5.html 左と右に要素を配置し、後に続く要素を中央に回り込むよう指定する
SECTION 7-05 7_5_1.html 左側の回り込みを解除する
SECTION 7-05 7_5_2.html 中央のの回り込みを解除する
SECTION 7-06 7_6_1.html 重なり順を指定した例
SECTION 7-06 7_6_2.html 重なり順を指定した例
SECTION 7-07 7_7_1.html 内容をそのまま表示する
SECTION 7-07 7_7_2.html 収まりきらない内容を非表示にする
SECTION 7-07 7_7_3.html スクロールによって内容表示を可能にする
SECTION 7-07 7_7_4.html ブラウザに依存した処理方法に指定する
SECTION 7-08 7_8_1.html 2段目の段落に表示を指定する
SECTION 7-08 7_8_2.html 2段目の段落に非表示を指定する
SECTION 7-08 7_8_3.html visibility:hiddenとdisplay:noneの違い
SECTION 7-09 7_9.html 絶対配置した要素の表示範囲を指定する
Part 8　リスト
SECTION 8-01 8_1_1.html リストのマークを指定する
SECTION 8-01 8_1_2.html リストのマークを指定する
SECTION 8-02 8_2_1.html リストのマークに画像を指定する
SECTION 8-02 8_2_2.html 透過GIFをリストのマークに指定する（応用）
SECTION 8-03 8_3_1.html テキストが回り込むように指定する
SECTION 8-03 8_3_2.html 通常の状態に指定する
SECTION 8-04 8_4_1.html リストマークをまとめて指定する
Part 9　テーブル
SECTION 9-01 9_1_1.html テーブルの幅と高さを割合で指定する
SECTION 9-01 9_1_2.html セルの幅と高さを割合で指定する
COLUMN 9_1_column.html テーブル関連の要素
SECTION 9-02 9_2_1.html セルの上下と左右にパディングを指定する
SECTION 9-02 9_2_2.html テーブルにパディングを指定する
SECTION 9-03 9_3_1.html 水平方向と垂直方向の位置を指定する
SECTION 9-04 9_4_1.html table要素の背景に色を指定する
SECTION 9-04 9_4_2.html table要素の背景に画像を指定する
SECTION 9-04 9_4_3.html 背景画像の敷き詰め方を指定する
SECTION 9-04 9_4_4.html table要素に画像を、th要素に色を指定する（応用）
SECTION 9-05 9_5_1.html それぞれの要素にボーダーを指定する
SECTION 9-05 9_5_2.html ボーダーの太さを変更する
SECTION 9-05 9_5_3.html セルだけにボーダーを指定する
SECTION 9-06 9_6_1.html セルのボーダーを統合する
SECTION 9-06 9_6_2.html 色違いのボーダーを統合する
SECTION 9-06 9_6_3.html 値をsaparateに指定する
SECTION 9-06 9_6_4.html デーブルのデザインをする（応用）
SECTION 9-06 9_6_5.html キャプションを含めたテーブルのデザイン（応用）
SECTION 9-07 9_7_1.html セルの間隔を指定する
SECTION 9-07 9_7_2.html セルの間隔を左右と上下で指定する
SECTION 9-07 9_7_3.html 値を0に指定する
SECTION 9-07 9_7_4.html テーブルとセルでボーダーの色を変更する
SECTION 9-08 9_8_1.html キャプションの位置を下に指定する
SECTION 9-08 9_8_2.html キャプションの位置を上に指定する
SECTION 9-08 9_8_3.html キャプションの位置を左に指定する
SECTION 9-08 9_8_4.html キャプションの位置を右に指定する
SECTION 9-09 9_9_1.html 空セルのボーダーを表示する
SECTION 9-09 9_9_2.html 空セルのボーダーを非表示にする
SECTION 9-10 9_10_1.html セルの幅を固定する
COLUMN 9_column1.html 標準準拠モードで表示する
COLUMN 9_column2.html 後方互換モードで表示する
COLUMN 9_column3.html テーブルの文字サイズを100%に指定する
Part 10　その他
SECTION 10-01 10_1_1.html カーソルの形を変更する
SECTION 10-02 10_2_1.html 要素の直前の改ページを指定する
SECTION 10-02 10_2_2.html 要素の直後の改ページを指定する
SECTION 10-02 10_2_3.html 要素内での改ページを禁止する
SECTION 10-03 10_1_1.html 改ページ前後の最低行数を指定する
SECTION 10-04 10_4_1.html 要素の前後に内容を追加する
SECTION 10-05 10_5_1.html 引用符の種類を指定する
Part 11　段組
SECTION 11-01 11_1_1.html 回り込み指定による2段組
SECTION 11-01 11_1_1ng1.html ボックスの幅を割合で指定した場合の注意点
SECTION 11-01 11_1_1ng2.html 中身となる要素のマージンを指定しない場合の注意点
SECTION 11-01 11_1_2.html フッタを付けた2段組
SECTION 11-01 11_1_3.html ウィンドウサイズに合わせ、サイズ変更する2段組
SECTION 11-02 11_2_1.html 片側のみ絶対配置指定の2段組
SECTION 11-02 11_2_1ng1.html position:relativeを指定しない場合の注意点
SECTION 11-02 11_2_1ng2.html 中身となる要素のマージンを指定しない場合の注意点
SECTION 11-02 11_2_2.html すべて絶対配置の2段組
SECTION 11-02 11_2_3.html 絶対配置によるフッタを付けた2段組
SECTION 11-02 11_2_3ng.html 絶対配置によるフッタを付けた2段組の注意点
SECTION 11-02 11_2_4.html ウィンドウサイズに合わせ、サイズ変更する2段組
SECTION 11-03 11_3_1.html 回り込みによる指定で片側に寄せる3段組
SECTION 11-03 11_3_2.html 絶対配置による両サイド固定の3段組
SECTION 11-03 11_3_3.html 段組の背景に画像を指定した例
SECTION 11-03 11_3_4.html 段組の背景に画像を指定した例（応用）
SECTION 11-03 11_column1.html div要素内の要素のマージンを指定しない例
SECTION 11-03 11_column2.html h1要素のマージンを0に指定した例

©2009 KIKUKO WATANABE / ソーテック社