スタイルシートの基本

スタイルシートの基本構造についての解説です。大変重要なのでぜひ覚えてください

▼スタイルシートの構造

・セレクタ { 属性 : 値 ;}
　これがスタイルシートの基本構造です。「○の●を△にする」という感じの意味です
　つまり「セレクタ」に対して「属性」を「値」の分だけ効果を与えるようにする、ということです

・「セレクタ」とはスタイルの設定対象のことをいいます
　つまり効果を与える範囲のことです。セレクタには単独のタグはもちろん、タグの範囲、タグの組み合わせ、
　または段落の一行目や一文字目といったものも指定できます

・「属性」はセレクタの何に対してスタイルを設定するかを決める部分です
　例えば、「font-size」という属性はセレクタの範囲の文字の大きさを変える属性です

・「値」とは属性に対してどのようなスタイルを設定するかを指定する部分です
　「font-size」属性ではどれくらいの文字サイズにするかは値によって決めます

・例えば、「　H1 { color: #0000ff ; }　」というスタイルを設定したとしたら、
　「H1タグの範囲の文字の色を青にする」という効果を与えることができます
　この場合、「H1」がセレクタ、「color」が属性、「#0000ff」が値となります

▼スタイルシートの書き方

・基本的には　セレクタ { 属性 : 値 ; }　と書きます(インラインでの設定では「セレクタ」や「 { } 」はありません)
　属性に対応する値を半角コロン「 : 」で区切ります(タグでのイコール「 = 」と同じことです)
　値の直後のセミコロン「 ; 」は複数の属性を設定する場合に区切るために使います
　属性が一つの場合は書かなくても良いのですが、書くようにしておいたほうが良いと思います
　セレクタや属性の間のスペースは開けても開けなくても良いです

記述方法

スタイルシートの記述方法には基本的に次の３通りがあります

・「CSSファイル」　cssファイル( .css)にスタイルを記述して、それをhtmlから読み込む方法
・「html内への埋め込み」　htmlに直接記述する方法
・「インラインでの埋め込み」　特定のタグに直接記述する方法

同時に複数の方法で記述することもできます。その場合には優先順位があります
それぞれの特徴や詳しいとは以下で説明していきます

▼CSSファイル

・「CSSファイル」という外部のファイルにスタイルの設定をして、それをhtmlファイルに読み込ませる方法です

・CSSファイルの拡張子は「.css」で、このファイルにはセレクタと属性、値といったスタイルの基本だけを書きます

・これをhtmlに読み込ませるためには、htmlのHEAD内に以下のように記述しておきます
<LINK REL=STYLESHEET href="CSSファイルのURL" TYPE="text/css">

・複数のhtmlに同じCSSファイルを読み込むようにすれば、サイト全体のデザインの統一ができます

・記述の例

<html>
<HEAD>
<title></title>
<LINK REL=STYLESHEET href="CSSファイルのURL" TYPE="text/css">
</HEAD>
</html>

CSSファイルには以下のようにスタイルの設定だけを書きます

DIV {color:#ff0000;font-size:10pt;}
H1 {color:#0000ff;font-style:italic;}

このCSSファイルをすべてのページから読み込むようにすれば、
全てのページの「DIV」で囲まれた分は10ポイントのフォントサイズで色は赤、
全てのページの「H1」で囲まれた分は色は青で斜体になる、といったデザインの統一ができます

▼html内への埋め込み

・スタイルシートの設定ををhtmlにまとめて記述する方法です

・記述方法は、「HEAD」内に以下のように書きます
<STYLE TYPE="text/css">
ここにスタイルの設定を記述する
</STYLE>

・ページごとのスタイルを設定するときに使います

・このスタイルの記述方法の場合、スタイルシートに対応していないブラウザ対策として、
「STYLE」タグの前後を「コメントタグ(<!-- --)>」で囲むという方法がありますが、
現在ではわざわざこのようなことをする必要は少ないと考えられます

・記述の例

<html>
<HEAD>
<title></title>
<STYLE TYPE="text/css">
DIV {color:#ff0000;font-size:10pt;}
H1 {color:#0000ff;font-style:italic;}
</STYLE>
</HEAD>
</html>

▼インラインでの埋め込み

・スタイルを設定したいタグに直接記述する方法です

・この記述方法の場合、セレクタはありません

・上記二つの方法でスタイルを設定したファイル内において、別の効果を与えたい場合などに使います

・タグの中に直接スタイル属性として記述していきます

・記述の例

<H1 STYLE="color:#0000ff;font-style:italic;">スタイルを適用させたい部分</H1>

▼優先順位

・スタイルの記述方法には上記のように３つありますが、これらを１つのページに同時に使うこともできます
　その場合、同じ要素に対して複数の効果が設定されることもありますが、
　「インラインでの埋め込み」が最優先、次に「html内への埋め込み」が、そして「CSSファイル」と優先順位があります
　サイトの全体的なスタイルは「CSSファイル」で、ページごとのスタイルは「html内への埋め込み」、
　部分的な効果は「インラインでの埋め込み」というように使い分けるようにしましょう

・何よりも優先させたいスタイルには、「!important」をつけます。これは「インラインでの埋め込み」よりも優先されます。
　例えばCSSファイルで設定した基本スタイルとは違ったものをインラインで設定してしまうのを避けることができます
　記述の仕方は、　{font-size:10pt !important ; }といった感じです
　ただし現時点では、IE4.0以上でしか対応していません

▼CSSからCSSを読み込む

・これはスタイルシートにスタイルシートを読み込ませる方法です
　例えば、背景に関するCSS、ボックスに関するCSSを個別に作り、それぞれを一つのベースのCSSに読み込んで、
　さらにhtmlに適用させたりします。ベースのCSSに読み込ませるには、「@import url(読み込ませたいcssのURL);」とします
　巨大サイトの制作にはこれはかなり使えますが、残念ながらNNでは対応していません

[ → BACK ]