CSS とはなんだろうか

last modified: 03rd/Aug./2004;

お知らせ

独自ドメイン 'nextindex.net' を取得しました。最新版は次の URI からどうぞ。

http://www.nextindex.net/

Preface

本稿は、 CSS に関する包括的な解説を提供する事を目的としています。より入門的なスピード・ラーニング も用意しましたので併せてご利用ください。

CSS2.1 が勧告候補になっています。これに先立ち、CSS2 のプロパティについて整理する観点で、リライト中です。クロスブラウザの観点では、MS I.E.6.0、Opera 7.x、Mozilla 1.7, Firefox 1.x をターゲットとしています。デフォルトで日本語が表示できない W3C の Amaya は除外しました。

Short Menu

Properties Index

Full Table of Contents

  1. CSS 基礎
    1. HTML とは
    2. CSS とは
    3. CSS 適用方法
    4. セレクタ
    5. 擬似セレクタ
    6. @import
    7. @media
      1. 区切り文字
      2. inherit: 継承
      3. 10 進数
        1. <number>
        2. <integer>
      4. <identifier>: 識別子
      5. <string>: 文字列
      6. <color>: 色
      7. <length>: 長さ
      8. <percentage>: パーセント値
      9. <uri>: URI = URL + URN
    8. ルールのまとめ
  2. CSS プロパティ
    1. ボックス・モデル
      1. マージン margin
      2. パッディング padding
      3. ボーダー border
        1. border-width
        2. border-style
        3. border-color
        4. border
    2. 視覚フォーマットモデル
      1. display
      2. position
      3. オフセット top, right, bottom, left
      4. 浮動化
        1. float
        2. clear
      5. z-index
      6. テキスト方向
        1. direction
        2. unicode-bidi
    3. 視覚フォーマットモデルの詳細
        1. width
        2. min-width
        3. max-width
      1. 高さ
        1. height
        2. min-height
        3. max-height
      2. line-height
      3. vertical-align
    4. 視覚効果
      1. overflow
      2. clip
      3. visibility
    5. リスト
      1. marker-offset
      2. list-style-type
      3. list-style-image
      4. list-style-position
      5. list-style
    6. 生成内容
      1. content
      2. quotes
      3. カウンタ
        1. counter-increment
        2. counter-reset
    7. ページメディア (@page)
      1. page-break-before
      2. page-break-after
      3. page-break-inside
      4. orphans
      5. widows
    8. 背景と色
      1. color
      2. background-color
      3. background-image
      4. background-repeat
      5. background-attachment
      6. background-position
      7. background
    9. フォント
      1. font-family
      2. font-style
      3. font-variant
      4. font-weight
      5. font-stretch
      6. font-size
      7. font-size-adjust
      8. font
    10. テキスト
      1. text-indent
      2. text-align
      3. text-decoration
      4. text-shadow
      5. letter-spacing
      6. word-spacing
      7. text-transform
      8. white-space
    11. テーブル
      1. caption-side
      2. table-layout
      3. border-collapse
      4. border-spacing
      5. empty-cells
      6. テーブルに関する特記事項
        1. border-style
        2. vertical-align
    12. ユーザインタフェース
      1. cursor
      2. outline
      3. outline-width
      4. outline-style
      5. outline-color
  3. 付録
    1. Full-Property Table
    2. カラムアップ

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) に向けた使い方のノウハウは、経験がないと得られません。

推奨図書

私が推奨する図書は、W3C の仕様に照らして正確/妥当であることは勿論、これらの使い方を説明してくれている書籍です。ここでは 2004/08 時点の次の書籍を推奨します:

ユニバーサルHTML/XHTMLユニバーサルHTML/XHTML
神崎 正英 (著) ; 出版社: 毎日コミュニケーションズ ; ISBN: 4839904545 ; (2000/11)
The Web Kanzaki の神崎さんの書籍。出版年は古いが、Web Page Authoring の技術は 1998 頃から停滞しているので、相対的に古びてはいない。内容は非常にまっとうで正確な記述に舌を巻く。W3C だけでなく、 ISO や RFC などの出典を明らかにしながら、ウェブ/インターネットのプロトコル/スクリプトまで解説。三部構成になっており、各々、(1) HTML の文書型の基礎、(2) HTML の利用方法の基礎、(3) ウェブサイトの設計/開発手法の基礎という構成になっている。 この本の初版当時は、XHTML 1.1 は勧告前だったにもかかわらず、極めて正確に言及している。
ウェブのインタフェースに携わる全ての人の座右にあることを切に願う。技術書は、思想によって駆動されるのであって、いたずらに新しいことが求められているわけではないことを教えてくれる。きわめて良書。持ってないと、もぐりかもしれない・・・
スタイルシートスタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術スタイルシートスタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術
エ・ビスコム・テック・ラボ (著) ; 毎日コミュニケーションズ ; ISBN: 4839915016 ; (2004/06)
タイトルはやけに長いが、スタイルシートの「使い方」を説明した好著。本書は、HTML 4 Strict を CSS の操作対象として、有用な Tips & Tricks を豊富に収録している。このような、どうやって使うか (Tips&Tricks) を前面に出した書籍は、多くの場合、W3C の仕様書に照らして、不正確で、非効率的な指南をしていることが殆どである中、本書のようにデザインを前面に出して正しく説明して、読者を正しい方向に導く書籍は非常に貴重。
何が正しいかと言う点に、反発を抱かれる方もいらっしゃるでありましょうが、W3C の仕様と、現実のブラウザ(ユーザ・インタフェース)の折り合いの付け方の中に、正しい方向は見えているはず。フルカラーの、紙面も、内容もきれいな図書。駆け出しの方には、座右に置くことを勧める。
詳解HTML&XHTML&CSS辞典詳解HTML&XHTML&CSS辞典
大藤 幹 (著) ; 秀和システム ; ISBN: 4798010030 ; (2005/01)
HTML 4.01, XHTML 1.0, XHTML 1.1 まで網羅している。2002/03版の改訂版。DTD の解説をしっかりしており、この本があれば、仕様については完璧だろう。詳細は W3C の原典を参照する必要があるとしても、実用ではこれだけで十分、お腹一杯のはず。優れた英和辞書とは、語源と用例が豊富なものを指すのであるとすれば、本書は辞書/辞典として間違いなく優れている。今後のバージョンアップに対する追随如何にもよるけれども、現時点では辞書/辞典として白眉。座右において間違いはない。
HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?
エクスナレッジ ; ISBN: 4767802504 ; (2002/12)
Amazon のレビューで評価が高いので買ってみた。この版の書籍にしては、驚くほど内容が正確。これが普通なのだと思うけれども、かつて、ひどい内容の書籍が巷間に流布していたことを思うと隔世の感がある。リファレンスの体裁をとっているため、各々の間の相互作用や、文脈依存の特性については弱いところもあるが、それは仕方がない。最初は、個々の機能について、着実な理解を得るように、一歩一歩進んでいくのが、王道であり、ほかに近道はない。
実際にウェブ・ページ (web page) を作り始めようという人にとって、極めて有力な味方になってくれることだろう。これからウェブ・ページを記述しようという人には、この本を薦める。
ホームページ・ビルダーVersion8ハンドブックホームページ・ビルダーVersion8ハンドブック
ユニゾン (著), 日本アイビーエム, 日本IBM ; ディーアート ; ISBN: 488648722X ; (2004/03)
メーカの書籍を勧めるのは、あまり本意ではないけれども、日本IBM が監修しているこの書籍は勧める。実際にウェブページを作成し始めれば、そのきっかけは内容であって、W3C 仕様ではないだろう。プロであれば開発効率を求め、素人であれば、よりシームレスな文書記述を求めるであろうから、エントリーレベルで選択するのは、Macromedia の Dream Weaver ではなく、日本IBM のホームページ・ビルダー(以下 HPB)だろう。オーサリングツールとしては、この S/W は出来が良い、というか、極めて標準的だ。これより、良いか、悪いかで、他の S/W を評価する軸にもなろう。v9 向けのものは、V9ハンドブックとして刊行されている。
因みに、HPBのどこでも配置モードは、CSS の 'position' を指定した、初心者向きとは言いがたいモード。HTML 文書の要素タイプのインスタンスをノード(節)として構築される木構造の、要素間の親子関係を把握していない場合は、とんでもないことになる可能性を孕んでいる。その点で、初心者にオーサリングツールとして HPB を勧める一方で、どこでも配置モードを使わないように推奨している。
この書籍は、オーバービューのガイドとして、機能志向ではなく操作志向で HPB の操作方法を解説。「こんなこと」がしたいときは、HPB の「こんな機能」で実現すべしというノウハウの、いわゆるオーバービュー/ガイドラインとして好著。
超図解HTMLとスタイルシートでつくるホームページ入門超図解HTMLとスタイルシートでつくるホームページ入門
エクスメディア ; ISBN: 4872834194 ; (2004/12)
定評のある超図解シリーズ。「とりわけ、初心者が理解しやすいように制作しました」と言うだけあり、初めての人、Blogをカスタマイズしたいと思い始めた人を対象としているので、非常に丁寧に初心者を導入している。ホームページの実体はテキスト形式のファイルで、HTMLはHyperText Markup Languageのことで、スタイルシート CSS は Cascading Style Sheets のことだというところから始めるのに好感がもてる。図解が豊富なWebサイト作成術や、HPB の標準モードで解説したわかりやすいホームページ入門 HPB v8編のように、こういう版形の書籍で、安心して勧められるものが巷間に流布し始めたのは、非常に喜ばしいことだ。本書は、好事家の座右に置いて長く使えるであろうから、初心者の方に安心して勧められる。本書で不足の部分があれば、必要に応じて、W3C の原典や解説サイトを参照していただけるだろう。
Copyright © 1998-2004 SUGAI, Manabu. All rights reserved.
1998-09-18 Published, 2004-08-03 Revised.
SEO [PR] !uO z[y[WJ Cu