カスケードスタイルシート Webデザインガイドブック

スタイルシートと次世代HTMLによる論理的Webページデザインへ
編著者 エ・ビスコム・テック・ラボ
出版社 (株)毎日コミュニケーションズ
出版日 1998年5月25日
判型 B5変形 (182 x 234) / 288ページ
価格 3,800円
ISBN 4-8399-0030-2

はじめに - Foreword -

 20世紀末、私たちはWebページというメディアを得たわけですが、それはHTMLという言語によってもたらされたといってよいでしょう。

 しかし、いま、これまでのHTMLは大きな転機を迎えていると言ったら、どう思われますか?。言い方を代えれば、私たちがこれまで考えていたHTMLがHTMLではなくなるのだ、ということでもあるのですが…。

 とにかく、これからのWebページ作成において、私たちが確認しなくてはならない作業。それは、HTMLの大きな目的のひとつが「文書の論理構造の記述」であり、これを正しく理解すること。そして、スタイルシートを使いこなせること。この二点が必要不可欠な条件として浮上してきています。

 つまりスタイルシートを正しく使用するには、HTMLに対するこれまでの考え方の転換が必要であるともいえるのですが、このあたりの内容を網羅し、スタイルシートを使用した具体的なWebページデザイン技法を解説した書籍はこれまでありませんでした。

 ないものは作るという筆者達の常日頃からのスタンスで、ここに出来上がったのが本書ということになります。

 とりあえず「HTMLで仕事をしてきた、Webページをたくさん作ってきた、HTMLは、もう十分わかっている」という方も、できれば最初は、順番に読んでみてください。きっと役に立つことがあるのではないか。そして、長い間、手元において使える。そんなふうに思っています。

Webページがこれからも私たちのメディアであるために

△TOP

もくじ - Contents -

第1章 HTMLはもういらない
HTMLの役割
1.HTMLとは何か
2.HTMLの拡張
3.HTMLの限界
スタイルシート
1.スタイルシートとは何か
2.スタイルシートはなぜ普及しないか
HTMLはもういらない
1.HTML4.0とスタイルシート
2.DHTML
3.XML
4.多様なメディアへの対応
第2章 Logicalなページでザイン
論理的なデザインの問題
1.論理的なページデザインの手順
2.論理的なページデザインができない理由
論理構造を知る方法
1.論理構造不在の現状
2.コンテンツから論理構造はわからない
3.画面デザインから論理構造はわかる
適切なHTMLタグの選び方
1.見出しと段落ですべてをまかなう
2.論理構造を記述するHTML
3.視覚的な表示を記述するHTML
スタイルシートの選び方
1.最適なスタイルの指定方法
2.タグ名で指定するスタイル
3.CLASSとIDで指定するスタイル
第3章 スタイルシートの使い方リファレンス
スタイルシートの適用
1.スタイルの指定方法
2.LINKタイプ [<LINK>]
3.EMEBDタイプ [<STYLE>]
4.INLINEタイプ [TAG STYLE]
5.インポート [@import]
セレクタ
1.タグセレクタ [TAG]
2.タグのグループセレクタ [TAG, TAG, TAG]
3.入れ子タグセレクタ [TAG TAG]
4.CLASSセレクタ [.class]
5.IDセレクタ [#id]
6.リンク [A]
カスケード
1.スタイルシート作成者
2.スタイルシートの適用方法
3.セレクタの種類
4.記述順序
5.最優先指定 [!important]
色/単位/その他
1.色指定
2.単位
3.コメント
第4章 スタイルリファレンス
フォント
1.フォントの種類 [font-family]
2.フォントサイズ [font-size]
3.フォントの太さ [font-weight]
4.斜体 [font-style]
5.装飾 [text-decoration]
6.フォントの変形 [font-variant]
7.大文字表示 [text-transform]
8.字間 [letter-spacing]
9.フォントの色 [color]
10.フォントのグループ化 [font]
11.フォントデータの添付 [@font-face]
テキスト/段落
1.行送り [line-height]
2.行揃え [text-align]
3.インデント [text-indent]
4.スペースと改行 [white-space]
5.マージンのグループ化 [margin]
文字揃え/回り込み
1.垂直方向の文字揃え [vertical-align]
2.回り込み [float]
3.回り込みのクリア [clear]
リスト
1.マークの種類 [list-style-type]
2.マークのイメージ [list-style-image]
3.マークの表示位置 [list-style-position]
4.リストのグループ化 [list-style]
背景
1.背景色 [background-color]
2.背景イメージ [background-image]
3.背景イメージの繰り返し [background-repeat]
4.背景イメージの固定 [background-attachment]
5.背景イメージの表示位置 [background-position]
6.背景イメージのグループ化 [background]
ボックス
1.ボーダーの太さ [border-width]
2.ボーダーの色 [border-color]
3.ボーダーの形 [border-style]
4.ボーダーのグループ化 [border]
5.ボーダーとコンテンツの間隔 [padding]
6.ボックスの横幅 [width]
7.ボックスの縦幅 [height]
8.ボックスから溢れたコンテンツの処理 [overflow]
位置指定
1.位置指定の方法 [position]
2.左側のスペース [left]
3.上側のスペース [top]
4.前後の表示位置 [z-index]
5.表示範囲 [clip]
表示のコントロール
1.表示の有無 [visibility]
2.表示属性 [display]
3.カーソル [cursor]
ページコントロール
1.手前で改ページ [page-break-before]
2.後ろで改ページ[page-break-after]
フィルタ
1.アルファ [Alpha]
2.ブラー [Blur]
3.クロマ [Chroma]
4.ドロップシャドウ [DropShadow]
5.フリップH [FlipH]
6.フリップV [FlipV]
7.グロウ [Glow]
8.グレイ [Gray]
9.インバート [Invert]
10.マスク [Mask]
11.シャドウ [Shadow]
12.ウェーブ [Wave]
13.Xレイ [XRay]
第5章 DHTMLとスタイルシート
DHTML
Macromedia Dreamweaver
1.Dreamweaverの基本構造
2.スタイルシートを使う
3.表示位置のコントロール
4.DHTMLを使ったアニメーション
スタイル&プロパティ 一覧
色名一覧
システムカラー一覧
単位一覧
スタイル索引(ABC順)
索引
特別付録CD-ROMの使い方
△TOP