井上幸亨郎 - utakata.c4se@gmail.com
c4seFDL 0.1
ソースコードは全て、Opera10.00 alphaに於いて試験されている。
CSSとは？
CSSとはCascading Style Seatの略である。
CSSはXMLに対して使用され、XMLの、インターフェイスへの出力の仕方を規定する「スタイル記述言語」の一つであり、XMLのスタイル記述言語として最も広く使われている。XMLのスタイル記述言語には他に、XSLT, XSL-FOがよく使われる。
CSSの規則の基本は、其の名の通りCascadingである。CSSは、規則の束であり、それぞれの規則は、オブジェクト（物）に対する記述の束、といった形をとる。
物 ← スタイル規則 物 ← スタイル規則 ： ：
この意味で、CSSは純粋なオブジェクト指向言語であり、それがCSSの簡便さの礎を成している。Cascadingとは、或る一つの物に複数のスタイルが規定されていた場合、その全てを優先度を基に混合し、一つのスタイルを生成する仕組みである。
ここで注意すべき事は、「物」も「スタイル規則」も、単体ではなく〈箇条の束〉となっている点である。CSSの原則は、「或る条件を持った物の束」に「スタイル規則の束」を適用する事だ。
物￣＼ ／￣スタイル規則 物――物の集合 ← スタイル規則の集合――スタイル規則 物＿／ ＼＿スタイル規則
HTMLにCSSを設定する方法
CSSの活動する最も華々しき場はXMLであるが、実用の最も盛んな場がHTMLによるWebページであることに異論は無いものと思われる。この後は、HTMLに適用する為のCSSに特化した内容を記述する。但し、XMLにも或る程度適用できる内容ではある。
XML, HTMLに就いては別途適宜な文書を参照せよ。
HTMLにCSSを設定するには、三通りの方法がある。
- 別のファイルにルールを纏め、HTMLファイル或いはCSSファイルから読み込む。
- HTML内のhaed要素の中の、style要素に纏める。
- 個別のHTMLタグのstyle属性に直接記述する。
別のファイルにルールを纏め、HTMLファイルから読み込む
HTMLからCSSファイルを読み込む為には、head要素内に以下を記述する。
<head> <link rel="stylesheet" href="CSSファイルアドレス" type="text/css"/> </head>
正確にはhead要素内である必要はないが、Webブラウザの実装に依存する危険性があるので、なるべくhead要素に書く事。
href属性にファイルアドレスを書く。
type属性は、MIME Typeを指定する。スタイル記述言語はCSSだけではないので、MIME Typeを記述するのが安全である。此れを省略する方法は、meta要素にてスタイルのMIME Typeを指定する事である。
<head> <meta http-equiv="Content-Style-Type" content="text/css"/> <link rel="stylesheet" href="CSSファイルアドレス"/> </head>
ヘッダ内の其処に、読込先のCSSルールが記述されているのと同等な効果をもたらす。
複数HTMLで同一のCSSスタイルを使う場合は、以上の方法を使用するとよい。Webサイトのデザインを統一する為などに用いる。
CSSファイルから読み込む
@import構文で、一つのCSSファイルから別のCSSファイルを読み込む事ができる。CSSファイル同士が読み込み合わないように注意する必要がある（無限ループに陥る）。
以下を、CSSファイルの（通常は）なるべく先頭に書く。
@import url(CSSファイルアドレス);
其処に、読込先のCSSルールが記述されているのと同等な効果をもたらす。
HTML内のhaed要素の中の、style要素に纏める
個別のHTMLファイルにCSSスタイルを記述・適用する場合、（普通は）head要素内に、以下の様に記す。
<head> <style type="text/css"> /* CSSルール */ </style> </head>
type属性は、meta記述によって省略しうる。勿論meta記述をstyle属性より以前に書く事。
ブラウザの実装によっては、style要素の中身を描画してしまう事が有り得る。それを防ぐ為に、明確にCADTAセクションだと宣言する事ができる。
<head> <style type="text/css"><![CDATA[ /* CSSルール */ ]]></style> </head>
或いは（実装依存になる為、個人的には推奨できないが）、HTMLコメントとして古いWebブラウザを騙すことも出来る。
<head> <style type="text/css"><!-- /* CSSルール */ --></style> </head>
優先順位
CSSのCascading優先順位は、「後の記述ほど優先される」である。
あるHTML要素には、次の順にスタイルが記述されているのと同じである。
Webブラウザ標準スタイル ↓ ユーザースタイル ↓ 外部ファイルスタイル ↓ 内部スタイル ↓ 直接スタイル ↓ !important指定スタイル
外部ファイルスタイル・内部（style属性）スタイル・直接スタイルを、合わせて「作成者スタイル」と呼ぶ。
但し、この優先順序は、記述順に依存して変更しうる点に注意せよ。
標準的なWebブラウザでは、「Webブラウザ標準スタイル」→「ユーザースタイル」→「作成者スタイル」の順に記述されている。よって、優先順位はこの逆順である。
だが例えば、
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- page.html --> <head> <meta http-equiv="Content-Style-Type" content="text/css"/> <link rel="stylesheet" herf="style.css"/> <style> span{ color:red; } </style> </head> <body> <span>text</span> </body> </html>
/* style.css */ @charset "utf-8"; @namespace url("http://www.w3.org/1999/xhtml"); span{ color:blue; }
とすれば、page.htmlには赤いtextが表示される。page.html内のCSSスタイルの方が優先されるからだ。しかしHTMLを、
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- page.html --> <head> <meta http-equiv="Content-Style-Type" content="text/css"/> <style> span{color:red;} </style> <link rel="stylesheet" herf="style.css"/> </head> <body> <span>text</span> </body> </html>
とすると、textは青く表示される。
外部ファイル読み込みとは、linkタグの位置に外部のCSSルールが記述されているのと同値である。つまり、外部読み込みを内部スタイルの後に書けば、外部スタイルが優先される。
要素に直接書くスタイルは、常に後に書かれるので、最も優先される。
!important修飾子によって、優先順位を逆転させることも可能である。!improtant指定スタイルは、常に最後に記述されたものとして扱われる、つまり最も優先される。!importantで修飾されたルール同士が衝突した場合は、そのスタイル同士の記述順になる。
例。
/* style.css */ @charset "utf-8"; @namespace url("http://www.w3.org/1999/xhtml"); span{ font:italic normal normal bold large/2em "ヒラギノ明朝 Pro W3",serif; }
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- page.html --> <head> <meta http-equiv="Content-Style-Type" content="text/css"/> <link rel="stylesheet" herf="style.css"/> <style> span{ font-family:monospace !important; } </style> </head> <body> <span style="font:normal small-caps xx-large/1.5em "ヒラギノ角ゴ Pro W3",sans-serif;">text</span> </body> </html>
上の様にCSSとHTMLを記述した場合。
記述順は、外部スタイル→内部スタイル→直接スタイルである。優先順はこの逆であるが、!importantにより、font-familyプロパティに関しては、内部スタイルは直接スタイルより優先される。
fontプロパティとは、
font:[font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
と指定する。但し
- [font-style], [font-variant], [font-weight]は、順序を交換可能。
- [font-style], [font-variant], [font-weight], [line-height]は省略可。
- [font-size], [font-family]は省略不可。
省略されたものにはデフォルト値が適用される。詰りfontプロパティの最少構成は、
font:[font-size]/[font-family];
となる。上記の例では、優先順序を考慮して、例中のspanに適用されるルールは、
<span style="font-style:normal; font-variant:small-caps; font-weight:bold; font-size:xx-large; line-height:1.5em; font-family:monospace;">text</span>
と等価である。
CSSに於ける対象の指定
要素に直接スタイルルールを記述する場合は、ルールの対象は当の要素ノードに他ならず、明確だ。
だが他の記述形態では、スタイルシートの作成者が指定してやる必要がある。故に、CSSのルールは以下の様に書かれる。
セレクタ{ プロパティ:値; プロパティ:値; } セレクタ{ プロパティ:値; プロパティ:値; }
CSSセレクタの書き方
CSSセレクタは様々な場面で使われる。CSSルールを記述するときのみならず、HTML5 DOMのSelectors API、jQueryやuupaa.js等の有名ライブラリで、XMLを操作する為に使われる。
詰り、CSSセレクタとは、XMLの要素ノードを快適に指定する技術の一つなのだ。効率的なXMLノードの指定技術として、他にXPathが有名である。
最も簡単なCSSセレクタは、
要素名
だ。例えば、任意のblockquoteタグにスタイルシートを適用したい場合、
blockquote{ /* プロパティ:値; */ }
と書く。
ここで、「/*」と「*/」とに挟まれた部分はコメントとして、処理時には無視される。/* */は、/* /* */ */の様にはネストできない。またCSSの構文では、コードの意味を変えない程度に、つまり適度に空白・改行の挿入が許されている。また「;」の省略も時には許される。各自試すべし。
複数のセレクタに同一のルールを適用したい場合、
セレクタ, セレクタ{プロパティ:値;}
と、「,」で並べるとよい。
以下に一覧を示す。
| セレクタ | 意味 | セレクタの例 | マッチする例 |
|---|---|---|---|
| element | 要素 | p | <p></p> |
| slector, selector | 又は | th, td | <th></th> |
| element element | 子孫要素 | p strong | <p><div><strong> </strong></div></p> |
| element > element | 子要素 | p > strong | <p><strong> </strong></p> |
| element + element | 次に隣接する要素 | blockquote + p | <blockquote> </blockquote> <p> </p> |
| element[attribute] | 属性名 | a[name] | <a name=""></a> |
| element[attribute="value"] | 属性＝属性値 | a[href="index.html"] | <a href="index.html"></a> |
| element.class | class属性が指定の値を持つelement | li.item | <li class="item"></li> |
| .class | class属性が指定の値を持つ任意の要素 | .item | <span class="item"></span> |
| element#id | id属性が指定の値を持つelement | ul#grid | <ul id="grid"></ul> |
| #id | id属性が指定の値を持つ任意の要素 | #grid | <div id="grid"></div> |
| a:link | :link擬似クラス。 | a:link | 略 |
| a:visited | :visited擬似クラス。 | a:visited | 略 |
| element:hover | :hover擬似クラス。 | img:hovor | 略 |
| element:active | :active擬似クラス。 | img:active | 略 |
| element:focus | :focus擬似クラス。 | textarea:focus | 略 |
| element:lang | :lang擬似クラス。 | p:lang | 略 |
| element:first-line | :first-line擬似要素。 | p:first-line | 略 |
| element:first-letter | :firsy-letter擬似要素。 | h1:first-letter | 略 |
| element:before | :before擬似要素。 | q:before{content:"「";} | 略 |
| element:after | :after擬似要素。 | q:after{content:"」";} | 略 |
文字コード指定
@charset "文字コード名"
とせよ。
念のため、HTMLに於ける文字コード指定は、以下の通り（metaタグ）。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta charset="UTF-8"/> <meta http-equiv="Content-Type" content="application/xhtml+xml"/> <title>title</title> </head> <body> <!-- HTML nodes --> </body> </html>
名前空間への対応
@namespace namespace名 url(namespaceアドレス);
namespace名が省略された場合、この指定はデフォルトの名前空間を指すようになる。
セレクタは、
namespace名|セレクタ{プロパティ:値;}
である。
メディア毎へのシートの切り替え
@media構文によって、メディア毎に適用スタイルを変更することができる。
例。
@media screen, print{ p{ font-wight:bold; } }
@mediaにて指定できるメディアには、all, aural, braille, embossed, handheld, print, projection, screen, tty, tvがある。
また、iPhoneなどに別個のスタイルファイルを読みこませたい時に、
<link media="only screen and (max-device-width:480px)" href="ipodtouch.css" type="text/css" rel="stylesheet"/> <link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet"/>
とする方法が何処にてか紹介されていた。
Webフォント
（此れは余り広くサポートされてはいないが、新しいWeb標準であり、Opera10では既に利用可能である。）
@font-faceを使う事によって、Webリソース上にあるTuruTypeフォントやSVGフォントを読み込んで利用可能である。
以下は二つとも、Opera SoftwareがPresto2.2 (Opera10)へのテストケースとして配布しているコードからの引用である。
@font-face { font-family: tuffy; src: url(ryanlerch_-_Tuffy_Bold.ttf) format("truetype"); } @font-face{ font-family: trace; src: url(zeimusu_-_Let_s_Trace_Basic.ttf) format("truetype"); } @font-face{ font-family: ubuntu; src: url(UbuntuTitleBold.svg#UbuntuTitleBold) format("svg"); } .ex1{ font: 40px tuffy; } .ex2{ font: 50px trace; } .ex3{ font: 50px ubuntu; } text{text-anchor:middle}
@font-face{ src: url(MINYN___.ttf) format("truetype"); font-family: "Minya Nouvelle"; font-style: normal; /* Larabie fonts license agreement: http://devfiles.myopera.com/articles/593/license.txt */ } @font-face{ src: url(Forgotte.ttf) format("truetype"); font-family: "Forgotten Futurist", serif; font-style: normal; } h1{font: 1.6em Helvetica; margin-top: 0.5em; padding: 0.2em; background-color: #eee; text-shadow: #aaa 1px 1px 5px; font-weight: bold; color: #111;} #para1{font: 1.4em "Minya Nouvelle";} #para3{font: 1.7em "Forgotten Futurist";} p:not([id=para3])::first-letter{font-size: 2.3em; float: left; padding: 0 0.1em 0 0; line-height: 1;}
またW3Cは以下のサンプルを掲載している。
@font-face{ font-family: 'Super Sans'; font-weight: normal; font-style: italic; src: url("myfont.svg#Font2") format(svg) }
但しOpera10.00 alphaにはバグがあり、履歴を辿って（進む・戻るボタンで）ページを表示した場合、SVGフォントが読み込まれない場合がある（読み込まれる場合もある）。これは再読み込みすれば修正される。
SVGフォントの作成や利用には、Web上の資料だけでなく、batikというJavaアプリケーションをApache XML projectが作成・配布している。またTureTypeについては、FreeTypeやFontFogeも様々な機能を提供してくれる。
以下はformat()で指定すべき文字列のリストである。（W3Cの仕様書から引用）
| String | Font Format | Examples of common extensions |
|---|---|---|
| "truedoc-pfr" | TrueDoc™ Portable Font Resource | .pfr |
| "embedded-opentype" | Embedded OpenType | .eot |
| "type-1" | PostScript™ Type 1 | .pfb, .pfa |
| "truetype" | TrueType | .ttf |
| "opentype" | OpenType, including TrueType Open | .ttf |
| "truetype-gx" | TrueType with GX extensions | |
| "speedo" | Speedo | |
| "intellifont" | Intellifont |
.otf系のOpenTypeの読み込みは、少なくとも現在はサポートされていない（Opera10.00 alphaでも）。つまり.otfを表示するにはOSにインストールするしかないということである。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="UTF-8"/> <meta http-equiv="Content-Type" content="application/xhtml+xml"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <style> @font-face{ font-family:yuraru; src:url("Euralian Font 01'.TTF") format("truetype"); } @font-face{ font-family:hiragino; src:url("ヒラギノ丸ゴ Pro W4.otf") format("opentype"); } body{font-family:serif;} .yuraru{font-family:yuraru;} .hiragino{font-family:hiragino,"ヒラギノ丸ゴ Pro W4";} </style> <title>Font test</title> </head> <body> <div> <span>normal Font</span> </div> <div class="yuraru"> <span>Yuraru font - Euralian Font 01'</span> </div> <div class="hiragino"> <span>Hiragino Font - ヒラギノ丸ゴ Pro W4</span> </div> </body> </html>
