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

概 要

ホームページ、ブログ制作に欠かせない「CSS(Cascading Style Sheets)」をはじめての方にも読みやすくわかりやすいように具体的なサンプルを使って解説した辞典の第2版です。現状において、CSS2.1は事実上のWeb標準として多くのブラウザでサポートされていますが、次世代のWeb標準として審議されているHTML5およびCSS3のサポートも次々とはじまっています。本書では、主流であるCSS2.1をしっかりと解説した上で、最新のCSS3の解説にも大きく紙面を割きました。Internet Explorerをはじめとして、Google Chrome、FireFox、Opera、Mac環境のSafatriまでブラウザの対応情報も幅広くフォローしています。サンプルのダウンロードサービス付き。

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

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

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

サポート

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

サポート情報へのリンク

目次

Ⅰ CSSの基本

CSSとは?

CSSを使用するメリット

CSSの書き方

HTML文書にCSSを適用する

セレクタの種類

カスケードの概念

スタイルの優先順位

スタイルの継承

メディアタイプ

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

CSSでの長さの指定

CSSでのURL(URI)の指定

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

ボックス

CSSのバージョン

ブラウザの実装

DOCTYPEスイッチ(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-family

04 フォントの太さを指定する

font-weight

05 フォントをイタリック体・斜体にする

font-style

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

font-variant

04 テキスト -行・文章-

01 行の高さを指定する

line-height

02 行揃え位置を指定する

text-align

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

vertical-align

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

text-decoration

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

text-indent

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

text-transform

07 半角スペース・タブ・改行の表示を指定する

white-space

08 文字の間隔を指定する

letter-spacing

09 単語の間隔を指定する

word-spacing

10 文字表記の方向を指定する

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 border-right-width border-bottom-width border-left-width

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

border-top-color border-right-color border-bottom-color border-left-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

10 テーブル -表-

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

border-collapse

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

border-spacing

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

empty-cells

04 テーブル(表)の表示方法を指定する

table-layout

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

caption-side

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 scrollbar-face-color scrollbar-track-color scrollbar-arrow-color scrollbar-highlight- color scrollbar-shadow-color scrollbar-3dlight-color scrollbar-darkshadow-color

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

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

filter

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

BasicImage()

03 左右反転する

fliph()

04 上下反転する

flipv()

05 色(色相・明度・彩度)を反転する

invert()

06 X線効果(グレースケールにして反転)を適用する

xray()

07 透過表示にする

Alpha()

08 特定の色を透明にする

Chroma()

09 指定した色でマスクをかける

MaskFilter()

10 背後から光を当てたような効果を与える

Glow()

11 波状に歪めて表示する

Wave()

12 ぼかしのない影をつける

DropShadow()

13 ぼかしのある影をつける

Shadow()

14 方向を指定してぶれさせる

MotionBlur() / blur()

15 ぼかす

Blur()

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

Emboss()

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

Engrave()

18 モザイク表示にする

Pixelate()

19 二次元面を傾けたような表示にする

Matrix()

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

Gradient()

21 拡大・縮小表示する

zoom

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

01 下線の表示位置を指定する

text-underline-position

02 横書き・縦書きの表示方向を指定する

writing-mode

03 日本語・英数字の入力モードを指定する

ime-mode

04 グリッドに関する指定をまとめて行う

layout-grid

05 グリッドに文字を乗せるかどうかを指定する

layout-grid-mode

06 グリッドへの文字の乗せ方を指定する

layout-grid-type

07 行グリッドの高さを指定する

layout-grid-line

08 文字グリッドの幅を指定する

layout-grid-char

15 印刷

01 印刷時の改ページ位置を指定する

page-break-before page-break-after

02 印刷時の要素内での改ページを避ける

page-break-inside

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

orphans widows

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

page

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

size

Ⅲ CSS3で追加される(可能性のある)プロパティ CSS

01 背景とボーダー -Backgrounds and Bordersモジュール-

01 背景の適用範囲を指定する

background-clip

02 背景の基準位置を指定する

background-origin

03 背景画像のサイズを指定する

background-size

04 角丸を個別に指定する

border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius

05 角丸をまとめて指定する

border-radius

06 画像ボーダーを指定する

border-image

07 ボーダーに使用する画像ファイルを指定する

border-image-source

08 画像のボーダー使用範囲を指定する

border-image-slice

09 画像ボーダーの太さを指定する

border-image-width

10 ボーダーイメージエリアを広げる

border-image-outset

11 画像ボーダーの繰り返し方法を指定する

border-image-repeat

12 ボックスに影をつける

box-shadow

02 2D 3D 変形 -Transformsモジュール-

01 要素に2D変形、または、3D変形を適用する

transform

02 要素にマトリクス変形を適用する

matrix()

03 要素の表示位置を移動させる

translate(), translateX(), translateY()

04 要素を拡大・縮小表示する

scale(), scaleX(), scaleY()

05 要素を回転表示する

rotate(), rotateX(), rotateY(), rotateZ()

06 要素を傾斜変形させる

skewX(), skewY(), skew()

07 要素を動的に回転させる

rotate(), rotateX(), rotateY(), rotateZ(), transition

08 2D変形、または、3D変形の原点を指定する

transform-origin

03 時間的変化 -Transitionsモジュール-

01 transition効果(時間的変化)をまとめて指定する

transition

02 transition効果を適用するCSSプロパティ名を指定する

transition-property

03 変化に掛かる時間を指定する

transition-duration

04 変化のタイミング・進行割合を指定する

transition-timing-function

05 変化がいつ始まるかを指定する

transition-delay

04 アニメーション -Animationsモジュール-

01 アニメーションについてまとめて指定する

animation

02 アニメーション名を指定する

animation-name

03 アニメーション一回分の時間の長さを指定する

animation-duration

04 アニメーションのタイミング・進行割合を指定する

animation-timing-function

05 アニメーションの繰り返し回数を指定する

animation-iteration-count

06 アニメーションを交互に反転再生させるかどうかを指定する

animation-direction

07 再生中か一時停止かを指定する(削除検討中のプロパティ)

animation-play-state

08 アニメーションがいつ始まるかを指定する

animation-delay

05 透過色 -Colorモジュール-

01 透明度を指定する

opacity

02 RGBAカラーモデルで色を指定する

rgba()

06 グラデーション -Image Valuesモジュール-

01 線形グラデーションを指定する

linear-gradient()

02 円形グラデーションを指定する

radial-gradient()

07 テキスト -Textモジュール-

01 行の改行方法を指定する

word-break

02 単語の途中で改行するかどうかを指定する

word-wrap

03 テキストに影をつける

text-shadow

04 行端揃えの形式を選択する

text-justify

08 ルビ -Rubyモジュール-

01 ルビの揃え位置を指定する

ruby-align

09 インターフェース -Basic User Interfaceモジュール-

01 ボックスサイズの算出方法を指定する

box-sizing

02 ユーザーが要素のサイズを変更できるかどうかを指定する

resize

10 カラムレイアウト -Multi-column Layoutモジュール-

01 カラム幅とカラム数を指定する

columns

02 カラム幅を指定する

column-width

03 カラム数を指定する

column-count

04 カラムの間隔を指定する

column-gap

05 カラムの区切り線のスタイル・幅・色を指定する

column-rule

06 カラムの区切り線の色を指定する

column-rule-color

07 カラムの区切り線のスタイルを指定する

column-rule-style

08 カラムの区切り線の幅を指定する

column-rule-width

Ⅳ 補足 Reference

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

WEBセーフカラー216色

カラーネーム140色

システムカラー

2.特別な文字

3.画像

4.CSSプロパティ一覧表

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

PR

秀和システム