|
|
| 1行目: |
1行目: |
| − | {{WikipediaPage|ウィキペディアにおけるCSSの設定については、[[Help:外装の詳細設定]]をご覧ください。}}
| |
| − | {{infobox file format
| |
| − | | name = Cascading Style Sheets
| |
| − | | extension = .css
| |
| − | | icon = [[ファイル:Nuvola mimetypes source css.png|127px]]
| |
| − | | mime = text/css
| |
| − | | owner = [[World Wide Web Consortium]]
| |
| − | | creatorcode =
| |
| − | | genre = [[スタイルシート]]
| |
| − | | containerfor =
| |
| − | | containedby =
| |
| − | | extendedfrom =
| |
| − | | extendedto =
| |
| − | | standard = [http://www.w3.org/TR/CSS1/ CSS Level 1 (Recommendation)],<br />
| |
| − | [http://www.w3.org/TR/2008/REC-CSS2-20080411/ CSS Level 2 (Recommendation)],<br />
| |
| − | [http://www.w3.org/TR/CSS2/ CSS Level 2 Revision 1 (Recommendation)],<br />
| |
| − | [http://www.w3.org/TR/css3-selectors/ Selectors Level 3 (Recommendation)],<br />
| |
| − | [http://www.w3.org/TR/css3-color/ CSS Color Module Level 3 (Recommendation)],<br />
| |
| − | [http://www.w3.org/TR/css3-namespace/ CSS Namespaces Module Level 3 (Recommendation)],
| |
| − | }}
| |
| − | {{HTML}}
| |
| | | | |
| − | '''Cascading Style Sheets'''（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、[[HyperText Markup Language|HTML]] や [[Extensible Markup Language|XML]] の要素をどのように修飾（表示）するかを指示する、[[World Wide Web Consortium|W3C]]による仕様の一つ。文書の''構造''と''体裁''を[[関心の分離|分離]]させるという理念を実現する為に提唱された[[スタイルシート]]の、具体的な仕様の一つ。 | + | '''Cascading Style Sheets'''（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート） |
| | | | |
| − | CSSはHTMLで表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
| + | ウェブページなどのレイアウトやデザインに関する情報を記述したスタイルシートの一。フォント、文字の色や大きさ、行間など、文書の見栄えに関する情報のみを記述する。カスケーディングスタイルシート。カスケードスタイルシート。段階スタイルシート。 |
| | | | |
| − | * ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる。
| + | {{テンプレート:20180815sk}} |
| − | * [[ユーザーエージェント]]（多くの場合[[ウェブブラウザ]]）、[[ウェブサイト]]制作者、ユーザがそれぞれ定義したCSSのもたらす効果を重ね合わせる（カスケードする）ことができる。<ref group="注釈">ただし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザーエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし、実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。</ref>
| |
| − | | |
| − | CSSは、[[1994年]]に[[World Wide Web|WWW]]生誕の地である[[欧州原子核研究機構|CERN]]に勤務する[[ホーコン・ウィウム・リー]]氏により提唱された。
| |
| − | | |
| − | == 記述 ==
| |
| − | スタイルの情報は読み込む内容（作成者スタイルシート）やユーザーエージェントの設定（ユーザースタイルシート）の二ヶ所に記載できる。またユーザーエージェントも独自のスタイル（デフォルトスタイルシート）を持っている。
| |
| − | | |
| − | 作成者スタイルシートはマークアップ文書の中に直接記述するか、別文書として読み込ませる形で利用される。CSSの利便性を最大限発揮する為に、別文書として読み込ませる事が推奨されている。
| |
| − | | |
| − | === 記述方法 ===
| |
| − | ここではCSS Level 2について説明する。CSSの文法は異なるレベル間でも後方互換性を持つように設計されており、例えばCSS Level 1で書かれたスタイルシートを CSS Level 2として扱う事も可能である（但し一部に解釈の相違などに伴う非互換部分も存在する）。CSSでは要素にスタイルを与えるため、次のような仕様が定められている。
| |
| − | | |
| − | 以下のCSS断片を例にとる。
| |
| − | | |
| − | <source lang="css">
| |
| − | p#id { color : #ff3300 }
| |
| − | </source>
| |
| − | | |
| − | * "{" から "}" までの部分を'''宣言ブロック'''という
| |
| − | * "p#id" を'''セレクタ'''（選択子）といい、スタイルが適用される対象をしめす
| |
| − | * 宣言ブロックとセレクタを合わせて'''規則集合'''という
| |
| − | * "color : #ff3300" 部分を'''宣言'''という
| |
| − | * 宣言の内、":" より前（上例では "color"）を'''プロパティ'''（特性）という
| |
| − | * 宣言の内、":" より後（上例では "#ff3300"）を'''値'''という
| |
| − | | |
| − | 上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができる。
| |
| − | | |
| − | 上例は HTML 文書に適用する場合、「id という ID を持った p 要素の文字色を赤FF(=255)、緑33(=51)、青0にせよ」という指定を意味する。
| |
| − | | |
| − | <source lang="css">
| |
| − | color : #ff3300;
| |
| − | width : 35%
| |
| − | </source>
| |
| − | | |
| − | <source lang="css">
| |
| − | color : "#0033ff";
| |
| − | width : '53%'
| |
| − | </source>
| |
| − | | |
| − | このような宣言があったとき、後者二つは""や<nowiki>''</nowiki>を付したために不正である。なぜなら、""や<nowiki>''</nowiki>で囲ったものは文字列として扱われ、colorプロパティが取りうる色の値（#rrggbb、rgb([0-255],[0-255],[0-255])、または、blackやredなどのキーワードなど）ではないからである。
| |
| − | | |
| − | <source lang="css">
| |
| − | p#id { color: #ff3300 }
| |
| − | p#id { font-size: 24px }
| |
| − | </source>
| |
| − | | |
| − | は、
| |
| − | | |
| − | <source lang="css">
| |
| − | p#id { color: #ff3300; font-size: 24px }
| |
| − | </source>
| |
| − | | |
| − | と等価である。;は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に;をつけるのを強制するものではない。
| |
| − | | |
| − | セレクタは、実装レベルの高いブラウザならばどの属性であってもCSSを適用することが可能であり、この場合IDに関する属性セレクタであるので、#idは[id="id"]と等価である。セレクタの簡単なマッチングが可能である。
| |
| − | そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス(:link、:hover、:lang)などがある。
| |
| − | | |
| − | === 優先順位 ===
| |
| − | CSSは必ずしも一つのところで一意に指定できず、そのため指定内容の衝突を避けるために優先順位がユーザーエージェントによって計算される。その結果は、以下のような条件により算出される。
| |
| − | | |
| − | * 作成者スタイルシートはユーザースタイルシートより優先される
| |
| − | * デフォルトスタイルシートは他のスタイルシートを優先する
| |
| − | * 最重要指定されている宣言はユーザースタイルシートが作成者スタイルシートより優先される（CSS1では逆）
| |
| − | * 外部から読み込んだものは読み込んだ先とまとめて扱う
| |
| − | * 詳細度によって整理する
| |
| − | ** そのセレクタ内で指定先を一意に決められるもの（IDの類）が多い方を優先する
| |
| − | ** IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
| |
| − | ** それでも優先順位が決まらない場合は、要素の数が多い方を優先する
| |
| − | * これでもまだ優先順位が同一の場合、作成者スタイルシートにおいて以下の順で優先する
| |
| − | *# インラインのもの
| |
| − | *# 外部からのもの
| |
| − | * HTMLのalign属性など、CSS以外によるスタイルの指定は、それと等価なCSSによるスタイル指定が製作者スタイルシートの先頭にあるものとして扱う。ただし、これらの詳細度は最も低いものとする（CSS1においては要素名による指定を一つだけ含むセレクタと同じ詳細度）
| |
| − | | |
| − | 記載可能な方法の詳細は次の通りで、一般的に優先される順位で並び替えている（CSS2で最重要指定の優先順位の仕様が変更されている、勧告6章4）。
| |
| − | | |
| − | # ユーザスタイルシート中で最重要指定された宣言 - ユーザーエージェントの設定のスタイルの中で!importantを宣言に付加する
| |
| − | # 作成者スタイルシート中で最重要指定された宣言 - 作成者が内容に付随させたスタイル中で!importantを宣言に付加する。
| |
| − | # 作成者スタイルシート中の通常の宣言
| |
| − | # ユーザースタイルシート中の通常の宣言
| |
| − | # デフォルトスタイルシートの宣言
| |
| − | | |
| − | 作成者スタイルシートの記述方法による優先順位は以下の通り。
| |
| − | # 特定の要素にスタイルを記述する
| |
| − | # HTMLやXMLのヘッダ部にそのページ全体を対象にスタイルを定義する
| |
| − | # CSSのみを記述した外部ファイルを用意し、HTMLファイルのヘッダ部からリンクを張ってスタイルを参照させる
| |
| − | | |
| − | <!--
| |
| − | | |
| − | == 利点と問題点 ==
| |
| − | === 利点 ===
| |
| − | CSS を使う利点としては以下のものが挙げられる。なおCSSの仕様に直接関係しないものもある。
| |
| − | | |
| − | * (X)HTML文書構造とCSS表現を分ける事により指定した全てのページデザインの統一が容易になる
| |
| − | * 外部CSSを使うことで更新・編集作業が効率化され保守性も向上する
| |
| − | * 公共機関や自治体、これらに関連する民間企業などのサイトでは[[World Wide Web Consortium|W3C]]が策定した仕様や[[Web Accessibility Initiative |WAI]]が規格した情報バリアフリーに準拠してXHTML/CSSデザインの制作が多い。現にアメリカではリハビリテーション法により「連邦政府や関連する組織では、購入する全ての情報通信機器はアクセシビリティに対応したものにしなければならない」とされていることから構造と表現を分離する考え方はスタンダードになっている。これも踏まえ、アクセシビリティ対応も SEO対策も容易に行える
| |
| − | * 表現指定を省いた分ページの軽量化が可能で、表示にかかる時間を短縮できる。故に転送量の削減にもつながる
| |
| − | * Internet Explorerを除くユーザースタイルシートや読み上げ方法を設定できる視覚ブラウザとの親和性を向上
| |
| − | * 印刷用のCSSファイルを用意すれば、不要な部分を取り除いたりフォントサイズの調整など適切な印刷を行える
| |
| − | | |
| − | === 問題点 ===
| |
| − | 以下に問題点を列挙する。問題点のほとんどは、CSSの仕様の策定者側が、あらかじめWebデザインの趨勢について綿密な調査を行なった上で仕様を決めていないことに起因する。
| |
| − | | |
| − | * 古いユーザーエージェントでは未実装ないしバグつき実装が多い。
| |
| − | * 変数や定数の定義が出来ず、プロパティのパラメータに演算式や変数などを使用できないため、サイト全体の手軽なデザイン変更を難しくしていると同時に、作成したデザインパーツに可搬性を持たせることが困難になっている。
| |
| − | * 現行の仕様では複数のCSSファイルをインポートできるが、下位のブロック要素に外部ファイルをインポートして動的にパラメータを変更するようなことが出来ず、全てルートへのインポートしかできないため、CSSファイルに可搬性を持たせることが出来ない。
| |
| − | * 仕様そのものが基本的に論文(Paper)を手軽に表現できることを最優先に設計されているHTMLの特性に沿ったかたちで設計されているため、現在も流通しているレイアウト手法のすべてをカバーできるとは限らない。CSS3でマルチカラムの指定方法が策定されつつあるが、CSS内で本来は無視されるはずの改行コードを使用して記述する手法が採用されており、破綻をきたしている。
| |
| − | * HTML仕様にブロックレベルとインラインレベルという言葉がある。CSS仕様では、displayプロパティの計算値を元にしてこれと同じ言葉を使う旨がきちんと説明してある。しかし、きちんと説明したからと言って、同じ言葉を使うべきではなかった。案の定、多くの人が、HTML用語とCSS用語の違いを認識出来ていない。
| |
| − | * 市販の有名HTMLエディタは、tableによるレイアウトの方がはるかに操作しやすいUIになっているものが多い。
| |
| − | * ユーザーエージェントによっては、ボックス要素のmarginとpaddingの扱いが違う場合があるが、これの解決方法（DOCTYPEスイッチの厳密な指定など）がわかりにくい。仮にわかっても完全な解決策にはならない場合も多い。
| |
| − | * table 要素を用いたマルチカラムのページレイアウト手法に直接対応する CSS プロパティが存在しない。また、ボックス要素をfloatさせることで実現するマルチカラム手法は、本来その目的に作られていない機能を組み合わせて実現しているため、tableによる記述方法よりも格段に難易度が高い。ユーザーエージェントごとのmarginとpaddingの処理の違いがこの問題をさらに複雑化させている。
| |
| − | * Web業界もCSSデザインが主流となりつつあるが、上記の欠点をまるで存在しないかのように振る舞うCSS推進派と、上記の欠点に常に悩まされ続けているテーブルレイアウト保守派の間にはあきらかな温度差があり、現場のWebデザイン関係者との会話が成立しない場合が多々ある。
| |
| − | -->
| |
| − | | |
| − | == 脚注 ==
| |
| − | === 注釈 ===
| |
| − | {{Reflist|group="注釈"}}
| |
| − | | |
| − | === 出典 ===
| |
| − | <references />
| |
| − | | |
| − | == 関連項目 ==
| |
| − | * [[スタイルシート]]
| |
| − | ** [[Extensible Stylesheet Language|XSL]]
| |
| − | ** [[Document Style Semantics and Specification Language|DSSSL]]
| |
| − | * [[リキッドデザイン]]
| |
| − | * [[ホーコン・ウィウム・リー]]
| |
| − | | |
| − | == 外部リンク ==
| |
| − | * [http://www.w3.org/Style/CSS/ Cascading Style Sheets home page]
| |
| | | | |
| | {{DEFAULTSORT:CASCADINGSTYLESEETS}} | | {{DEFAULTSORT:CASCADINGSTYLESEETS}} |