Webスタイルシート・デザインガイド
| Introduction | ||
|---|---|---|
 |
Webページのレイアウト スタイルシートの基本ルール 文字のスタイルと段落のスタイル ブラウザの対応 Webページエディタでスタイルシートを使うには |
|
|
|
||
| Chapter1 ページのスタイル | ||
|
スタイルシートの定義 | <style> |
| TAGセレクタ | TAG | |
| CLASSセレクタ | .class | |
| ページの背景 | background | |
| ページのマージン | margin | |
| ページの文字のスタイル | font | |
| リンクのスタイル | A:link A:visited A:focus A:active A:fover |
|
| スクロールバー | scrollbar | |
|
|
||
| Chapter2 段落のスタイル | ||
|
行送り | line-height |
| 行揃え | text-align | |
| ジャスティファイの種類 | text-justify | |
| ジャスティファイしたときの字間調整 | text-autospace | |
| 1行目のインデント | text-indent | |
| 改行方法の設定 | word-break | |
| 禁則処理 | line-break | |
| 自動改行の禁止 | white-space | |
| 強制改行 | word-wrap | |
| テキストを入力した通りに表示する | white-space | |
| 段落の横幅 | width | |
| 段落の高さ | height | |
| テキストが段落内に収まらないときの処理 | overflow overflow-x overflow-y text-overflow |
|
| グリッドレイアウト | layout-grid-type layout-grid-mode layout-grid-line layout-grid-char |
|
| 縦書き | writing-mode | |
| 横書きの記述方向 | direction unicode-bidi |
|
| コラム | 日本語用の段落書式 アラビア語用の段落書式 |
|
|
|
||
| Chapter3 文字のスタイル | ||
|
文字の種類 | font-family |
| 文字のサイズ | font-size | |
| 文字の太さ | font-weight | |
| イタリック体(斜体) | font-style | |
| 文字の装飾 | text-decoration text-underlineposition |
|
| 文字の色 | color | |
| 文字揃え | vertical-align | |
| 大文字・小文字 | font-variant text-transform |
|
| 字間スペース | letter-spacing | |
| 単語間のスペース | word-spacing | |
| 文字設定のグループ化 | font | |
| ルビ | ruby-align ruby-position |
|
| フォントの埋め込み | @font-face | |
|
|
||
| Chapter4 背景のアレンジ | ||
|
背景色 | background-color |
| 背景イメージ | background-image | |
| 背景イメージの固定 | background-attachment | |
| 背景イメージのマッピング | background-repeat | |
| 背景イメージの位置 | background-position background-position-x background-position-y |
|
| 背景設定のグループ化 | background | |
| 段落に背景を設定する 文字に背景を設定する |
||
|
|
||
| Chapter5 ボーダーのアレンジ | ||
|
ボーダーの種類 | border-style border-top-style border-right-style border-bottom-style border-left-style |
| ボーダーの太さ | border-width border-top-width border-right-width border-bottom-width border-left-width |
|
| ボーダーの色 | border-color border-top-color border-right-color border-bottom-color border-left-color |
|
| ボーダー設定のグループ化 | border border-top border-right border-bottom border-left |
|
| 段落にボーダーを設定する 文字にボーダーを設定する | ||
| コラム：アウトライン | outline outline-style outline-width outline-color |
|
|
|
||
| Chapter6 余白のアレンジ | ||
|
マージン | margin margin-top margin-right margin-bottom margin-left |
| パディング | padding padding-top padding-right padding-bottom padding-left |
|
| 段落の余白を調整する 文字の余白を調整する |
||
| コラム：ブラウザによる余白処理の違い | ||
|
|
||
| Chapter7 位置と表示のアレンジ | ||
|
位置を指定する | position left top right bottom |
| 重なりの順番 | z-index | |
| 段落やテーブル内での位置指定(cascading position) | ||
| クリッピング | clip | |
| 文字や段落の表示 | visibility display |
|
| 文字や段落の種類 | display | |
|
|
||
| Chapter8 イメージのレイアウト | ||
|
水平方向の揃える位置 | vertical-align |
| 回り込み | float clear |
|
| ズーム | zoom | |
| カーソルの形状 | cursor | |
| イメージのレイアウトアレンジ | border margin padding background |
|
|
|
||
| Chapter9 リストのスタイル | ||
|
マークの種類 | list-style-type |
| 番号の種類 | list-style-type | |
| マークのイメージ | list-style-image | |
| マークの位置 | list-style-position | |
| リスト設定のグループ化 | list-style | |
| テキストやイメージの自動挿入 | content :before :after |
|
| コラム：自動ナンバリング | ||
|
|
||
| Chapter10 テーブルのスタイル | ||
|
セルの横幅 | width |
| セルの高さ | height | |
| セル内の要素の横方向の位置 | text-align | |
| セル内の要素の縦方向の位置 | vertical-align | |
| テーブルの背景 | background | |
| テーブルのボーダー | border | |
| 空セルのボーダー処理 | empty-cells | |
| セルの間隔 | border-spacing | |
| セル内の余白 | margin | |
| セル内のテキストのスタイルを設定する | ||
| テーブルのサイズを固定する | table-layout | |
| キャプションの表示位置 | caption-side | |
|
|
||
| Chapter11 フォームのスタイル | ||
|
フォームのレイアウトアレンジ | border background |
| テキストボックスのスクロールバー | scrollbar | |
| 入力モードの設定 | ime-mode | |
|
|
||
| Chapter12 スタイルシートの応用 | ||
|
複数のページでスタイルシートを共用する 画面用と印刷用のスタイルシートを使い分ける セレクタの種類 |
|
|
|
||
| APPENDIX | ||
|
単位リスト Webセーフカラーリスト カラーネームリスト ユーザーシステムカラーリスト |
|
|
|
||
