CSS とはなんだろうか
last modified: 04th/Apr./2004;
Preface
本稿は、 CSS に関する包括的な解説を提供する事を目的としています。より入門的なスピード・ラーニング も用意しましたので併せてご利用ください。
CSS2.1が、2007/06/19にCandidate Recommendationになっています（2006/12/06にワーキングドラフトのLast Call）。リリースに先立ち、CSS2 のプロパティについて整理する観点でリライト中です。クロスブラウザの観点では、MS I.E.8.x、Opera 9.x、Firefox 3.x をターゲットとしています。デフォルトで日本語が表示できない W3C の Amaya は除外しました。（Safari3.1はWindows版での確認なので、参考情報として記載しています。）
Short Menu
Properties Index
- '
azimuth'
- '
background'
- '
background-attachment'
- '
background-color'
- '
background-image'
- '
background-position'
- '
background-repeat'
- '
border'
- '
border-collapse'
- '
border-color'
- '
border-spacing'
- '
border-style'
- '
border-top', 'border-right', 'border-bottom', 'border-left'
- '
border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
- '
border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
- '
border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
- '
border-width'
- '
bottom'
- '
caption-side'
- '
clear'
- '
clip'
- '
color'
- '
content'
- '
counter-increment'
- '
counter-reset'
- '
cue'
- '
cue-after'
- '
cue-before'
- '
cursor'
- '
direction'
- '
display'
- '
elevation'
- '
empty-cells'
- '
float'
- '
font'
- '
font-family'
- '
font-size'
- '
font-style'
- '
font-variant'
- '
font-weight'
- '
height'
- '
left'
- '
letter-spacing'
- '
line-height'
- '
list-style'
- '
list-style-image'
- '
list-style-position'
- '
list-style-type'
- '
margin'
- '
margin-right', 'margin-left'
- '
margin-top', 'margin-bottom'
- '
max-height'
- '
max-width'
- '
min-height'
- '
min-width'
- '
orphans'
- '
outline'
- '
outline-color'
- '
outline-style'
- '
outline-width'
- '
overflow'
- '
padding'
- '
padding-top', 'padding-right', 'padding-bottom', 'padding-left'
- '
page-break-after'
- '
page-break-before'
- '
page-break-inside'
- '
pause'
- '
pause-after'
- '
pause-before'
- '
pitch'
- '
pitch-range'
- '
play-during'
- '
position'
- '
quotes'
- '
richness'
- '
right'
- '
speak'
- '
speak-header'
- '
speak-numeral'
- '
speak-punctuation'
- '
speech-rate'
- '
stress'
- '
table-layout'
- '
text-align'
- '
text-decoration'
- '
text-indent'
- '
text-transform'
- '
top'
- '
unicode-bidi'
- '
vertical-align'
- '
visibility'
- '
voice-family'
- '
volume'
- '
white-space'
- '
widows'
- '
width'
- '
word-spacing'
- '
z-index'
Full Table of Contents
- CSS 基礎
- HTML とは
- CSS とは
- CSS 適用方法
- セレクタ
- 擬似セレクタ
@import@media- 値
- 区切り文字
inherit: 継承10 進数
<number><integer>
<identifier>: 識別子<string>: 文字列<color>: 色<length>: 長さ<percentage>: パーセント値<uri>: URI = URL + URN
- ルールのまとめ
- CSS プロパティ
- ボックス・モデル
- マージン
margin
- パッディング
padding
- ボーダー
border
border-widthborder-styleborder-colorborder
- 視覚フォーマットモデル
displayposition- オフセット
top, right, bottom, left
- 浮動化
floatclear
z-index- テキスト方向
directionunicode-bidi
- 視覚フォーマットモデルの詳細
- 幅
widthmin-widthmax-width
- 高さ
heightmin-heightmax-height
line-heightvertical-align
- 視覚効果
overflowclipvisibility
- リスト
marker-offsetlist-style-typelist-style-imagelist-style-positionlist-style
- 生成内容
contentquotes- カウンタ
counter-incrementcounter-reset
- ページメディア (
@page)
page-break-beforepage-break-afterpage-break-insideorphanswidows
- 背景と色
colorbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground
- フォント
font-familyfont-stylefont-variantfont-weightfont-stretchfont-sizefont-size-adjustfont
- テキスト
text-indenttext-aligntext-decorationtext-shadowletter-spacingword-spacingtext-transformwhite-space
- テーブル
caption-sidetable-layoutborder-collapseborder-spacingempty-cells- テーブルに関する特記事項
border-stylevertical-align
- ユーザインタフェース
cursoroutlineoutline-widthoutline-styleoutline-color
- 付録
- Full-Property Table
- カラムアップ
Other Contents
当サイトに用意されている、他のコンテンツには次のようなものがあります。
- HTML スピード入門
- XHTML 1.0 を初心者向けに解説。
- CSS スピード入門
- CSS2 を初心者向けに解説。
- HTML 4 解説
- HTML 4 を W3C の DTD に則して解説。
- XHTML 1.0 解説
- HTML 4 文書と XHTML 1.0 文書の違いを解説。
- XHTML 1.1 解説
- XHTML 1.1 を解説。
- W3C 勧告邦訳
- W3C 勧告の日本語への翻訳。
- その他
- 検索エンジン、色表、フォント表、文字実体参照表など。
- Java
- Java プログラミングについて解説
Copyright
CSS1/2/2.1/3 は W3C が策定／勧告している仕様です。この仕様は、他の技術文書と同様に、W3C が著作権を保持しています。
本文書は、W3C の原規定から、重要と思われるところを抜き出し、説明を分かりやすくアレンジした二次派生物です。少なくともその積りではあるのですが、私の誤解や無知から誤った記述が含まれているはずです。正確な内容は、原規定を参照してください。本稿中の誤謬のご指摘は、私までご連絡ください。
当文書の著作権は放棄されていません。当文書の取得／使用／複写は、原製作者が SUGAI, Manabu. であることに混乱を招かない方法に限り、自由に行って構いません。可能であれば、事前／事後に SUGAI, Manabu. までご一報くださると、 SUGAI, Manabu. が喜びます。
Amazon トップセラー
私がこれらの図書を推奨するわけではありません。一昔前に比べれば、大分良くなりましたが、悪い本も中にはあります。
CSS や HTML, XHTML について勉強するには、W3C の仕様書を読めば十分です。主だった仕様については日本語訳も存在しており、必要十分に説明されているので、あとは要件定義でサポートが決定したブラウザごとのレンダリングとにらめっこして、細部を修正して行けば良いというのも事実です。これに対して、アクセシビリティの向上（ユニバーサル・デザイン）やサーチエンジン最適化 (SEO) に向けた使い方のノウハウは、経験がないと得られません。
MS IE8, Firefox 3, Opera 9.5で、Acid2 Test はみんなクリアしています。標準に準拠したレンダリングをするようになっているので、今後数年間は、レガシーなブラウザとの互換性の維持のために苦労するかもしれませんが、W3C勧告に準拠したサイト作成が重要になると思います。懸念点としては、XHTML 2, HTML 5の乖離が集約されるかどうかが気になります。
推奨図書
私が推奨する図書は、W3C の仕様に照らして正確／妥当であることは勿論、これらの使い方を説明してくれている書籍です。ここでは 2004/08 時点の次の書籍を推奨します：
- ユニバーサルHTML/XHTML
神崎 正英
毎日コミュニケーションズ
売り上げランキング: 144255
- The Web Kanzaki の神崎さんの書籍。出版年は古いが、Web Page Authoring の技術は 1998 頃から停滞しているので、相対的に古びてはいない。内容は非常にまっとうで正確な記述に舌を巻く。W3C だけでなく、 ISO や RFC などの出典を明らかにしながら、ウェブ／インターネットのプロトコル／スクリプトまで解説。三部構成になっており、各々、(1) HTML の文書型の基礎、(2) HTML の利用方法の基礎、(3) ウェブサイトの設計／開発手法の基礎という構成になっている。 この本の初版当時は、XHTML 1.1 は勧告前だったにもかかわらず、極めて正確に言及している。
- ウェブのインタフェースに携わる全ての人の座右にあることを切に願う。技術書は、思想によって駆動されるのであって、いたずらに新しいことが求められているわけではないことを教えてくれる。きわめて良書。持ってないと、もぐりかもしれない・・・
- スタイルシートに特化した『セオリー・オブ・スタイルシート (Quick Master of Web Technique)』（ISBN-13: 978-4774127835、発売日： 2006/5/19）も。
スタイルシートスタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術- エ・ビスコム・テック・ラボ (著) ; 毎日コミュニケーションズ ; ISBN: 4839915016 ; (2004/06)
- タイトルはやけに長いが、スタイルシートの「使い方」を説明した好著。本書は、HTML 4 Strict を CSS の操作対象として、有用な Tips & Tricks を豊富に収録している。このような、どうやって使うか (Tips&Tricks) を前面に出した書籍は、多くの場合、W3C の仕様書に照らして、不正確で、非効率的な指南をしていることが殆どである中、本書のようにデザインを前面に出して正しく説明して、読者を正しい方向に導く書籍は非常に貴重。
- 何が正しいかと言う点に、反発を抱かれる方もいらっしゃるでありましょうが、W3C の仕様と、現実のブラウザ（ユーザ・インタフェース）の折り合いの付け方の中に、正しい方向は見えているはず。フルカラーの、紙面も、内容もきれいな図書。駆け出しの方には、座右に置くことを勧める。
- 詳解HTML&XHTML&CSS辞典 第3版
大藤 幹
秀和システム
売り上げランキング: 10297
- ZSPCの大藤さんの本。HTML 4.01, XHTML 1.0, XHTML 1.1 まで網羅している。2002/03版から改定を続けている第三版。DTD の解説をしっかりしており、この本があれば、仕様については完璧だろう。詳細は W3C の原典を参照する必要があるとしても、実用ではこれだけで十分、お腹一杯のはず。優れた英和辞書とは、語源と用例が豊富なものを指すのであるとすれば、本書は辞書／辞典として間違いなく優れている。継続的にバージョンアップしており、辞書／辞典として買うならこれ。
- ガイド形式の『Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS)』（ISBN-13: 978-4839924355、発売日： 2007/9/20）も。
HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?- エクスナレッジ ; ISBN: 4767802504 ; (2002/12)
- Amazon のレビューで評価が高いので買ってみた。この版の書籍にしては、驚くほど内容が正確。これが普通なのだと思うけれども、かつて、ひどい内容の書籍が巷間に流布していたことを思うと隔世の感がある。リファレンスの体裁をとっているため、各々の間の相互作用や、文脈依存の特性については弱いところもあるが、それは仕方がない。最初は、個々の機能について、着実な理解を得るように、一歩一歩進んでいくのが、王道であり、ほかに近道はない。
- 実際にウェブ・ページ (web page) を作り始めようという人にとって、極めて有力な味方になってくれることだろう。これからウェブ・ページを記述しようという人には、この本を薦める。
- ホームページ・ビルダー12 スパテク160 Version12/11/10/9/8/7対応
-
西 真由 (著) ; 出版社: 翔泳社 (2007/12/20); ISBN-13: 978-4798116280; 発売日： 2007/12/20
- 実際にウェブページを作成し始めれば、そのきっかけは内容であって、W3C 仕様ではないだろう。プロであれば開発効率を求め、素人であれば、よりシームレスな文書記述を求めるであろうから、エントリーレベルで選択するのは、Macromedia/Adobe の Fireworks/Dreamweaverではなく、日本IBM のホームページ・ビルダー（以下 HPB）だろう。オーサリングツールとしては、この S/W は出来が良い、というか、極めて標準的だ。これより、良いか、悪いかで、他の S/W を評価する軸にもなろう。
- 因みに、HPBのどこでも配置モードは、CSS の '
position' を指定した、初心者向きとは言いがたいモード。HTML 文書の要素タイプのインスタンスをノード（節）として構築される木構造の、要素間の親子関係を把握していない場合は、とんでもないことになる可能性を孕んでいる。その点で、初心者にオーサリングツールとしてHPBを勧める一方で、どこでも配置モードを使わないように推奨している。
超図解HTMLとスタイルシートでつくるホームページ入門- エクスメディア ; ISBN: 4872834194 ; (2004/12)
- 定評のある超図解シリーズ。「とりわけ、初心者が理解しやすいように制作しました」と言うだけあり、初めての人、Blogをカスタマイズしたいと思い始めた人を対象としているので、非常に丁寧に初心者を導入している。ホームページの実体はテキスト形式のファイルで、HTMLはHyperText Markup Languageのことで、スタイルシート CSS は Cascading Style Sheets のことだというところから始めるのに好感がもてる。図解が豊富なWebサイト作成術や、HPB の標準モードで解説したわかりやすいホームページ入門 HPB v8編のように、こういう版形の書籍で、安心して勧められるものが巷間に流布し始めたのは、非常に喜ばしいことだ。本書は、好事家の座右に置いて長く使えるであろうから、初心者の方に安心して勧められる。本書で不足の部分があれば、必要に応じて、W3C の原典や解説サイトを参照していただけるだろう。
ブラウザ小史
別のページに移動しました。
