詳解CSSスタイルシート辞典

概 要

Webページの見栄えを制御するスタイルシートの使い方がよくわかる詳解辞典です。スタイルシート(CSS)を使うことで、HTMLから見栄えの制御に関する情報を分離し、情報の意味を正しく伝えることができます。CSSの基本的な記述方法から、セレクタ、プロパティ、書式、プロパティに指定する値の解説と使用例、プロパティごとの対応ブラウザもひとめでわかるよう掲載しています。また、ウェブ制作の進め方(企画・デザイン・コーディング・アクセシビリティへの配慮)、優良デザインサイト例、カラーサンプルなども付いており、ブログやホームページの総合的な参考書としても役立ちます。サンプルのダウンロードサービス付き。

著者 猿橋大
価格 本体1800円(税別)
ISBN 978-4-7980-1971-0
発売日 2008/5/24
判型 A5
色数 4色
ページ数 392
CD/DVD
対象読者 初級
シリーズ 詳解辞典
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Ⅰ スタイルシートの基本

1.スタイルシートが必要な理由

2.CSSを使用するメリット

3.Web標準(Web Standards)とは

4.CSSのバージョン

5.HTMLとXHTMLの基礎知識

6.CSSの書き方

7.CSSをHTML/XHTML文書に適用する

8.基本スタイルシートと代替スタイルシート

9.メディアタイプ

10.セレクタの種類

11.@ルール(@で始まる書式)

12.スタイルの優先順位

13.スタイルの継承

14.CSSでの長さの指定

15.ボックス

16.DOCTYPE宣言とブラウザの表示モード

Ⅱ CSSプロパティ CSS

01 CSSの適用

01 <link>要素で外部CSSファイルを呼び出す <link>要素

02 <style>要素内で文書単位にスタイル指定する <style>要素

03 style属性で局所的にスタイル指定する style属性

02 セレクタ・コメント

01 特定の要素にスタイルを適用する 要素型セレクタ

02 すべての要素にスタイルを適用する 全称セレクタ

03 特定のid名がつけられた要素にスタイルを適用する idセレクタ

04 特定のclass名がつけられた要素にスタイルを適用する classセレクタ

05 リンク部分にスタイルを適用する :link :visited :hover :active

06 フォーカスされた要素にスタイルを適用する :focus

07 特定の言語を指定された要素にスタイルを適用する :lang

08 最初に現れる子要素にスタイルを適用する :first-child

09 要素の最初の行にスタイルを適用する :first-line

10 要素の最初の文字にスタイルを適用する :first-letter

11 要素の直前・直後に内容を挿入する :before :after

12 特定の属性を持つ指定要素にスタイルを適用する 要素名[属性名]

13 特定の属性値を持つ指定要素にスタイルを適用する 要素名[属性名="属性値"]

14 属性値候補と一致した場合にスタイルを適用する 要素名[属性名~="属性値"]

15 複数のセレクタに同じスタイルを適用する セレクタ , セレクタ

16 子孫要素にスタイルを適用する セレクタ セレクタ

17 子要素にスタイルを適用する セレクタ > セレクタ

18 直後に隣接している要素にスタイルを適用する セレクタ + セレクタ

19 CSSソース中にコメントを入れる /* */

03 フォント -文字-

01 フォントに関する指定をまとめて行う font

02 フォントのサイズを指定する font-size

03 フォントの太さを指定する font-weight

04 フォントをイタリック体・斜体にする font-style

05 フォントの種類を指定する font-family

06 フォントをスモールキャップにする font-variant

07 フォントのサイズを調整する font-size-adjust

08 フォントの形状を幅広・幅狭にする font-stretch

04 テキスト -行・文章-

01 行の高さを指定する line-height

02 行揃え位置を指定する text-align

03 縦方向の揃え位置を指定する vertical-align

04 テキストの下線・上線・打ち消し線・点滅を指定する text-decoration

05 一行目のインデント幅を指定する text-indent

06 テキストの大文字・小文字の表示を指定する text-transform

07 テキストに影をつける text-shadow

08 半角スペース・タブ・改行の表示を指定する white-space

09 文字の間隔を指定する letter-spacing

10 単語の間隔を指定する word-spacing

11 文字表記の方向を指定する direction unicode-bidi

05 カラー・イメージ -文字色・背景-

01 文字色(前景色)を指定する color

02 背景に関する指定をまとめて行う background

03 背景色を指定する background-color

04 背景画像を指定する background-image

05 背景画像の繰り返し方法を指定する background-repeat

06 背景画像の表示位置を指定する background-position

07 背景画像のスクロール・固定を指定する background-attachment

06 サイズ・マージン -幅・高さ・余白-

01 幅・高さを指定する width height

02 最大・最小の幅・高さを指定する max-width max-height

min-width min-height

03 マージン(外側余白)を指定する margin

04 パディング(内側余白)を指定する padding

05 上下左右マージンをそれぞれ指定する margin-top margin-right

margin-bottom margin-left

06 上下左右パディングをそれぞれ指定する padding-top padding-right

padding-bottom padding-left

07 ボーダー -枠線-

01 ボーダーのスタイル・太さ・色を指定する border

02 ボーダーのスタイルを指定する border-style

03 ボーダーの太さを指定する border-width

04 ボーダーの色を指定する border-color

05 上下左右ボーダーをそれぞれ指定する border-top border-right

border-bottom border-left

06 上下左右ボーダーのスタイルをそれぞれ指定する border-top-style border-right-style

border-bottom-style border-left-style

07 上下左右ボーダーの太さをそれぞれ指定する border-top-width

08 上下左右ボーダーの色をそれぞれ指定する border-top-color

08 レイアウト -表示・配置-

01 ブロックレベル・インラインなどの表示形式を指定する display

02 左または右に寄せて配置する float

03 回り込みを解除する clear

04 ボックスの配置方法(基準位置)を指定する position

05 上下左右からの配置位置(距離)を指定する top bottom left right

06 はみ出た内容の表示方法を指定する overflow

07 ボックスの表示・非表示を指定する visibility

08 ボックスを切り抜き表示する clip

09 重なりの順序を指定する z-index

09 リスト -箇条書き-

01 リストマーカーに関する指定をまとめて行う list-style

02 リストマーカーの種類を指定する list-style-type

03 リストマーカーの画像を指定する list-style-image

04 リストマーカーの表示位置を指定する list-style-position

05 リストマーカーとリスト内容の間隔を指定する marker-offset

10 テーブル -表-

01 セルのボーダーの表示方法を指定する border-collapse

02 セルのボーダーの間隔を指定する border-spacing

03 空白セルのボーダーの表示・非表示を指定する empty-cells

04 テーブル(表)のキャプションの位置を指定する caption-side

05 テーブル(表)の表示方法を指定する table-layout

11 生成内容の挿入 -引用・連番-

01 生成された内容を挿入する content

02 引用符を設定・挿入する quotes

03 要素にカウンタ(連番)を振る counter-increment counter-reset

12 インターフェース -カーソル・アウトライン・スクロールバー-

01 カーソルの形状を指定する cursor

02 アウトラインのスタイル・太さ・色を指定する outline

03 アウトラインのスタイルを指定する outline-style

04 アウトラインの太さを指定する outline-width

05 アウトラインの色を指定する outline-color

06 スクロールバーの色を指定する scrollbar-base-color

13 視覚効果 -フィルタ・ズーム-

01 様々な視覚効果を与える filter

02 透過・回転・反転・グレースケールなどを指定する BasicImage()

03 透過表示にする Alpha()

04 特定の色を透明にする Chroma()

05 指定した色でマスクをかける MaskFilter()

06 背後から光を当てたような効果を与える Glow()

07 ぼかしのない影をつける DropShadow()

08 ぼかしのある影をつける Shadow()

09 ぼかす・ぶれさせる Blur()

10 方向を指定してぼかす・ぶれさせる MotionBlur()

11 波状に歪めて表示する Wave()

12 モザイク表示にする Pixelate()

13 エンボス(浮き彫り)表示にする Emboss()

14 エングレーブ(掘り込み)表示にする Engrave()

15 二次元面を傾けたような表示にする Matrix()

16 背景と内容の間にグラデーションの面を表示する Gradient()

17 拡大・縮小表示する zoom

14 IE独自テキスト -IE独自のテキスト体裁-

01 均等割付の形式を指定する text-justify

02 下線の表示位置を指定する text-underline-position

03 横書き・縦書きの表示方向を指定する writing-mode

04 日本語・英数字の入力モードを指定する ime-mode

05 単語途中での改行方法を指定する word-break

06 表示範囲に合わせて単語途中で改行させる word-wrap

07 禁則処理を厳密にするかどうかを指定する line-break

08 グリッドに関する指定をまとめて行う layout-grid

09 グリッドに文字を乗せるかどうかを指定する layout-grid-mode

10 グリッドへの文字の乗せ方を指定する layout-grid-type

11 行グリッドの高さを指定する layout-grid-line

12 文字グリッドの幅を指定する layout-grid-char

13 ルビの行揃え位置を指定する ruby-align

14 ルビの表示位置を指定する ruby-position

15 ルビのはみ出し方を指定する ruby-overhang

15 印刷

01 印刷時の改ページ位置を指定する page-break-before page-break-after

02 印刷時の要素内での改ページを極力避ける page-break-inside

03 印刷時の先頭・末尾の最低行数を指定する orphans widows

04 適用するページボックス名を指定する page

05 ページボックスのサイズと向きを指定する size

06 トンボを印刷するかどうかを指定する marks

16 音声

01 声の種類を指定する voice-family

02 音量(ボリューム)を指定する volume

03 声の高低を指定する pitch

04 声の高低の幅を指定する pitch-range

05 アクセントの強弱を指定する stress

06 声の豊かさを指定する richness

07 読み上げる速さを指定する speech-rate

08 音声の一時停止を指定する pause

pause-before

pause-after

09 合図音(サウンドアイコン)を指定する cue

cue-before

cue-after

10 背景音(BGMなど)を指定する play-during

11 読み上げ方法を指定する speak

12 句読点や記号を読み上げるかどうかを指定する speak-punctuation

13 数字の読み方を指定する speak-numeral

14 表見出しの読み上げ方法を指定する speak-header

15 音声が聞こえてくる水平角度(方向)を指定する azimuth

16 音声が聞こえてくる垂直角度(高さ)を指定する elevation

Ⅲ ウェブ制作の進め方 Web Creation

1.ウェブサイトの企画・立案

2.ウェブサイトの全体構成

3.各ページの画面デザイン

4.配色計画

5.XHTML+CSSによるウェブページ制作

6.HTMLファイルを作成する(文書の構造化)

7.CSSファイルを作成する

8.XHTML+CSSサンプルソースの詳細解説

9.古いブラウザへの対策

10.アクセシビリティ、および、SEOへの配慮

11.HTMLファイル・CSSファイルを検証する

12.優良デザインサイト

Ⅳ 付録 Reference

1.HTMLやCSSでの色指定について

WEBセーフカラー216色

カラーネーム140色

システムカラー

モノトーン256色

2.特別な文字

3.画像

4.CSSプロパティ一覧表

5.CSSスタイルシート ブラウザ対応表

PR

秀和システム