スタイルシートの記述方法
”セレクタとプロパティがあり、それに値を記述する”と覚えよう
- 基本的な構文を理解する
- セレクタのプロパティに値を入れる （”セレ・プロ・値”）
- 複数のセレクタやスタイルの設定にはセミコロンとカンマを使います
- コメントの書き方を理解しよう
- @ 規則を理解する
- @charset 規則
- @import 規則
- @media 規則
基本的な構文を理解する
セレクタのプロパティに値を入れる （”セレ・プロ・値”）
スタイルシートの最も基本的な書き方は、以下の通りです。
- CSSソース：
- セレクタ {プロパティ ：値 ；}
このように、「何に」 （セレクタ）、「何を」 （プロパティ）、「どのように」 （値） 適用するかを宣言していきます。
セレクタはスタイルを宣言したい対象 （範囲） を記述します。要素名の他に ID 名やクラス名などが使用できます。セレクタの種類については次ページの 「セレクタの種類」 で説明します。
プロパティには、スタイルの種類を指定します。たとえば、文字色を表す 「color」 やフォントサイズを表す 「font-size」 などです。
値には、プロパティで指定されたスタイルの具体的な効果の度合いを 「5px」 「180%」 などの数値や 「top」 「left」 「red」 などのキーワードによって指定します。
プロパティと値は 「: （コロン）」 で区切って記述します。値の後の 「; （セミコロン）」 はそのプロパティへのスタイル記述の区切りとなります。「; （セミコロン）」 は複数のスタイルを宣言する場合に必要な区切りとなるものですが、１つのスタイルの場合でも最後に「; （セミコロン）」 を記述するように習慣づけをするとよいでしょう。
一つ以上のスタイルの宣言のまとまりを 「宣言ブロック」 と呼び、宣言ブロックは "{" と "}" で囲みます。セレクタと宣言ブロック開始記号 "{" との間は半角スペースを空けます。
プロパティ一覧
よくつかわれるプロパティの一覧はプロパティ一覧のページを参照ください。。
複数のセレクタやスタイルの設定にはセミコロンとカンマを使います
複数のスタイルを宣言する場合には、「プロパティ」＋「値」 のセットをセミコロン「;」 で区切って、以下のように記述します。
- CSSソース：
- セレクタ {
- プロパティ１ ：値１ ；
- プロパティ２ ：値２ ； ・・・・
- }
また、複数のセレクタに同じスタイルを適用する場合には、セレクタを半角カンマ 「,」 で区切って以下のように記述します。
- CSSソース：
- セレクタ１, セレクタ２, ・・ {プロパティ ：値 ；}
このようにひとまとめで指定するセレクタのことをセレクタのグループ化あるいはグループセレクタと呼びます。
ショートハンド
CSSでは、ある目的に関連するプロパティをグループ化して一括指定する記述方法もあり、これはショートハンドプロパティと呼ばれる。
コメントの書き方を理解しよう
CSSにおけるコメントは、"/*" ではじまり、"*/" で終わります。この間に記述されたものは、全てコメントとして扱われ、レンダリングに影響は与えない。コメントはどこにでも記述できるが、コメントの入れ子はできません。
- CSSソース：
- /* コメントを記述 */
- /* コメントを記述する際に、
- 改行や空白などが入ってもいい
- ---------------------------- */
@ 規則を理解する
CSS には、特別な機能をもつ @ 規則というものがあります。頻繁に使用される規則について記述します。
@charset 規則
外部スタイルシートにおいて使用している文字コードを宣言する必要があります。その宣言の方法のひとつが @charset を使用して文字コードを指定する方法です。外部スタイルシートファイル内に記述します。
@charset を使用する場合は、全ての記述 （空白文字も含む） に先行して、スタイルシートの先頭に次のように記述する必要があります。例えば、font-family の指定で、"MS Pゴシック" のような日本語フォントを宣言することがありますが、その場合はスタイルシートの先頭に、@charset "Shift JIS" あるいは次のような記述をする必要があります。
- CSSソース：
- @charset "UTF-8";
文字コードの指定がない場合、外部スタイルシートは読み込み先の (X)HTML 文書 (あるいは、@import 規則によって読み込まれた先の親スタイルシート) と同じ文字コードとして処理されます。
CSS エディターを使って外部スタイルシートを保存する時に、文字コードの指定がない場合に、「文字コードの修正」 ダイアログが表示され、現在使用している文字コードで保存し、@charset 指定を追加することができます。
文字コードを指定する上での注意点
(X)HTML 文書で指定された文字コードと同じ文字コードを @charset でも指定しましょう。違った文字コードの場合、スタイルシート側が文字化けを起こすのを経験しております。
例えば、font-family : ”MS Pゴシック”,sans-serif ; と入力されたフォントスタイルが font-family : "○×△□", sans-serif ; のように意味不明の文字に化けてしまいました。文字スタイルも希望したスタイルでは表示されなくなります。結果的にスタイルシート側の @charset の文字コードを XHTML 文書と同じコードに指定し直すことで、同じ問題は発生しなくなりました。
@import 規則
他の外部スタイルシートを読み込むときに使用します。読み込みたいスタイルシートの URI を次のように記述します。
- CSSソース：
- @import url(style.css) screen, projection, tv;
上の例はメディアタイプを併せて指定しているものです。
@import 規則は、外部スタイルシート内または style 要素内で使用できるが、@charset 規則を除く、そのほか全ての規則に先行して記述されていなければならない、とされています。
@media 規則
対象メディアごとに適用するスタイルを指定します。印刷用スタイルを指定する例を示します。
- CSSソース：
- @media print {
- p.note {
- font-size: 1em;
- width: auto;
- }
- }