| CSS3 DocumentWorkspace Root | > |
CSS3 Information
CSSはHTML及びXHTML内の構造を指定するための技術であり、CSSの技術を使用することでホームページ、ブログ、wordpressなど様々な媒体を更にビジュアルデザインの表現を可能とします。その中でCSS3は現在策定中の新しい仕様となっており、新しくセレクタ組み合わせ、プロパティが追加されました。ただし現在策定中の段階であり、ブラウザによってサポートしている仕様は異なっています。
最新の情報は以下の「CSS current work and how to participate」よりご確認ください。
それではCSSの基礎より記述していきます。
Ｗ3Cで公開されているCSS
CSS(Cascading Style Sheets)はweb技術の標準化を推進している組織のW3Cによって策定されています。
現在普及しているCSS2.1は1998年5月に勧告されたCSS2を経て、その後2011年6月にCSS2.1が改訂版として勧告されました。
CSSの基本文法
1. 記述ルール
CSS基本文法はh1?h6,p,bodyなどの「セレクタ」と、「プロパティ」そして「プロパティの値」からなり、記述ルールは「セレクタ{プロパティ：値｝」となります。ある要素内(A)に含まれる特定の要素(B)に対して適用する場合は「 A B {プロパティ：値｝」のように記述します。
css:h1:{color:blue;}
2. id属性とclass属性
特定の要素を識別しなければならないときはid属性、class属性を使用します。例えばhtml内の記述h1="first"とタグづけした場合、スタイルシートの記述をh1.first{color:blue;}にすることでその段落内のフォントカラーをブルーに指定することができます。
id属性の場合も同様ですがそのページで一度しか使用しない場合はid属性を使用します。
１ページで１回しか使用しない場合にはid属性を複数回使用する場合にはclass属性を使用します。同時に使用する場合には優先順位はclass属性よりID属性が優先度が高くなります。
3. セレクタの種類と優先順位
セレクタの種類は大きく分類するとタイプセレクタ、IDセレクタ、クラスセレクタ、属性セレクタがあります。スタイルの指定が競合した場合には優先順位に応じて適用されます。
セレクタの種類につきましては詳細は以下の「Selectors Level3」のページよりご覧ください。
- IDセレクタ
- #id name
- クラスセレクタ
- .class name
- 属性セレクタ
- 要素名{属性名｝
- 要素名｛属性名＝”属性名”｝
- タイプセレクタ
- 例文 p{left:auto;}
Webブラウザ
ブラウザにはHTMLやCSSを認識して表示するためにレンダリングエンジンが搭載されており、IEはTrident(トライデント)、FirefoxはGecho(ゲッコー)、Safari・ChromeはWebkit(ウェブキット）、OperaはPresto（プレスト）が採用されてます。 CSS3ではブラウザごとに異なる接頭辞（ベンダープレフィックス）が用意されており、記載しなければならなくなっています。
「IE」は「-ms-」、Firefoxは「-moz-」、SafariとChoromeは「-webkit-」、Operaは「-o-」をプロパティの先頭に使用します。
クロスブラウザ
HTML5及びCSS3は実装されてまだ間もなく古いブラウザ環境では新要素やセレクタに対応されていない場合があります。その為古いブラウザ環境を最新のブラウザ環境に近づけさせ表示をさせる技術が必要です。その技術をクロスブラウザと呼んでいます。 古いブラウザを最新のブラウザの環境に対応させるクロスブラウザとしてはスクリプトコードもしくはライブラリをhtml内に埋め込むことでその環境に近づけて表示をさせることが可能です。 多くの方に最新のブラウザ環境でご覧になっていただくために次の2つのjavascriptライブラリをhtmlに埋め込んでおくと良いでしょう。
1.IE8以下のブラウザ環境でHTML5新要素を実装可能にするjavascriptライブラリ
HTML5の新要素をサポートしていないIE8以下をスクリプトで対応させる場合には次のJavascriptライブラリを<head>に埋め込みます。
- html5.js
- <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
2.IE8以下のブラウザ環境でCSS3セレクタが使用可能にするjavascriptライブラリ
IE8以下のブラウザ環境でCSS3のセレクタが使用可能にする為に、次のJavascriptライブラリがあります。 次のコードをhtmlの<head>に埋め込みます。
- IE9.js
- <!--[if lt IE 9]> <src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]-->
CSS3で追加されたセレクタ
CSS3では要素の属性や状態などで選択できる新しいセレクタなどが加わったことでより高度で詳細な設定を可能とするセレクタの組み合わせができます。
1. CSS3で追加した属性セレクタ
属性セレクタは要素の属性と値をもとに対象を選択し適用するセレクタです。以下例文です。
- a[href~="content"]｛スタイルの設定]
- 属性で指定した値が"content"の文字列で始まる場合に適用されます。
- a[href$="content"]｛スタイルの設定]
- 属性で指定した値がcontentの文字列で終わる場合に適用されます。
- a[href*="content"]｛スタイルの設定]
- 属性で指定した値にcontentの文字列が含まれる場合に適用されます。
2. CSS3で追加された疑似クラス
主な疑似クラス
疑似クラスは各要素の状態によって選択するセレクタです。各要素が特定の条件を満たした状態の時にスタイルを適用します。以下主な疑似クラスの記述します。
- [element]:root{スタイルの指定｝
- ルート要素に適用します
- [element]:nth-child(n)
- 同じ親要素を持つ兄弟の要素で前から一定間隔の要素に適用します。同じ親要素を持つ兄弟の要素で後ろから何番目もしくは奇数・偶数番目の要素に適用します。奇数番目の要素に適用する場合には[odd]、偶数番目に適用する場合には[even]を使用します。
- [element]:nth-last-child(n)
- 同じ親要素を持つ兄弟の要素で後ろから一定間隔の同一要素に適用します。
- [element]:nth-of-type(n)
- 同じ親要素を持つ兄弟の要素で前から一定間隔の同一要素に適用します。
- [element]:nth-last-of-type(n)
- 同じ親要素を持つ兄弟の要素で、後ろから一定間隔の同一要素に適用します。
- [element]:first-child(n)
- 同じ親要素を持つ兄弟の要素で、最初の要素に適用します。
- [element]:last-child(n)
- 同じ親要素を持つ兄弟の要素で最後の要素に適用します。
- [element]:first-of-type(n)
- 同じ親要素を持つ兄弟の要素で、最初の同一要素に適用します。
- [element]:last-of-type(n)
- 同じ親要素を持つ兄弟の要素で最後の同一要素に適用します。
- [element]:only-child
- 一つしかない子要素に適用します。
3. CSS3で追加されたターゲットの疑似クラス
ターゲット疑似クラス
リンクのターゲットに適用されます。以下の記述文ではリンクのターゲットにID属性を記述しておくことでクリックした時にスタイルがそのID属性に適用されます。
UI要素疑似クラス
- [element]:enabled{スタイルの指定}
- [element]:disabled{スタイルの指定}
- disabled属性がない要素（:enabled)、もしくはdisabled属性が指定されている要素(:disabled)に適用します。
- [element]:checked
- checked属性がある要素(checked状態のチェックボックスなど)に適用します。
否定疑似クラス
- [element]:not(s){スタイルの指定}
- 指定したセレクタと一致しない要素に適用します。
一般兄弟結合子
チルダ(~)を結合子にし同階層のすべての属性に適用します。以下の例ではTable属性以下のtrにスタイルが適用されます。
- table~tr{スタイルの指定}
CorporateSite