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

詳解CSSスタイルシート辞典
著者 猿橋大
ジャンル IT系書籍 > インターネット一般
書店発売日 2008/05/24
ISBN 9784798019710
判型・ページ数 A5・392ページ
定価 1980円
(本体1800円+税10%)
在庫 品切れ・重版未定

この本に関するお問い合わせ・感想

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

【サポートはこちら】https://www.shuwasystem.co.jp/support/7980html/1971.html
? スタイルシートの基本
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スタイルシート ブラウザ対応表

ご注文

シェアする

このエントリーをはてなブックマークに追加

同じジャンルの商品

お知らせ

一覧