Webスタイルシート・デザインガイド
|
編著者
|
エビスコム
|
|---|
|
出版社
|
株式会社 エムディエヌコーポレーション
|
|---|
|
出版日
|
2002年6月11日
|
|---|
|
判型
|
B5変形 (180 x 230) ／ 208ページ
|
|---|
|
価格
|
2,800円
|
|---|
|
ISBN
|
4-8443-5650-X
|
|---|
HTMLをマスターし、スタイルシートを覚えようとしている人
スタイルシートを覚えたけれど、うまく活用できていない人
スタイルシートを使って、
一歩先をいくWebページをつくりたい人へ
スタイルシートを覚えるとき、HTMLの延長で考えると、スタイルシートはとても難しいものになってしまいます。スタイルシートは、「Webページをレイアウトする」ことを目的としているので、「文書構造を記述する」ためのHTMLとは、根本的に違うものだからです。
そこで本書では、スタイルシートを使ったWebページレイアウトを、書籍やワープロの文書レイアウトの延長で考えることにしました。そうすることで、スタイルシートはとてもわかりやすくなるからです。
ワープロ文書などをレイアウトするときと同じように、スタイルシートを使ってWebページをレイアウトしていきながら、スタイルシートの機能や、活用例を紹介していきます。
本書では、書籍やワープロ文書などと同じ感覚でWebページをレイアウトできるように、ページレイアウトの手順に従って、スタイルシートの機能をまとめています。そのため、各Chapterは次のような流れで構成しています。
| ページレイアウトの流れとChapterの構成 |
|---|
| ページの基本設定を行う |
Chapter 1 ページ設定 |
| テキストのスタイルを指定する |
Chapter 2 段落書式 |
| Chapter 3 文字設定 |
| イメージを配置する |
Chapter 4 イメージ |
| コンテンツを装飾する |
Chapter 5 背景 |
| Chapter 6 ボーダー |
| Chapter 7 余白 |
| 配置を調整する |
Chapter 8 サイズ |
| Chapter 9 位置の指定 |
| Webページ特有のコンテンツを装飾する |
Chapter 10
リストとフォーム |
| Chapter 11 テーブル |
| スタイルシートを効果的に使用する設定を行う |
Chapter 12 応用 |
各Chapterは、チュートリアルとリファレンスで構成しています。
チュートリアルでは、スタイルシートの基本的な使い方から、レイアウトやデザインを表現するためのテクニックを紹介します。
スタイルシートの基本からマスターしたい場合、Chapter 1〜Chapter 7のチュートリアルでサンプルページを作成してください。
スタイルシートのより高度な使い方をマスターしたい場合、Chapter 8〜Chapter 12のチュートリアルで、サンプルページを作成してください。
リファレンスでは、スタイルの詳細を解説しています。サンプルページのコンテンツは基本的に同じもので、HTMLもシンプルにマークアップしてあります。指定するスタイルによって、どのようなレイアウトやデザインが可能になるかを確認してください。
STYLE SHEET BASIC
ページレイアウトの手順とスタイルシートの仕組み
要素の種類
スタイルシートの対応状況
スタンダードモードと互換モード
Chapter 1 ページ設定
●TUTORIAL @ Chapter 1
●リファレンス
外部スタイルシートを読みこむ
HTML内にスタイルシートを記述する
HTMLタグの属性としてスタイルを指定する
スタイルシート内から外部スタイルシートを読みこむ
要素（HTMLタグ）に対してスタイルを適用する
複数の要素に同じスタイルを適用する
指定した要素内の要素にスタイルを適用する
指定した要素内の子要素にスタイルを適用する
指定した要素と隣接する要素にスタイルを適用する
すべての要素にスタイルを適用する
１つ目の子要素にスタイルを適用する
指定した言語属性を持つ要素にスタイルを適用する
指定した属性を持つ要素にスタイルを適用する
指定した属性と値を持つ要素にスタイルを適用する その１
指定した属性と値を持つ要素にスタイルを適用する その２
指定した属性と値を持つ要素にスタイルを適用する その３
テキストの最初の１行にスタイルを適用する
テキストの最初の１文字にスタイルを適用する
指定したCLASS名を持つ要素にスタイルを適用する
指定したID名を持つ要素にスタイルを適用する
リンク部分のスタイルを指定する
リンク部分にフォーカスしたときのスタイルを指定する
スクロールバーの色を指定する
Chapter 2 段落
●TUTORIAL @ Chapter 2
●リファレンス
行揃えを指定する
ジャスティファイの方法を指定する
文字の間隔（字間）の調整場所を指定する
行の間隔を指定する
テキストの１行目の開始位置を指定する
改行方法を指定する
改行するときの禁則処理
自動改行を禁止する
テキストを入力したとおりに表示する
長い単語に改行を入れる
グリッドレイアウトを行う
グリッドへの文字の揃え方を指定する
利用するグリッドを指定する
グリッドレイアウトのスタイルをまとめて指定する
横書きテキストの記述方向を指定する
横書きテキストの記述方向を上書きする
縦書きで表示する
●STEP UP
日本語用の段落書式
アラビア語用の段落書式
Chapter 3 文字
●TUTORIAL @ Chapter 3
●リファレンス
表示フォントを指定する
文字のサイズを指定する
文字の太さを指定する
文字をイタリック体（斜体）で表示する
スモールキャピタルで表示する
文字設定のグループ化
文字の装飾を指定する
下線の表示位置を指定する
文字の色を指定する
欧文の大文字・小文字を指定する
文字の間隔を指定する
単語の間隔を指定する
ふりがなと文字の揃え方
ふりがなの表示位置
文字揃えを指定する
Chapter 4 イメージ
●TUTORIAL @ Chapter 4
●リファレンス
イメージとテキストの揃え方を指定する その１
イメージとテキストの揃え方を指定する その２
回りこみを指定する
回りこみを解除する
コンテンツをズームする
カーソルの形を指定する
●STEP UP
コンテンツにフィルタをかける
Chapter 5 背景
●TUTORIAL @ Chapter 5
●リファレンス
背景色を指定する
背景イメージを指定する
背景イメージを固定する
背景イメージの繰り返しを指定する
背景イメージの表示位置を指定する
背景設定のグループ化
●STEP UP
ページ背景の扱い方の違い
Chapter 6 ボーダー
●TUTORIAL @ Chapter 6
●リファレンス
ボーダーの種類を指定する
ボーダーの太さを指定する
ボーダーの色を指定する
ボーダー設定のグループ化
アウトラインを表示する
Chapter 7 余白
●TUTORIAL @ Chapter 7
●リファレンス
コンテンツ周りの余白（マージン）を指定する
コンテンツ内の余白（パディング）を指定する
●STEP UP
スタイルシートを使った余白のコントロール
Chapter 8 サイズ
●TUTORIAL @ Chapter 8
●リファレンス
コンテンツの横幅を指定する
コンテンツの高さを指定する
コンテンツが範囲内に収まらないときの表示方法
省略符号を表示する
●STEP UP
ブラウザによるサイズの違い
Chapter 9 位置と表示
●TUTORIAL @ Chapter 9
●リファレンス
配置方法を指定する
配置位置を指定する
重なりの順番を指定する
表示範囲を指定する
コンテンツの表示・非表示を指定する
要素の種類を指定する
コンテンツの自動挿入
Chapter 10 リストとフォーム
●TUTORIAL @ Chapter 10
●リファレンス
リストマークの種類を指定する
リストマークをイメージで表示する
リストマークの表示位置を指定する
リスト設定のグループ化
フォームの入力言語を指定する
Chapter 11 テーブル
●TUTORIAL @ Chapter 11
●リファレンス
空セルのボーダー表示を指定する
セルの間隔を指定する
ボーダーを分割・連結して表示する
テーブルのレイアウトを固定する
●STEP UP
テーブルのスタイル
Chapter 12 応用
●TUTORIAL @ Chapter 12
●リファレンス
印刷時の改ページを指定する
指定したスタイルを優先的に適用する
画面用と印刷用のスタイルシートを使い分ける
●STEP UP
複数の外部スタイルシートを使い分ける
Webページの色指定
Webセーフカラー
カラーネーム
INDEX（KEYWORD）
INDEX（SELECTOR & PROPERTY）
© E BISUCOM TECH LAB. All rights reserved.
