スタイルの適用方法

◆ はじめに

スタイルシートを利用すると従来のＨＴＭＬのタグでは不可能だった見栄えやレイアウトのページを、それほど無理なく作成することができます。

フォントの種類や形状、サイズ、マージン設定、インデント、バックグランドカラー、バックグランドイメージなど、広範囲にわたるコントロールが可能です。

しかし、それには、「正しいHTML」で書かれたHTML文書でないとなりませんが...。

つまり、HTMLは効率的に情報交換を行えるよう、文書の「構造」を記述することを目的にしています。そこに文字の色や形などの情報が混じってくると、せっかくの情報が不明確になってしまいます。そこで、スタイルシートがそこを担当するわけです。

スタイルシートは、文書とは別の場所に定義しておき、それを構造に対して適用するという考え方です。いったん定義したスタイルは、複数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、メンテナンスが容易になります。

セレクタ、プロパティ、設定値（カラー、サイズ）等をいろいろ組み合わせて、表現豊かなホームページを目指しましょう。要は、セレクタをオブジェクトに見立てて、各プロパティを指定し、それを各要素に適応させる感じです。スタイルの適用方法には以下の３種類あります。

スタイルシート概説リファレンス

◆ スタイルシートファイルによる適用

スタイルシートファイル（xxxxx.css）にスタイル宣言を記述しておき、link要素で適用します。
スタイルシートファイルの中身は、「スタイル要素による適用」でのstyle要素の中身と等価です。

<link rel="stylesheet" type="text/css" href="chaichan.css" media="screen">

また、スタイルシートファイルまたは、style要素中に@import文で取り込むことも出来ます。

@import url("chaichan.css") screen;

CSS2のメディアタイプ

上記各々の後ろの方に記述してある「screen」はCSS2のメディアタイプです。
これは、出力先別にスタイルシートの適用が出来ます。種類は以下の通りです。

all - すべてのメディア
aural - 音声による出力
braille - 点字ディスプレイ
embossed - 点字プリンタ
handheld - 携帯端末
print - プリンタ
projection -プロジェクタ
screen - 一般のパソコンのディスプレイ
tty - tty端末
tv - テレビ

記述例

@media screen{        /* 一般のパソコンのディスプレイに適用 */
    body {
        font-size: 8pt;
    }
}
@media print{         /* プリンタに適用 */
    body {
        font-size: 18pt;
    }
}
@media screen, print{        /* 両方に適用 */
    body {
        line-height: 1.4em;
    }
}

注意 : Mac版のIE5.1及びNN4.7では、「@media screen, print」を指定するとスタイルシートが無効になるようです。

◆ スタイル要素による適用

以下のように、style要素を使い、head要素に配置し適用します。

<style type="text/css">
<!--
セレクタ {
    プロパティ:値; /* コメント */
}
-->
</style>

セレクタは、要素名、クラス名、ID名などで、アルファベットで始まり、アルファベット、数字、ハイフンのみで構成された名前を指定します。つまり、アンダースコア( _ )、コロン( : )、ピリオド( . )も2文字目以降の名前文字として認められていませんのでご注意ください。

尚、/* と */ で挟むとにスタイルシート未対応のブラウザにはただのコメントになります。
また、スタイルシート未対応のブラウザのために要素内をで囲み、HTML的にはHTMLコメントにします。

例、セレクタに要素名

セレクタに要素名そのもの指定します。
「*」が指定された時は、全要素に適用されます。

----------CSS2 ソース------------------------------------------------
* {         /* 全要素に適用 */
    line-height: 1.4em;
}
body {          /* body要素に適用 */
    background:url(xxx. gif);
}
---------- HTML4.01 ソース ------------------------------------------
<body>
  :
</body>

例、セレクタにクラス名

セレクタに「.」をつけてクラス名で指定します。

----------CSS2 ソース------------------------------------------------
.han-midashi {      /* 全要素のクラスで適用可能 */
    color:red;
    text-align:center;
}
h2.sub-midashi {        /* h2要素のクラスで適用可能 */
    color:red;
    text-align:center;
}
---------- HTML4.01 ソース ------------------------------------------
<h3 class="han-midashi">
    :
</h3>
<h2 class="sub-midashi">
    :
</h2>

例、セレクタにＩＤ名

セレクタに「#」をつけてID名で指定します。

----------CSS2 ソース------------------------------------------------
#dai3-midashi {     /* IDがdai3-midashiのみ適用 */
    color:red;
    text-align:center;
}
h2#dai2-midashi {       /* IDがdai2-midashiのみ適用 */
    color:red;
    text-align:center;
}
---------- HTML4.01 ソース ------------------------------------------
<h2 id="dai3-midashi">
    :
</h2>
<h2 id="dai2-midashi">
    :
</h2>

尚、ＩＤ名は、一つのHTML文書内では、ユニークでなくてはいけません。

例、セレクタに属性値

セレクタに要素名[属性名]、要素名[属性名="属性値"]、要素名[属性名~="属性値"]、要素名[属性名|="属性値"]を指定して適用できます。

----------CSS2 ソース------------------------------------------------
h1[title] {     /* 指定属性を使用している該当要素へ適用 */
    color: blue;
}
span[class="example"] { /* 指定属性値を使用している該当要素へ適用 */
    color: blue;
}
a[rel~="copyright"]{    /* 複数属性値指定時にそれを切り分けられるらしい*/
    color: blue;
}
*[lang|="en"] { /* lang属性に「en」で始まる値を持つ要素にマッチする。*/
        /* すなわち「en」「en-US」「en-cockney」などにマッチする:*/
    color : red 
}
---------- HTML4.01 ソース ------------------------------------------
<h1 title="タイトル属性があるとスタイル適用">タイトル</h1>
<span class="example"> 実は普通のクラスでなく指定属性値で適用しているよ</span>
<a rel="copyright" href="http://www.aaa.ne.jp/"> aaa</a>
<html lang="en">～～～</html>

例、セレクタに疑似クラス

疑似クラスとは、文書中に実在しない性質に着目してスタイルを宣言するための手段です。

----------CSS2 ソース------------------------------------------------
a:link {        /* 未訪のリンク  */
    color: red;
}
a:visited { /* 既訪のリンク  */
    color: blue;
}
a:hover {   /* ユーザが指し示している */
    color: yellow;
}
a:active {  /* 動作中のリンク */
    color: lime;
}
a:focus {   /* 選択された時のリンク*/
    color: blue;
}
p:first-child { /* 指定された要素内での最初に出現した子要素に適用*/
    color: blue;
}
html:lang(en) {/*　言語でいろいろ出来るらしい...　*/
    color : red 
}

例、セレクタに疑似要素

疑似要素とは、文書中に規則性を持つもので、あえてマークアップしなくてもよく、自動処理が望ましいもの。

----------CSS2 ソース------------------------------------------------
p:first-line {      /* ブロックレベル要素の一行目にスタイル適用 */
    text-transform: uppercase
}
p:first-letter {    /* ブロックレベル要素の先頭一文字にスタイル適用 */
    font-size: 200%;
    font-style: italic;
    font-weight: bold;
    float: left
}
q {
    quotes: "『" "』"
}
q:before {  /* 要素の直前にスタイル適用　*/
    content: open-quote
}
q:after {   /* 要素の直後にスタイル適用　*/
    content: close-quote
}

例、セレクタに子孫セレクタ

セレクタをスペースで区切って２つ並べると子孫セレクタになります。
これは、左側の要素内にある右側の要素すべてにスタイルが適用されます。

----------CSS2 ソース------------------------------------------------
h1 em{
    font-weight: bold;
}

例、セレクタに子供セレクタ

セレクタを「>」で区切って２つ並べると子供セレクタになります。
これは、左側の要素内にある右側の子要素にスタイルが適用されます。

----------CSS2 ソース------------------------------------------------
body > p{
    text-align:center;
}

例、セレクタに隣接セレクタ

セレクタを「+」で区切って２つ並べると隣接セレクタになります。
これは、左側の要素と右側の要素が同じ親を持ち、左側の要素の直後の右側の要素に適用されます。

----------CSS2 ソース------------------------------------------------
h1 + h2{
    color:red;
}

例、セレクタに複数セレクタ

セレクタを「,」で区切って２つ以上並べると複数セレクタになります。
これは、複数のセレクタに対して一度に同じスタイルを設定できます。

----------CSS2 ソース------------------------------------------------
h1 , h2{
    color:red;
}

◆ 要素の属性による適用

各要素のstyle属性を使用して適用します。
しかし、この適用はお薦めできません。HTML文書内は、できるだけ文書構造を明確にすべきで、このような文書構造に関係のない属性は、本来不要と思われます。ですので、なるべくstyle要素でのスタイル適用をお薦めします。

<任意のタグ style="プロパティ:値">・・・・</任意のタグ>

この場合は、スタイルシートのtype属性(type="text/css")を指定できませんので、meta要素を使って指定します。

<meta http-equiv="Content-Style-Type" content="text/css">

例

　　<h1 style="color:red;text-align:center">AAAAAA</h1>
　　<p style="font-size:10pt;font-weight:bold">BBBBB</p>

◆ カスケーディング

上記のように、いろいろな適用方法があり、ある文書要素が同じプロパティで異なるスタイル指定を得ることがあります。このような事をカスケーディングといい、以下のようなルールになっています。

局所的なスタイルが大局的なスタイルに優先する。
同じ優先順位のスタイルが競合したら、あとから読み込んだものを採用する。
importantキーワードのあるものが優先される。

◆ スタイルの優先順位

今までのスタイル適用方法は、htmlファイルの製作者スタイルシートでの適用で、実は、この他にブラウザのデフォルトスタイルシートとユーザが任意に予めブラウザへ設定させるユーザスタイルシートがあり適用の優先順位は以下のようになります。

製作者スタイルシート
ユーザスタイルシート
デフォルトタイルシート

尚、IEでのユーザスタイルシート適用方法は、ツール(T)->インターネットオプション(O)->ユーザ補助(E)でスタイルシートファイル(xxx.css)を指定します。

で、ユーザスタイルシートを指定したとしても、製作者スタイルシートが優先されるので、負けてしまいます。しかし、importantキーワードを指定することにより、逆転勝ちすることができます。しかも、製作者スタイルシートでimportant指定しても、ユーザスタイルシートのimportant指定の方が優先されます。

h1{
    color:red !important;
}

◆ スタイルの継承

親要素に指定されたプロパティは、だいたいは、子要素に継承される場合が多いです。（まぁ試してみるとか...）

しかし、継承されない場合は、「inherit」プロパティを指定することにより、強制的に値を継承させることができます。

◆ クラス名のつけ方

クラス名の名前ですが、これは、論理マークアップと同様な感じで、物理的な名前はやめ、意味のある名前にしましょう。

◆ おわりに

とにかく、スタイルシートマスターの道は、実践での経験をつむしかないです。お互い頑張りましょう！

ご質問に関しては、WEB相談室へ投稿をお願いいたします。

スタイルなCSSの基礎講座