前回まではXHTMLの種類について一通り書きました。
今回と次回とでCSSの概論、基礎知識を学んでしまいましょう。
実践を始めてからも、後々に見直せるようにしっかり書いておきます。
　

モバイル端末向けのCSSの2つの仕様
　

• W3Cが発表した「CSS Mobile Profile」(草案)
• OMAが制定した「WCSS(Wireless CSS)」

　
CSS Mobile Profileとは
　

CSS Mobile ProfileはW3Cが発表した仕様でCSS2のサブセットです。
　
ではそのCSS2とは？

メディアタイプ依存のスタイルシートに対応しており，グラフィカルなブラウザ，音声出力，点字出力，印刷出力，携帯情報端末など，多様な出力を想定したスタイル設定が可能です。また，内容の配置，表のレイアウト，国際化に関する特徴，カウンタと自動番号振り，そのほかユーザインタフェイスに関するプロパティにも対応し，より柔軟で保守性が高い仕様になっています。

　
次に、CSS MPのセレクタの紹介をします。
CSSの書式をは次のようになっています。
　

セレクタ { プロパティ: 値; プロパティ: 値 }

　
セレクタとは、どの要素に対してスタイルを適用させるのかを指定する部分です。
セレクタでスタイルの適用対象を指定し、それに続く「{}〜「」」の中に適用させたいスタイルを記述します。
　

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を指定する部分です。
フォントの大きさを指定する「font-size」や、色を指定する「color」などがこれにあたります。
それに続けて、「:」(コロン)と値を記述することで、スタイルを設定します。
　

一番最後の「;」(「」)の直前の「;」)は省略することができますが、後からスタイルを追加したりするときなどに書き忘れる可能性があるので、普段から最後の「;」はつけておいたほうがいいと思います。
　

CSS Mobile Profileに対応するコピペできそうな、
セレクタとプロパティを集めてみました。
　

CSS Mobile Profileの対応するセレクタ#1
　

CSS Mobile Profileでは以下のセレクタに対応しています。

• 汎用セレクタ*
• 型セレクタE
• 子孫セレクタE F
• 子セレクタE > F

　
CSS Mobile Profileの対応するセレクタ#2
　

• リンク擬似クラスE:link
• リンク擬似クラスE:visited
• 動的擬似クラスE:active
• 動的擬似クラスE:focus
• クラスセレクタ.hogehoge
• IDセレクタ#hogehoge
• グループ化E1, E2, E3 {…}

　
CSS Mobile Profileの@規則
　

CSS Mobile Profileでは以下の@規則に対応しています

• @charset
• @import
• @media

　
CSS Mobile Profileの対応するプロパティ#1
　

CSS Mobile Profileでは以下のプロパティに対応しています

(…)内は、CSS2.1より変更のあったものです
*は、2.0にて対応したプロパティです

マージン関連

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

　
CSS Mobile Profileの対応するプロパティ#2
　

パディング関連

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding

　
CSS Mobile Profileの対応するプロパティ#3
　

ボーダー関連

• border-width
• border-color
• border-style (none|solid|dashed|dotted|inherit)
• border

　
CSS Mobile Profileの対応するプロパティ#4
　

アウトライン関連

• *outline-color
• *outline-style (none|solid|dashed|dotted|inherit)
• *outline ([]||[]|inherit)

　
CSS Mobile Profileの対応するプロパティ#5
　

表示関連

• visibility

ボックス関連

• display (inline|block|list-item|none|inherit)
• width (| |auto|inherit)
• *min-width / max-width
• height (| |auto|inherit)
• *min-height / max-height

　
CSS Mobile Profileの対応するプロパティ#6
　

絶対位置決め

• *position (relative|absolute|inherit)
• *top / right / bottom / left (| |auto|inherit)
• *z-index

浮動体

• float
• clear

　
CSS Mobile Profileの対応するプロパティ#7
　

リスト関連

• list-style-type (disc|circle|square|decimal|lower-roman|upper-roman|
  lower-alpha|upper-alpha|none|inherit)
• list-style-image
• list-style

　
CSS Mobile Profileの対応するプロパティ#8
　

バックグラウンド関連

• background-color
• background-image
• background-repeat
• background-attachment
• background-position (top|center|bottom|left|right|inherit)

　
CSS Mobile Profileの対応するプロパティ#9
　

テキスト関連

• color
• line-height
• text-align
• text-decoration
• text-indent
• text-transform
• vertical-align
• white-space

　
CSS Mobile Profileの対応するプロパティ#10
　

フォント関連

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

　
ざっと集っているものを書き出すとこれらになります。
　

実際に書いてみると、
　

※　続けて書く場合

H1 {font-size:20pt; font-family:"ＭＳ 明朝"; color:#999999; }

　
※　縦書きに書く場合

H1 {
  font-size:20pt;
  font-family: "ＭＳ 明朝";
  color:#999999;
}

　
※インラインで書く場合

<H1 style=" font-size:20pt; font-family: "ＭＳ 明朝"; color:#999999;">

　

のように書きます。
　

さらに、このＣＳＳが適用されるとこんな風に見えます。↓

CSS Mobile Profile

　

参考にして下さい。

携帯サイトを作る場合は、インラインで書くのが今後多くなります。
以前少し触れましたが、その理由はまた次回。
次回は、WCSSについて説明し携帯サイトのコーディング基礎知識についてまとめます。では。
　
　

参考サイト
　

CSSとはなんだろうか
http://msugai.fc2web.com/web/CSS/index.html
　

miniturbo.org「モバイルでのXHTMLとCSS」
http://miniturbo.org/lab/sample/presentation/mobile/