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

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

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

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

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

ご注文

シェアする

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

同じジャンルの商品

お知らせ

一覧