Wit Mania(Webデザイン:::The Principle of CSS basis):::

The Principle of CSS basis

CSSを使いこなすために覚えておきたい基本ルール

CSSを実践で使いこなすことはけっして簡単なことではないが、CSSの文法自体は比較的シンプルでわかりやすい。ここでは、そんなCSSの基本となるルールをおさらいしておこう。

適用先の指定方法@
セレクタの基本

CSSの書式は、まずスタイルの適用先を示し、それに続く「{〜}」の中で具体的なスタイルを記述するという形式になっている。そして、そのスタイルの適用先を示す部分のことを「セレクタ」と呼んでいる。

スタイルシートの適用先を示す部分を「セレクタ」という

セレクタにもいろいろな種類と指定方法があるが、そのもっとも基本となるのは、要素名をそのままセレクタとして指定する方法だ。たとえばbody要素を適用対象としたい場合は、セレクタとして単純に「body{〜}」を書くだけでよい。同様に、h1要素を適用対象としたなら「h1{〜}」、p要素を適用対象としたいなら「p{〜}」と記述する。

適用先を複数指定したい場合は、「,」(カンマ)で区切る

また要素を限定するのではなく、すべての要素を適用対象としたいときは「*」(アスタリスク)記号で表すことも可能。この「*」記号は、おもに特定の属性が指定されている要素だけを適用対象としたい場合など、特定の条件に当てはまる任意の要素を適用対象としたいときに利用される。そして、そのように「*」以外の他の書式と組み合わせて使われる場合に限って、「*」そのものを省略することが許されている。

セレクタには、適用先としたい要素の「要素名」をそのまま指定できる。「*」(アスタリスク)を指定すると、すべての要素が適用対象となる。

複数の要素へ同じスタイルを適用したいとき、それぞれの要素別に記述するのはめんどうだろう。このように、同じスタイルを異なる複数の適用先として指定したいのなら、適用先を示すセレクタを「,」(カンマ)で区切って示せばよい。また、各セレクタに入れることができるので、自分で見やすくわかりやすい状態にしておくことができる。

適用先の指定方法A
idセレクタ

特定のid属性の値が指定されている要素を適用対象として指定したい場合には、要素名に続けて「#」(シャープ)記号を書き、さらにその後にid属性の値を書いて指定することができる。たとえば、「id="header"」がdiv要素に適用させるスタイルは「div#header{〜}」と記述する。同じdiv要素であっても、idを振り分けることで異なる表現が可能になるのだ。このとき要素を限定せずに、特定のid属性の値が指定されている任意の要素を適用対象としたい場合には、「*#header{〜}」のように要素名の代わりに「*」を指定することも可能。「*」が他の書式と組み合わせて使用されるとき「*」を省略することができるので、上記のような場合、単純に「#header{〜}」と表記されることが一般的だ。

このように指定すると、「id="header"」が指定されたdiv要素だけが適用対象となる。

特に要素の種類を限定しない場合は、要素名の代わりに「*」を指定する。この場合の「*」は省略して書かなくてもよい(図の例ではどちらも同じ処理となる。)

idセレクタは、属性セレクタを使ってこのように書くことも可能。

適用先の指定方法算B
クラスセレクタ

id属性と同様、徳手のclass属性の値が指定されている要素を適用対象として指定することも可能だ。その場合は要素名に続けて「.」(ドット)記号を書き、class属性の値を書いて指定する。たとえば「class="nav"」が指定されているdiv要素は、「div.nav{〜}」と記述すればよい。このとき要素を限定せずに、特定のclass属性の値が指定されている任意の要素を適用対象とした場合には、「*.nav」のように要素名の代わりに「*」を指定することも可能だ。「*」が他の書式と組み合わせて使用されるとき「*」を省略することができるので、上記のような場合、単純に「.nav{〜}」と表記されることが一般的である。

このように指定すると、「class="nav"」が指定されたdiv要素だけが適用対象となる。

特に要素の種類を限定しない場合は、要素名の代わりに「*」を指定する。この場合の「*」は省略して書かなくてもよい(図の例ではどちらも同じ処理となる。)

クラスセレクタは、属性セレクタを使ってこのように書くことも可能。

適用先の指定方法C
子孫セレクタ

適用先を指定する際、「要素Aの中に含まれる要素B」という指定ができると便利なことがある。つまり「Aという範囲に含まれるBの要素」というように範囲を限定できれば、id属性やclass属性を無意味に増やすことなく適用先をスマートに指定できるというわけだ。

このように指定すると要素Aの中に含まれる要素B内から、さらに要素Cに該当するものだけが適用対象となる。

CSSのセレクタでは、このような場合は複数のセレクタを半角スペースで区切って指定する。すると、左のセレクタに該当する要素の中に含まれ、かつ右のセレクタに該当する要素が適用対象となるのだ。

子孫セレクタの指定例。このように指定すると、「id="header"が指定されている要素」に含まれる「class="nav"が指定された要素」内から「ul要素」だけが適用対象となる

セレクタは半角スペースで区切ればいくつでも指定できるため、たとえば「ABC」のように指定すると、要素Aの中に含まれる要素B内から、さらに要素Cに該当するものだけが適用対象となる。

適用先の指定方法D
リンク部分の指定方法

HTML(XHTML)においてリンクはa要素で表現するが、一般にリンク部分は状態によって表示が変化するという特性がある。そこでリンクの状態別にスタイルを適用できるようにするため、「模擬クラス」という特別な書式が用意されている。

リンクの状態別に指定できる擬似クラスの指定例。指定する順序を変えると、意図した表示にならない場合があるので注意しよう。

a要素で使用できる模擬クラスは以下のとおりだ。まだ訪れていないリンクを示す場合はa要素の「a」に続けて「:link」、すでに見たリンクを示す場合は同様に「:visited」を記述。またカーソルが上にある状態については「:hover」、マウスボタンが押さえられた状態を示すには「:active」を続けて指定する。これら4種類のスタイルを続けて指定する場合には、掲載した順に書かなければ意図した状態にならない場合があるので注意しよう。

適用先の指定方法E
指定の組み合わせ方

セレクタを構成する書式にはさまざまなものがあるが、それらを組み合わせる場合には一定のルールを守ったうえで記述しなければならない。ここでまとめておくので参考にしてほしい。

まず、セレクタの先頭は必ず「要素名」または任意の要素を示す「*」でなければならない。ただし、その後に何かが続く場合は「*」を省略することが可能だ。続いて「要素名」または「*」の後ろには、「#id名」「.class名」「模擬クラス(:linkなど)」を任意の順序で複数配置できる。たとえば「id="nav"」が指定されているa要素の中から、未訪問のリンクだけを適用先にしたいときは、「a#nav:link」と書いても「a:link#nav」とカイエtもまちがいではなく、どちらも同じ適用先を指定していることになるのだ。

このように、「要素名」「*」「#ID名」「擬似クラス」の組み合わせで構成されたセレクタは「セレクタの基本単位」として扱われ、一般的にシンプルセレクタ(simple seletor)と呼ばれている。そして、特定の要素に含まれる要素を半角スペースで区切って指定する「子孫セレクタ」は、このシンプルセレクタを単位として半角スペースで区切ることになっている。

そのほか、ブロックレベル要素の1文字目だけに適用される「:first-letter」といったセレクタも存在する。これらは「擬似要素」と呼ばれ、ルール上ではセレクタ全体の最後に指定することになっている。

セレクタの基本単位であるシンプルセレクタの組み合わせのルール

擬似要素は、セレクタ全体の最後に指定する

擬似要素 説明
:first-letter ブロックレベル用の1文字目に適用
:first-line ブロックレベル用の1行目に適用
:before contentプロパティで直前に追加される要素に適用
:after contentプロパティで直前に追加される要素に適用
CSS2で定義されている擬似要素は4種類。これれを利用するときは、必ずセレクタ全体の最後につけて私用する。

見やすいソースが上達への近道
CSSの書式について

CSSの書式は、まず適用先を示すセレクタを記述し、それに続く「{〜}」の中で具体的な表示指定を書き込むという形式になっている。「{〜}」内に記述されるひとつの表示指定は「宣言」と呼ばれ、「プロパティ」と「値」を「:」(コロン)で区切った形式で示す。一つのセレクタに対して複数の宣言を適用させることも可能であり、そのようなときは宣言同士を「;」(セミコロン)で区切らなければならない。セミコロンは区切りを示す役割であるため最後の宣言の後ろには不要となるが、編集時の手間やミスを減らす目的で、たとえ最後の宣言であっても付けておくのが普通だ。

なお、セレクタや宣言の前後には改行、半角スペース、タブを自由に入れることができるので わかりやすく編集しやすいように統一させたうえで、改行やインデントを入れておくとよいだろう。

宣言部分で指定できるCSSのプロパティは、CSS1で53種類、CSS2では122種類もあるが、正しく対応できている(実装されている)かどうかはブラウザによって違ってくる。プロパティのなかには、現在リリースされているすべてのブラウザに実装されていないものもある。各プロパティで指定できる値については、リファレンスやW3Cの仕様書を参照してほしい。

またCSSでは、「/*」と「/*」で囲った範囲がコメントとして扱われ、表示には一切影響を与えずにメモや注意事項などを記入しておくことができる。これはソースを見やすくできるだけでなく、実験や問題の調査などで一時的に一部の表示指定を無効にしたい場合などにも利用できるだろう。なお、コメントは書式を構成する各部分の間であれば、どこにでも入れることが可能だ。

CSSの書式と具体例

「/*」と「*/」で囲った範囲はコメントとなり、その中で指定されたプロパティなどは無視される。

コメントは、指定の一部を無効化したいときに利用することもできる。

 

 

 

同じ色でも方法はさまざま
CSSで色を扱うための基本

文字や枠線などへの色の指定は、Web作成において最低限、覚えておかなければならない重要なファクターであろう。CSSで色を示すには数値とキーワード、大きくふたつの方法から選ぶことができる。

まず、色を数値で示す方法について、これはHTMLと同様、「#」に続けて、RGB各色の値を2桁ずつの16進数で示すというもの。1色当たり256とおり×3チャンネルなので、約1,677万色の中からひとつの色が選べる計算だ。「#AABBCC」と記述され、Web作成ではこの方法がもっとも広く利用されている。

またCSSは上気した6桁の半分、すなわち3桁で色を示すこともできる。RGBの各色は1桁の16進数で示すことになるのだが、これは各色が1〜f(10進数では1〜15)までしか表現できないということではない。記述した1桁の値は、ふたつ並べた2桁の値としてとらえられ、たとえば「#ABC」なら「#AABBCC」と判断される。当然、1桁だけを指定するときは2桁の値が同じ数値であることが条件だ。この方法を覚えておくと、Webセーフカラーを示すときに役立つ。RGBの各色を6段階に単純化した216色で「33」「66」「99」「cc」「ff」のいずれかとなるため、つねに3桁で表現することが可能になるからだ。

CSSで色を数値で示す場合の書式。どの例も青を指定している。

そのほかCSSでは16進数だけでなく、10進数の数値で色を示す方法も提供されている。RGBの各色を0〜255の値で示す場合は、「rgb(R値、G値、B値)」という書式で示す。たとえば赤(#ff0000)を示すには、「rgb(255,0,0)」と指定すればよい。さらにRGBの各色を0〜100%の値で示す方法も用意されており、上記の色なら値に「%」をつけて、「rgb(100%,0%,0%)」と指定する。

最後に、数値ではなくキーワードでの指定について、CSSではHTMLで定義されている16種類のキーワードから色を指定可能だ。直接キーワードを記述し、たとえば「yellow」なら「#ffff00」が適用される。

HTMLに定義された16種類のキーワードを使って色が指定可能。

CSSデザインの要となるボックスを正しく理解しておこう

CSSの適用先である要素はすべて、ボックスと呼ばれる構造に従って表示されることになっている。ボックスは四角形で、テキストや画像などの要素内容を表示する領域のほかに、パディングと呼ばれる余白があり、その外側にボーダー、さらにその外側の余白であるマージンという4つの部分から構成される。CSSの初期値としては、パディング・ボーダー・マージンのいずれもが「0」の状態となっているが、要素の種類によっては、ブラウザのデフォルト値としてマージンやパディングが設定されている場合もある。一般にbody要素にはマージンが設定されているが、Operaのようにパディングが設定されているブラウザもあるし、h1〜h6要素やp要素をはじめとするブロックレベル要素には、ブラウザの初期値としてマージンが設定されていることが多い。また、ボーダーは色・太さ・線の3つの種類を設定することが可能だが、初期値では線の種類が「none」となっているため、これを変更しなければ、いくら太さや色を設定しても線は表示されないので注意したい。

パディングとマージンは、いずれも余白として機能するので区別しづらいが、もちろん明確な違いを持っている。それは要素に設定した背景はパディングで指定した余白に表示されるが、マージン部分はつねに透明で背景は表示されないということだ。また背景については、ボーダー部分まで範囲内となっているので両方を使うときに気をつけなければならない。つまり背景とボーダーの両方を表示したとき、見えないだけで実際にはボーダーの下側も背景が存在しているということだ。ボーダーの優先順序が高いため見えてないだけであり、ボーダーを透明にするか点線や破線の状態にすると背景も表示される。

またボックスの幅と高さを設定するwidhプロパティとheightプロパティは、仕様上はボックスの内容領域の幅と高さを設定するのだがIE5.5以前ではボーダーまでを含む領域の幅と高さとして設定されるので注意が必要だ。

ボックスの構造。背景が表示されるのはボーダーまでの範囲で、マージン部分には表示されない。

同じ幅や高さの指定をしても、IE 5.5以前では異なる範囲に対して適用されるので注意が必要。

明確に決められている
CSSの優先順位

CSSはブラウザがデフォルトのスタイルをもち、それに制作者の指定したCSSが適用され、そのほかにユーザー側からもCSSを適用できる仕組みになっている。そのため、それぞれで同じ適用先に対して指定したスタイルが競合することもあるわけだ。

また、同じ制作者が作成したソースコードの中でも指定の競合は起こりうる。まったく同じセレクタを使って異なるスタイルを何度か適用してしまう場合もあるだろうし、idやclassの使い方の違いによって、セレクタは違うが適用先はまったく同じ指定が複数あるという状況もありうるのだ。このように指定が競合したとき、CSSではどのスタイルを優先して適用するかということが明確に決められている。

まず、ブラウザ・制作者・ユーザーの三者の優先順位から説明すると、制作者が指定したスタイルの優先度が最も高く、次にユーザーの指定、最後にブラウザのデフォルトのスタイルという順序となる。ただし、CSSを宣言するときに「!important」をつけることで、ユーザーの指定が最優先されるように変更することも可能だ。

同じ制作者のスタイル内での競合については、idでの指定が最も高く、次にclass(擬似クラスも含む)での指定、要素名での指定という順序となる。また優先度が同じ場合は、より後ろに指定したものが優先される。

 

表示の指定が競合した場合の優先順位決定のルール。IEでは、「!important」を付けても優先順位が上がらない点に注意しよう

豊富な種類からして可能
CSSで扱える単位とは

HTMLで永さや大きさを指定する場合は「ピクセル数」(px)と「パーセント」(%)、フレームなどの比率を表す「*」の3種類しか利用できなかった。しかしCSSを使えば、表に示したさまざまな種類の単位を指定することができる。CSSの場合、基本的にプロパティを「数値+単位」で指定することになるが、値が「0」のときは付けなくてもよい。また行間を指定するline-heightプロパティや重なる順序を指定するz-indexプロパティなど、単位を付けずに数値を指定するプロパティも存在する。

% 何に対する割合かはプロパティによって異なる
em フォントサイズを1とする単位
ex 小文字「x」の高さを1とする単位
px ピクセル
pt ポイント(1/72インチ)
pc 1パイカ(12ポイント)
mm ミリメートル
cm センチメートル
in インチ(2.54センチメートル)
CSSで数値に付けて指定できる単位

さまざまな単位が利用できるが、使用頻度が高いのは「%」「em」「px」の3種類だろう

そのほかIEではWebページを開くとき、文字サイズの単位として「pt」や「px」を使うとメニューから文字サイズが変更できなくなる。ユーザビリティを考慮して「em」「%」、または文字サイズを示すキーワードで指定することが推奨されている。

 

 

どんな場合でも明示しておきたい
文字コードの指定

スタイルシートを別ファイルに分けて記述する場合、そのファイルの先頭で「@charset "Shift_JIS";」のように文字コードを明示しておいたほうがよい。ソース内に日本語を一切含んでいない場合でも、後から日本語のコメントを入れるかもしれないし、将来的に日本語のフォント指定を追加する可能性もあるからだ。また、HTMLと外部CSSファイルの文字コードが共通している場合は特に必要ないと思うかもしれないが、サイトの一部として利用するサービスだけが別の文字コードになる可能性もある。

CSSでの文字コードの指定例。実際の文字コードに合わせて、「Shift_JIS」の部分を「euc-jp」や「utf-8」などに変更して使用する。必ず先頭部分で指定する必要がある点に注意。

さらにNN 6.xでは、@charsetで文字コードが示されていないと日本語フォントの指定が一切無効になってしまう。このようなブラウザへの対応も考えて、作成する最初の段階で文字コードを明示しておくように心がけておこう。

本来の用途以外でも使われる
適用メディアの指定

HTMLから外部スタイルシートを読み込む際に利用するlink要素、およびHTML内容にCSSを書き込む際に利用するstyle要素には、スタイルシートの適用対象メディアを設定するためのmedia属性を指定することができる。表に示した9種類の値が用意されており、「,」(カンマ)で区切って複数のメディアを指定することも可能。実際にはCSS側でも適用対象メディアを設定する機能があり、CSS2の場合ならHTMLの9種類に「embossed」を加えた10種類から指定することになる。ただし、現時点でこれら全てのメディア指定が有効となって機能するわけではなく、「screen」「print」「all」のほかは、一部のブラウザで「projection」「handheld」を認識する程度のようだ。

実のところ、このmedia属性は適用対象メディアを設定するという本来の目的以外でも広く使われている。たとえばNN 4.xでは、media属性の値が「screen」と一致しないと、そのCSSが無視されてしまう。この性質を利用して、NN 4.xにCSSを適用させない目的で意図的に「all」「screen, tv」などを指定することもあるのだ。なおmedia属性に指定できる値は、全体が連続した状態で出力されるメディアと、特定サイズのページに分割されて出力されるメディアとに分けることができる(両方の性質を持つメディアもある)。media属性に「screen, projection」と指定されているHTMLソースも見かけるが、「projection」は分類的に「print」と同じであり、スクロールしない「ページもの」という扱いになる点に注意しよう。

HTMLとCSSで指定できるメディアの種類とその分類。ページ単位で扱われるものと、そうでないものがある点に注意。

「連続」は、全体を1つの連続するものとして出力するメディア、「ページ」はページ単位で出力されるメディア。

Operaは「projection」と「handheld」にも対応している。

http://jp.opera.com/

入れ子にならないよう気をつける
コメントや書式の注意点

CSSのコメントは、メモや注意事項などを記入してソースを整理するために使うわけだが、表示指定の一部を無効にするという用途でも利用できる。デザイン時の実験や問題の調査など、一時的に一部の表示指定を無効にしたい場合などで役立つので便利だ。ただし、コメントは入れ子にできないというルールがある。部分的にコメントで無効にしている箇所を含む大きな範囲で、さらにコメントを追加することはできない点に注意しよう。

コメントが入れ子になっている例。コメントを含む範囲をさらにコメントで囲むのは文法違反だ。

またCSSでは、書式を構成する各パーツの間に、改行・半角スペース・タブを自由に入れることができるため、ソースコードを自分の見やすいように整理して書くことができる。しかし、その場その場で統一しておかないまま書いてしまうと、編集の段階で余計な手間がかかったり、ミスを引き起こす原因にもつながる。複数の人がかかわる規模の大きいプロジェクトでは、事前に統一した書き方を求められる場合も多い。常日頃から、だれが見てもわかるような見やすいCSSソースとなるよう心がけておこう。

うっかりミスのチェックは
プログラムに任せてしまおう

HTML文書でも同様なのだが、ついうっかりしてタグやカッコを閉じ忘れたり、「;」(セミコロン)や「,」(カンマ)などの記号を書き忘れることがある。このようなミスを予防するため、多くの人が事前に書き方のルールを決めているはずだ。たとえば、書式を統一してまちがいを発見しやすくしたり、先にカッコを閉じる癖をつけて「{」を書いたらすぐに「}」を書くという方法など、これらの努力をすれば、確かにミスは少なくなるだろう。しかし、それでもまちがってしまう可能性はある。

そのようなまちがいを発見するには、文法チェックをするのが手っ取り早くて簡単だ。短時間でチェックでき、ささいなミスで何時間もソースとにらめっこする必要もない。HTMLとCSSの両方で、完成した段階で忘れずに文法チェックを行おう。

「W3C CSS検証サービス」(http://jigsaw.w3.org/css-validator/)は、日本語化されているので使いやすい。

 

効率よく作業するためには必須
スタイルガイドで書式を統一する

複数の制作者がかかわって一つのサイトを作り上げたり、納品したサイトをクライアント側で更新する必要がある場合などでは、デザインやコーディングのルールを記したスタイルガイドが必要となる。スタイルガイドは本来、制作全般の作業を効率よく進めるために必要となるものだが、ここではCSSを書く上での必要性について考えてみたい。

まず、さまざまなWebデザイナーの作成したCSSのソースコードを見ていると、その書き方が千差万別であることに気づくだろう。なかには細かく整理されて見やすく、親切でわかりやすいソースコードもあれば、ゴチャゴチャとして、どこに何が書いてあるのかまったくわからないようなソースコードもある。制作者以外の人がソースコードを使って作業すると考えたとき、どちらの状態が効率的に作業できるのかは考えるまでもない。統一性がなく汚いソースコードは、理解するために多くの時間を要するだけでなく、手を加えたときにミスする確率も非常に高くなる。

そうならないためにはスタイルガイドをつくって、ソースコードを適切な書き方で統一する必要がある。たとえばCSSの宣言部分のインデントはどうするのか、最後の宣言の後ろにも「;」(セミコロン)を付けるのかどうか、「}」(閉じカッコ)もインデントさせるのかなどを事前に統一しておくことは非常に重要だ。それらがバラバラになっていると、ソースコードをコピー&ペーストするたびに調整が必要になり、余計な時間が必要となるばかりでなくストレスの要因にもなる。

内容はまったく同じ指定の改行やインデントを変えてみた状態。このような書き方がバラバラになっていると、効率的な作業ができなくなりミスをする確率も高くなる。

・再利用しやすいか

・書式を構成する各部分が読みやすいか

・書式を構成する各部分が明確に区別できるか

・書式を構成する各部分の始まりと終わりが明確か

・ミスを誘発する書き方になっていないか

ソースコードの書き方を統一する際に考えるべきことの一例。


Copyright© 1998-2007. Wit Mania, all Rights Reserved. /// Last Update: 2010-11-10