c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開發中です。

CSSマニュアル v0.1 - 20090126

井上幸亨郎 - utakata.c4se@gmail.com
c4seFDL 0.1

ソースコードは全て、Opera10.00 alphaに於いて試験されている。

CSSとは?

CSSとはCascading Style Seatの略である。
CSSXMLに対して使用され、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>
個別のHTMLタグのstyle属性に直接記述する

例えば或るinline-text-nodeにスタイルを設定する場合、

<span style="CSSルール">text</span>

余計かもしれないが、span要素は、恣意にinline-nodeを作成するHTML要素である。恣意にblock-nodeを作成するHTML属性は、divである。
だから、或る段落にスタイルを直接設定したいのなら、

<p style="CSSルール">
  段落
</p>

とすればよい。CSSのCascading機構を利用する為に、必要以上にこの直接記述を用いるべきではない。

優先順位

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 APIjQueryuupaa.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:"」";}

文字コード指定

CSSファイルの文字コードを指定して化けを防ぎたい場合、

@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>

名前空間への対応

XML名前空間を指定するには、

@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>

CSSリファレンス

CSSプロパティと値の便覧。
別途。