2008年8月アーカイブ

「overflow-y:scroll;」をCSSでhtmlセレクタに指定すれば、Firefoxで縦スクロールバーが常に表示されることは、前回の記事で述べましたが、この方法ではOperaには無効です。

「overflow-y」プロパティはもともとIEの独自拡張で、CSS3で草案としてあがっているもので、Firefoxは先行して実装しているだけに過ぎません。

FirefoxでもOperaでもスクロールバーを出すには、コンテンツの領域が常にブラウザのウィンドウサイズより少しでも大きくなければなりません。そのことを応用して、html領域を100%、marginで下方に1pxの幅を設けるようにします。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

Firefoxでは、テンプレートの領域がブラウザのウィンドウよりも小さいとき、縦のスクロールバーが出ない仕様になっています。IEでは常に縦のスクロールバーの領域が取られています。

そのため、「margin:0 auto;」など指定してセンター配置にしたWebサイトの場合、ページによってテンプレートの位置が微妙にずれたりして、ちょっと気持ち悪かったりします。

この問題は、常にスクロールバーを出すことによって解消できます。

CSSコード

html {
   overflow-y:scroll;
}
プロパティ名使用できる値初期値適用対象継承適用メディアタイプ
azimuth<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inheritcenter全要素する聴覚
background-attachment scroll | fixed | inherit scroll 全要素しない聴覚
background-color <color> | transparent | inherit transparent 全要素しない聴覚
background-image <uri> | none | inherit none 全要素しない聴覚
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0% ブロックレベル要素と置換要素しない聴覚
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat 全要素しない聴覚
background [background-color || background-image || background-repeat || background-attachment || background-position] | inherit see individual properties 全要素しない聴覚
border-collapse collapse | separate | inherit separate テーブルとインラインテーブル要素する聴覚
border-color [ <color> | transparent ]{1,4} | inherit see individual properties 全要素しない聴覚
border-spacing <length> <length>? | inherit 0テーブルとインラインテーブル要素する聴覚
border-style <border-style>{1,4} | inherit see individual properties 全要素しない聴覚
border-top border-right border-bottom border-left [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties 全要素しない聴覚
border-top-color border-right-color border-bottom-color border-left-color <color> | transparent | inherit the value of the color property 全要素しない聴覚
border-top-style border-right-style border-bottom-style border-left-style <border-style> | inherit none 全要素しない聴覚
border-top-width border-right-width border-bottom-width border-left-width <border-width> | inherit medium 全要素しない聴覚
border-width <border-width>{1,4} | inherit see individual properties 全要素しない聴覚
border [ <border-width> || <border-style> || border-top-color ] | inherit see individual properties 全要素しない聴覚
bottom <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
caption-side top | bottom | inherit top テーブルのcaption要素yes 聴覚
clear none | left | right | both | inherit none ブロックレベル要素しない聴覚
clip <shape> | auto | inherit auto ブロックレベル要素と置換要素しない聴覚
color <color> | inherit depends on user agent 全要素する聴覚
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before疑似要素と:after疑似要素しない全メディア
counter-increment [ <identifier> <integer>? ]+ | none | inherit none 全要素しない全メディア
counter-reset [ <identifier> <integer>? ]+ | none | inherit none 全要素しない全メディア
cue-after <uri> | none | inherit none 全要素しない聴覚
cue-before <uri> | none | inherit none 全要素しない聴覚
cue [ cue-before || cue-after ] | inherit see individual properties 全要素しない聴覚
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto 全要素する聴覚、インタラクティブ
direction ltr | rtl | inherit ltr 全要素する聴覚
display inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline 全要素しない全メディア
elevation <angle> | below | level | above | higher | lower | inherit level 全要素する聴覚
empty-cells show | hide | inherit show テーブルセル(th,td)要素する聴覚
float left | right | none | inherit none all、but see 9.7 しない聴覚
font-family [[ <family-name> | <generic-family> ] [、<family-name>| <generic-family>]* ] | inherit depends on user agent 全要素する聴覚
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium 全要素する聴覚
font-style normal | italic | oblique | inherit normal 全要素する聴覚
font-variant normal | sm全メディア-caps | inherit normal 全要素する聴覚
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal 全要素する聴覚
font [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] | caption | icon | menu | message-box | sm全メディア-caption | status-bar | inherit see individual properties 全要素する聴覚
height <length> | <percentage> | auto | inherit auto 非置換要素とインライン要素、テーブルカラムとカラムグループを除く全要素しない聴覚
left <length> | <percentage> | auto | inherit auto positionが指定された要素しない聴覚
letter-spacing normal | <length> | inherit normal 全要素する聴覚
line-height normal | <number> | <length> | <percentage> | inherit normal 全要素する聴覚
list-style-image <uri> | none | inherit none display: list-itemが指定された要素する聴覚
list-style-position inside | outside | inherit outside display: list-itemが指定された要素する聴覚
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc display: list-itemが指定された要素する聴覚
list-style [ list-style-type || list-style-position || list-style-image ] | inherit see individual properties display: list-itemが指定された要素する聴覚
margin-right margin-left <margin-width> | inherit 0テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
margin-top margin-bottom <margin-width> | inherit 0テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
margin <margin-width>{1,4} | inherit see individual properties テーブル見出し以外のテーブル表示タイプに従った要素、テーブル、およびインラインテーブル以外のすべての要素しない聴覚
max-height <length> | <percentage> | none | inherit none すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
max-width <length> | <percentage> | none | inherit none すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
min-height <length> | <percentage> | inherit 0すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
min-width <length> | <percentage> | inherit 0すべての要素にもかかわらず、非置換インライン要素、テーブルコラム、およびコラムグループしない聴覚
orphans <integer> | inherit 2ブロックレベル要素する聴覚、ページ式
outline-color <color> | invert | inherit invert 全要素しない聴覚、インタラクティブ
outline-style <border-style> | inherit none 全要素しない聴覚、インタラクティブ
outline-width <border-width> | inherit medium 全要素しない聴覚、インタラクティブ
outline [ outline-color || outline-style || outline-width ] | inherit see individual properties 全要素しない聴覚、インタラクティブ
overflow visible | hidden | scroll | auto | inherit visible 非置換ブロックレベル要素、テーブルセル、およびインラインブロック要素しない聴覚
padding-top padding-right padding-bottom padding-left <padding-width> | inherit 0テーブル列のグループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブルコラムグループ、およびテーブルコラム以外のすべての要素しない聴覚
padding <padding-width>{1,4} | inherit see individual properties テーブル列のグループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブルコラムグループ、およびテーブルコラム以外のすべての要素しない聴覚
page-break-after auto | always | avoid | left | right | inherit auto ブロックレベル要素しない聴覚、ページ式
page-break-before auto | always | avoid | left | right | inherit auto ブロックレベル要素しない聴覚、ページ式
page-break-inside avoid | auto | inherit auto ブロックレベル要素する聴覚、ページ式
pause-after <time> | <percentage> | inherit 0全要素しない聴覚
pause-before <time> | <percentage> | inherit 0全要素しない聴覚
pause [ [<time> | <percentage>]{1,2} ] | inherit see individual properties 全要素しない聴覚
pitch-range <number> | inherit 50全要素する聴覚
pitch <frequency> | x-low | low | medium | high | x-high | inherit medium 全要素する聴覚
play-during <uri> [ mix || repeat ]? | auto | none | inherit auto 全要素しない聴覚
position static | relative | absolute | fixed | inherit static 全要素しない聴覚
quotes [<string> <string>]+ | none | inherit depends on user agent 全要素する聴覚
richness <number> | inherit 50全要素する聴覚
right <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
speak-header once | always | inherit once テーブルヘッダー情報がある要素する聴覚
speak-numeral digits | continuous | inherit continuous 全要素する聴覚
speak-punctuation code | none | inherit none 全要素する聴覚
speak normal | none | spell-out | inherit normal 全要素する聴覚
speech-rate <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium 全要素する聴覚
stress <number> | inherit 50全要素する聴覚
table-layout auto | fixed | inherit auto テーブルとインラインテーブル要素しない聴覚
text-align left | right | center | justify | inherit a nameless value that acts as left if direction is ltr、right if direction is rtl ブロック要素とテーブル要素とインラインブロック要素する聴覚
text-decoration none | [ underline || overline || line-through || blink ] | inherit none 全要素N/A聴覚
text-indent <length> | <percentage> | inherit 0ブロック要素とテーブル要素とインラインブロック要素する聴覚
text-transform capitalize | uppercase | lowercase | none | inherit none 全要素する聴覚
top <length> | <percentage> | auto | inherit auto positionが指定されている要素しない聴覚
unicode-bidi normal | embed | bidi-override | inherit normal all elements、but see prose しない聴覚
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline インライン要素とテーブルセル(th,td)要素しない聴覚
visibility visible | hidden | collapse | inherit visible 全要素する聴覚
voice-family [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit depends on user agent 全要素する聴覚
volume <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium 全要素する聴覚
white-space normal | pre | nowrap | pre-wrap | pre-line | inherit normal 全要素する聴覚
widows <integer> | inherit 2ブロックレベル要素する聴覚、ページ式
width <length> | <percentage> | auto | inherit auto 非置換要素、インライン要素、テーブルの行要素(tr, thead, tbody, tfoot)を除く全要素しない聴覚
word-spacing normal | <length> | inherit normal  する聴覚
z-index auto | <integer> | inherit auto positionが指定されている要素しない聴覚

関連リンク

テーブルを使わずに、div構造でテンプレートを画面の真ん中に寄せる方法です。わかりやすいように最小限のソースしか書いていません。

(X)HTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="temp">
   <div id="header"></div>
   <div id="content"></div>
   <div id="footer"></div>
</div>
</body>
</html>

CSSコード

div#temp {
margin:0 auto;
width:800px;
}

ポイントは、テンプレートを囲むdivのスタイルシートのmarginを「margin:0 auto」にすることと、テンプレートの横幅を指定すること、そしてhtmlのバージョンを指定する(ドキュメントタイプを宣言する)ことです。

例えば、注釈を※をつけて記述するような場合、※マークだけあたかもリストマークのように文章のまとまりからひとつ出ていたほうが、可読性が向上します。text-indentとmargin-leftを組み合わせることにより実現できます。text-indentで※マーク分字上げをし、そうすると全体的に左に1文字分ずれてしまうので、その分margin-leftで位置を右に戻します。

CSSコード

p {
     text-indent: -1em;
     margin-left: 1em;
}

(X)HTMLコード

<p>
※ここは注釈です。ここは注釈です。
</p>

Webページではあまりテキストの「字下げ」はしないことが多いのですが、長文などのテキストには可読性を上げる効果があります。段落の一番最初の文字だけ1文字分だけ字下げする場合には以下のようにtext-indentを使います。

CSSコード

p {
   text-indent:1em;
}

フォームを作成するとき、tableタグを使用するととても便利ですが、tdタグ内にformタグを入れると、formタグの上や下に謎の空白ができることがあります。これは、ブラウザによるもので、formタグの前後に自動改行が入ってしまうことに起因します。これを解決するためにはformのmarginを0にします。

CSSコード

form {
   margin:0;
}

余談ではありますが、かなり昔この空白を無くすためにtableのtrタグとtdタグの間にformタグを入れるという荒業があった頃が懐かしいです。これは正しくない構造で、CSSが一般的に広まってない頃に流行っていました。

できるだけ、formタグはtableタグの外に設定するようにしてください。しかし、最近はテーブルではなくliタグを使用してあたかもテーブルのように見せる手法も多く出てきましたね。

画像を指定したとき、画像の下に空白ができた、なんてことありませんか?hタグやtableタグ内にimgタグを入れたりしたときなど。これはブラウザのバグではなくて、CSSの仕様のせいです。

画像の下に余白ができるのは、ブラウザによっても異なりますし、DOCTYPE宣言の違いによっても異なります。この余白ができる理由ですが、画像をテキストのベースラインに揃えて表示されるからです。

画像とベースラインの関係

上の画像で言うと、青い線で囲んであるのがhタグやテーブルの範囲です。赤い線がベースライン。見てのとおり、アルファベットのpやgはベースラインよりも下にも文字があります。画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればよいわけですね。

スタイルシートで以下のように設定してください。

CSSコード

img {
   vertical-align:bottom
}

これで、画像の下から空白がなくなります。

letter-spacingは文字間のスペースを調節するのに便利なプロパティです。しかし、その際、brタグを2回入れないと改行されなくなってしまいます。これを回避するためにはbrタグだけletter-spacingの指定を解除する必要があります。

CSSコード

br {
   letter-spacing:normal;
}

これでbrタグを2回入れることなく、正常に動作します。

セレクタを理解する

|

CSSには様々なタイプのセレクタがあります。

  1. ユニバーサルセレクタ
  2. タイプセレクタ
  3. idセレクタ、classセレクタ
  4. 子孫セレクタ
  5. 子セレクタ
  6. 隣接セレクタ

1.ユニバーサルセレクタ

ユニバーサルセレクタとは全称セレクタともいい、全ての要素を対象をするセレクタです。ユニバーサルセレクタは*(アスタリスク)で表します。


* {
   color:#000;
}

上記のように指定した場合、全ての要素の色は#000(黒)になります。

2.タイプセレクタ

タイプセレクタとは、HTMLタグに適用されている要素名のことを指します。


strong {
   font-weight:bold;
}

3.idセレクタ、classセレクタ

タイプセレクタでは、その要素全てにスタイルを適用してしまいますが、より個別にスタイルを指定したいときに便利なのが、idセレクタ、classセレクタです。

idセレクタも同様に、HTMLファイルにて「id="XXXX"」で指定したid属性の名前(識別子)を持つ要素にスタイルを適用します。


div#contents {
   width:800px;
}

idセレクタは上記のように、「セレクタ.(ピリオド)クラス名」で記述します。

classセレクタは、HTMLファイルにて「class="XXXX"」で指定したクラス属性の値を持つ要素にスタイルを適用します。


p.comment {
   color:#000;
}

classセレクタは上記のように、「セレクタ#(シャープ)id名」で記述します。

4.子孫セレクタ

HTMLタグの入れ子(親子関係)になっている要素にスタイルを指定したい場合に子孫セレクタを使用します。例えば、pタグ中のstrongタグだけ色を赤にしたいときは以下のようにスタイルを指定します。


p strong {
   color:red;
}

子孫セレクタは上記のように、「セレクタ (半角スペース)セレクタ」で記述します。 例ではセレクタは2つしかありませんが、いくつでも記述することは可能です。

5.子セレクタ

親要素直接の子要素だけにスタイルを指定したい場合には子セレクタを使用します。孫要素にはスタイルは適用されません。


div#contents > p {
   padding-top:5px;
}


<div id="contents">
   <h2>子セレクタ</h2>
   <p>スタイルが適用されます。</p>
   <div>
      <p>スタイルが適用されません。</p>
   </div>
</div>

子セレクタは上記のように、「セレクタ > セレクタ」というふうにセレクタの間に「>」で区切りを入れます。ただし、子セレクタはIE6では対応していませんので使用には注意が必要です。

6.隣接セレクタ

同一の親要素を持つ、隣接する2つの要素があった場合、前者を兄要素、後者を弟要素とし、弟要素にスタイルを指定したい場合には隣接セレクタを使用します。

下の例の場合、例えば弟要素であるpタグが連続して2つあったとしても、h2タグの直下に位置するpタグにしかスタイルは適用されないことに注意してください。


h2 + p {
   padding-top:5px;
}


<h2>隣接セレクタについて</h2>
<p>スタイルが適用されます。</p>
<p>スタイルが適用されません。</p>

隣接セレクタは上記のように、「セレクタ + セレクタ」というふうにセレクタの間に「+」で区切りを入れます。

UIのデフォルトスタイルシートを初期化したほうがよい理由

私はWebページを構築する際、ブラウザのスタイルの初期化を設定する専用のCSSファイルを作成します。

各ブラウザによって、あらかじめスタイルが指定されています。例えば、CSSに手を加えていない状態なのにh1タグの文字が大きいのは、ブラウザのスタイルが適用されているためです。

全てのブラウザのデフォルトスタイルシートが同じであれば問題ないのですが、異なるため、一度リセットしておかないと予期しないレイアウトくずれの原因になります。

そういう理由で、一度CSSの初期化を行います。CSSをリセットしてしまえば、それからCSSを上書きしていけばよいので、ひとつのブラウザだけで確認しても他のブラウザでのレイアウト崩れは起こりにくくなります。(最終的には全てのブラウザで動作確認を行うのが理想ですが。)

ただし、全てのスタイルを初期化してしまえば、全てのセレクタに対して再度スタイルを指定しなければならないので、とても骨が折れることです。そのため、よく考えてスタイルを初期化する必要があります。

全称セレクタの利用

全称セレクタとは全ての要素を対象とするセレクタです。つまり、全称セレクタによって指定されたスタイルは全てのセレクタに適用されるということです。

全称セレクタを利用する利点としては、

  1. 一括してスタイルを指定することができる
  2. 全称セレクタは最も低い個別性※(a=0、b=0、c=0、d=0)であるので、どのセレクタも簡単に上書きできる。
    ※個別性に関しては、以下の記事を参考にしてください。
    スタイル適用の優先順位を理解する - CSSデザインノート

よって、全てのセレクタに指定したいスタイルがある場合に便利です。

よく全称セレクタに指定されている要素は以下のとおりです。

CSSコード

* {
   margin:0;
   padding:0;
}

marginとpaddingはブラウザによって最も異なる指定がされており、これらを初期化することは有効ではあります。ただし、全称セレクタは全てのセレクタに適用されてしまうため、上記の場合、ブラウザによってはbuttomタグの中のmarginやpaddingもなくなってしまい、期待しない表示になってしまうこともあり、私はお勧めしません。

私は、全称セレクタにはフォントの種類だけ指定しています。これは、基本的にひとつのサイト内でフォントの種類を変えることがないことを前提としているためです。

CSSコード

* {
   font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"
   ヒラギノ角ゴ Pro W3","MS P ゴシック",verdana, sans-serif;
}

アンカーの設定

アンカーの設定は、基本的となる色とテキストのスタイルを決めます。アンカーはコンテンツによって様々なスタイルを適用するので、デフォルトスタイルシートの上書きには、基本的なものの指定で十分でしょう。

CSSコード

a {
   color:#0C5F95;
   text-decoration:none;
}

a:link {
   color:#0C5F95;
   text-decoration:none;
}

a:visited {
   color:#666;
   text-decoration:none;
}

a:hover {
   color:#ddd;
   text-decoration:none;
}

hタグの設定

hタグも設定する場所によって頻繁にスタイルが変更されるものだと思います。marginとpaddingだけ指定して、細かい設定は個別にしていきます。

CSSコード

h1,h2,h3,h4,h5,h6 {
   margin:0;
   padding:0;
}

imgタグの設定

imgタグにはデフォルトスタイルシートでは枠線(border)が指定されていますので、一度リセットします。また、vertical-alignをbottomにしておくと、画像の下に隙間ができてしまうのを防ぐことができます。

CSSコード

img {
   border:0;
   vertical-align:bottom;
}

formタグの設定

formタグはブラウザによって、フォームの上部に空白を作ってしまうものがありますので、marginを0にして、ブラウザの差異をなくしておきましょう。

CSSコード

form {
   margin:0;
}

ulタグの設定

ulタグはどのブラウザも左側が空いて(インデントされて)表示されると思うのですが、この空白を空けている要素がmarginかpaddingかはブラウザによって異なります。そのため、marginとpaddingを初期化しておきます。

CSSコード

ul {
   margin:0;
   padding-left:40px;
}

valid(正当)なCSSで記述しても、スタイルが反映されていないときがあります。実はCSSには優先順位が以下のようにあります。

1.個別性による優先順位

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)
Assigning property values, Cascading, and Inheritanceより引用

英語なのでわかりにくいかと思いますが、日本語に意訳すると以下のような意味となります。

  • スタイル属性が指定されていたらa=1、b=0、c=0、d=0とします。
  • セレクタに含まれているid属性の数をbにカウントします。
  • セレクタに含まれているid以外の属性と擬似クラスの数をcにカウントします。
  • セレクタに含まれている要素と擬似要素の数をdにカウントします。

そして、a-b-c-dと数字を並べて、数字が大きいほど優先度が高くなります。

サンプルは以下のとおりです。

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

2.記述順序による優先順位

CSSファイルの下に記述したほど、優先度が高くなります。

例えば、

CSSコード

p {color:red;}

p {color:blue;}

という記述があるとするなら、pタグで囲まれた文字は"青"になります。

3.!important宣言により最優先に

また、「!important宣言」というものがあり、プロパティの後ろに「!important」をつけることにより、そのスタイルが最優先されます。

CSSコード

p {color:red !important;}

p {color:blue;}

上記の場合、pタグで囲まれた文字は"赤"になります。

4.CSSの指定場所による優先順位

さらに、CSSを記述している箇所によっても優先順位が異なります。例えば、CSSは(X)HTMLファイル内に記述することもできますし、(X)HTMLファイルとは別の外部ファイルに記述することもできます。

これらの優先順位は以下のとおりです。

  1. HTMLタグに直接スタイル属性を設定
  2. (X)HTMLファイルのheadにスタイル要素を設定
  3. 外部スタイルシート

5.CSSの提供元による優先順位

以上の話は、Webページを作成する際の話ですが、CSSの提供元によってCSSが適用される順位が異なります。

どういうことかというと、CSSを指定するのはWebページをコーディングしているときだけと思いがちですが、Webページを閲覧しているユーザでもFirefoxなど特定のブラウザの機能により自由にCSSを上書きすることができます。

また、あらかじめ、ブラウザが初期値としてCSSを指定しています。例えば、h1タグは文字が大きいとかstrongタグはテキストが太くなる(ボールドになる)とかは、ブラウザにあらかじめ設定されているCSSによるものです。

これらの優先順位は以下のとおりです。

  1. 製作者スタイルシート(Webページ製作者による)
  2. ユーザスタイルシート(Webページ閲覧者による)
  3. ブラウザのデフォルトスタイルシート

ただし、!important宣言を使用すればユーザスタイルシートが優先されます。

結局のところ、どのようなスタイルの優先順位になるかというと、

  1. 個別性の高いものが優先され、
  2. 同じレベルの個別性である場合、!importantが最優先、あとはHTMLファイルを上から読んでいった際に、最後に読み込んだ(上書きされた)スタイルが適用されます。

以上のように非常に複雑ですのでむやみやたらにCSSを指定せず、自分で決めたルールに則ってCSSを記述していかなければなりません。どのように指定すれば、思い通りにスタイルが適用されるかは別のコラムにて紹介します。