■スタイルシート(CSS)とは？
カスケーディングスタイルシート(CSS)はHTMLと併用してページの見栄えを向上させます。
HTMLから見栄えに関する記述をなくし、代わりにCSSから見栄えに関する指定を
読み込ませることで、ページ更新の手間を少なくすることができます。
（見栄えとは文字、背景、ボーダー等の色や大きさのこと）
HTMLだけでも見栄えの変更はできますが、すべてのページを書き換えるのは大変です。
CSSを利用すれば、CSS記述を書き換えるだけですべてのページの見栄えを変更できます。
また、CSSでしかできない見栄えの変更も可能です。
■導入方法
★CSSファイルをHTMLに読み込む
<LINK>タグで、CSSを記述したファイルをHTMLに読み込みます。
<LINK>を<HEAD>〜</HEAD>内に記述。
この方法なら、CSSの記述を変えるだけで複数ページの見栄えを変更できます。
記述例(sub.html)
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<LINK rel="stylesheet" type="text/css" href="subpage.css">
</HEAD>
<BODY>
<H1>見出し</H1>
<P>段落</P>
</BODY>
</HTML>
記述例(subpage.css)
/* コメント */
H1{ color:blue}
P{ color:red}
ブラウザで表示
★HTMLのHEAD内に記述
<HEAD>〜</HEAD>内に<STYLE>タグを記述します。
ただし更新するときに各ページの書き換えが必要になります。
また、スタイルシートに対応していないブラウザで表示させるとH1{ color:blue;}等が
そのまま表示されてしまうので<!-- と -->で表示されるのを防いでいます。
記述例
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis">
<STYLE Type="text/css">
<!--
H1{ color:blue}
P{ color:red}
-->
</STYLE>
</HEAD>
<BODY>
<H1>見出し</H1>
<P>段落</P>
</BODY>
</HTML>
ブラウザで表示
★HTMLタグにstyle属性を記述
タグ内にstyle属性を記述する方法です。
使用箇所が少ない時はいいですが、使用する箇所が多い場合更新が大変です。
記述例
<H3 style="color:green">見出し</H3>
ブラウザで表示
見出し
■スタイルシートの定義
★セレクタとプロパティ
スタイルシートの簡単な指定方法は以下のようになっています。
セレクタ{プロパティ:値;}
「セレクタ」にはHTML要素名のタグや、クラス属性値・ID属性値が入ります。
「プロパティ」は、セレクタに対して、どんな項目や値を指定するのか・・というのを記述します。
これらを<STYLE>タグ内やCSSファイルに記述することで、見栄えを変えることができます。
以下はタグ<H1>に青色を指定した例で
<H1>〜</H1>で囲まれた文字は青色になります。
同様に<P>に囲まれた部分を緑色にすることができます。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
H1{color:blue}
P{color:green}
--- HTMLファイルの記述 ---
<H1>もじ</H1>
<P>文字</P>
★クラス属性値
クラス属性値は「
.hoge」のように好きな名前を付けることができ
タグ内に
class="hoge" と記述することで、タグ内の見栄えを変えることができます。
また「
P.huga」というふうに、タグとクラス属性値を指定した場合
<P>タグ内でのみ
.hugaが有効となります。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
.hoge{color:red} /* 文字色を赤に */
P.huga{font-weight: bold} /* 太字に */
--- HTMLファイルの記述 ---
<DIV
class="hoge">ほげ</DIV>
<P
class="huga">ふが</P>
<DIV
class="huga">ふが？</DIV>
ブラウザで表示
★ID属性値
ID属性値は「
#hoge」のように頭に#をつけて指定することができ
タグ内に
ID="hoge" と記述することで、タグ内の見栄えを変えることができます。
また「
P#huga」というふうに、タグとクラス属性値を指定した場合
<P>タグ内でのみ
#hugaが有効となります。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
#hoge{color:maroon} /* 文字色をmaroonに */
P#huga{font-weight: bold} /* 太字に */
--- HTMLファイルの記述 ---
<DIV
ID="hoge">ほげ</DIV>
<P
ID="huga">ふが</P>
<DIV
ID="huga">ふが？</DIV>
ブラウザで表示
さて、クラス属性値とID属性値にあまり違いはみられませんが
ID属性値は１ページに１回しか使ってはいけないことになっています。
<DIV>タグ等でそのIDを２回使うと、CGIやアクセス解析などで
不具合が生じる場合があります。
同じページで複数使う場合はクラス属性値で指定したほうがいいでしょう。
★コメント
スタイルシート内にメモ等を残したい場合 /* 〜 */ 内に記述します。
コメント部分は無視されます。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
#hoge{color:maroon} /* 文字色をmaroonに */
P#huga{font-weight: bold} /* 太字に */
★グループ化
セレクタやプロパティは複数指定が可能です。
プロパティを複数のセレクタに対して適用するには、セレクタを,（カンマ）で区切ります。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
H1,H3,P{color:blue} /* H1 H3 Pタグで挟んだ部分を青色にします */
.ac,#ad,P.ae{color: olive}
/* オリーブ色に */
--- HTMLの記述 ---
<H1>あいう</H1>
<H3>かきく</H3>
<P>さしす</P>
<DIV class=".ac">たちつてと</DIV>
<DIV ID="ad">なにぬねの</DIV>
<P class="ae">はひふへほ</P>
ブラウザで表示
あいう
かきく
さしす
たちつてと
なにぬねの
はひふへほ
以下はセレクタに対して、複数のプロパティを適用する例です。
複数指定する場合はプロパティを;（セミコロン）で区切ります。
記述例(CSS使用記述は省略してます)
--- CSSの記述 ---
/* Pタグで挟んだ部分を緑色と太字にします */
P{
color:green;
font-weight: bold
}
/* cc #cd をグレーと斜体にします */
.cc,#cd{
color:gray;
font-style: italic;
}
--- <BODY>〜</BODY>の記述 ---
<P>ＡＢＣＤＥＦＧ</P>
<DIV class="cc">ABCDEFC</DIV>
<DIV ID="cd">かきくけこ</DIV>
ブラウザで表示
★継承・親要素と子要素
<P>と<U>にスタイル要素が適用されているとします。
以下のように<P>〜</P>内に<U>を入れた場合、<P>の
スタイル要素が<U>タグ内にも適用されます。
これが「継承」です。
--- CSSの記述 ---
P{
color:blue;
font-weight: bold
}
U{color:orange;}
--- HTMLの記述 ---
<P>これは<U>エンターキー</U>です</P>
ブラウザで表示
<P>のスタイル(太字)が<U>にも引き継がれます。
これはHTMLが以下のようなツリー構造になっているためで
上の階層にある要素が下の要素にも継承されます。
←上の階層
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<DIV>
<P>
<U></U>
</P>
</DIV>
</BODY>
</HTML>
下の階層→
<U>〜</U>から見た、ひとつ上の階層の<P>〜</P>は「
親要素」であり
逆に<P>〜</P>から見た、ひとつ下の階層の<U>〜</U>は「
子要素」です。
親要素<P>のスタイル(太字)が、子要素である<U>に引き継がれています。
BODYタグにスタイルを適用し、別のスタイル適用タグで文字をはさんだ場合も
BODYタグのスタイル継承が行われます。
--- CSSの記述 ---
BODY{
font-size:12pt;
color: maroon
}
S{color: gray}
--- HTMLの記述 ---
<BODY>
○○製LANアダプタ
<S>1000円</S> 880円
</BODY>
ブラウザで表示
○○製LANアダプタ
1000円 880円
★文脈セレクタ
文脈セレクタは、あるセレクタの組み合わせにのみ
スタイルを適用する記述方法です。
上記の「継承」でのみスタイルを変更し、それ以外は変更したくない
場合に便利です。
文脈セレクタの記述は、セレクタ同士を半角スペースで区切ります。
記述例
--- CSSの記述 ---
P EM{
font-size:15pt;
font-weight: bold;
color:green
}
--- HTMLの記述 ---
<P>これを<EM>ハードディスクドライブ</EM>といいます。</P>
<EM>CDドライブ</EM>
ブラウザで表示
これをハードディスクドライブといいます。
CDドライブ
ID、クラスセレクタにも利用できます。
グループ化されているものも可能。
記述例
--- CSSの記述 ---
DIV U.da{
font-size:15pt;
}
DIV U#db{
font-weight: bold;
color:blue
}
H3 S#dc,P S.de{
color: green
}
--- HTMLの記述 ---
<DIV>これは<U class="da">ハンバーグ</U>です。</DIV>
<DIV>これは<U ID="db">スパゲッティ</U>です。</DIV>
<H3>つみき<S ID="dc">ライオン</S>けんだま</H3>
<P>飛行機<S class="de">野球</S>バス</P>
ブラウザで表示
これはハンバーグです。
これはスパゲッティです。
つみきライオンけんだま
飛行機野球バス
