スタイルシート(Cascading Style Sheets)は、ウェブページのデザイン(見栄え)を定義・記述するための技法である。HTML文書の内容を「構造」と「見栄え」に分けることで、効率的なウェブ管理ができる。
HTML → ウェブページの構造(内容)を記述するもの
CSS → ウェブページのデザイン(見栄え)を記述するもの
ページにデザインを適用する場合は、ボックス(ブロック、かたまり)という単位で考えるとよい。 ある範囲にボックスを作りたい場合は、下図のように、<div>タグを使う。
HTMLのタグは、ブロック要素とインライン要素に分けられる。
ブロック要素 → タグの前後に改行が入る。ブロックを形成するタグのこと。
インライン要素 → タグの前後に改行が入らない。要素は行の一部となる。
ヘッダ部に <style> ~ </style> タグを置き、そこにスタイルを設定する。
<head>
<title>CSSの基礎知識</title>
<style>
h2 { color : red ; background-color :
#ccffff ; }
p { font-size : 90% ; line-height : 150% ; }
</style>
</head>
特定の要素(タグ)に対して、スタイルを設定する場合は次のように書く。
(要素名) { (属性):(値); (属性):(値); ・・・ }
(例)見出し(h2)の文字を赤、背景色を水色、段落(p)の文字サイズを90%、行間を150%に設定する。
<style>
h2 { color : red ; background-color :
#ccffff ; }
p { font-size : 90% ; line-height : 150% ; }
</style>
<body>
<h2>CSSの基礎知識</h2>
<p>スタイルシートは、ウェブページのデザインを定義、記述するための・・・</p>
</body>
要素(タグ)の種類にかかわらず、同一のデザインを適用したい場合は、クラスによる指定を行う。クラスを指定する場合は、半角のピリオドに続けてクラス名を書く。
.(クラス名) { (属性):(値); (属性):(値); ・・・ }
(例) 「menu」クラスを指定した文字に対して、文字色を青に設定する。
<style>
.menu { color :blue ; }
</style>
<body>
<h4 class="menu">利用者処理メニュー</h4>
<div class="menu">操作マニュアルの表示</div>
</body>
(a) 同一の要素(タグ)の中で、クラス指定のあるものだけにデザインを適用する。
(要素名).(クラス名) { (属性):(値); (属性):(値); ・・・ }
(例) <p>タグを使用している段落の中で、「menu」というクラスのみにスタイル(青い文字)を設定する。
<style>
p.menu { color :blue ; }
</style>
<body>
<p class="menu">段落1 ここにデザインが設定される</p>
<p>段落2 (ここには設定されない)</p>
</body>
(b) クラス内にある任意の要素(タグ)に対してデザインを適用する。
.(クラス名)(半角スペース)(タグ名) { (属性):(値); (属性):(値); ・・・ }
(例) 「menu」クラスの中にある<h2>タグのみにスタイル(青い文字)を設定する。
<style>
.menu h2 { color :blue ; }
</style>
<div class="menu">
<h2>この見出しにデザインが適用される</h2>
<p>・・・ 段落 ・・・</p>
</div>
<h2>この見出しには適用されない</h2>
一つのページの中で一箇所だけスタイルを設定する場合に指定する。指定するID名は文書内で「唯一」となる点に注意する。ID属性を指定する場合は、半角のシャープ(#)に続けてID名を書く。
#(ID名) { (属性):(値); (属性):(値); ・・・ }
(例) ID「mainContent」を指定したブロックに対して、マージンを指定する。
<style>
#mainContent { margin-top: 20px ; }
</style>
<body>
<div id="mainContent">
<h1>コンテンツ見出し</h1>
<p>・・・ 本文 ・・・</p>
</div>
</body>
上記(4)のクラスと同様に、ID属性と要素を組み合わせた指定も可能である。
(例) ID「navi」の中にある<h2>タグにスタイルを適用する。
<style>
#navi h2 { line-height: 120% ; }
</style>
<div id="navi">
<h2>ナビメニュー</h2>
<p>・・・ 本文 ・・・</p>
</div>
<h2>この見出しには適用されない</h2>
複数のページに同一のスタイルを設定するような場合、スタイルシートの定義部分を別ファイルから読み込むことができる。指定方法は、次のようにヘッダ部の中に<link>タグを入れる。なお、指定するファイル名の拡張子は「css」にしておく。
<head>
<title>Style Sheet Test</title>
<link rel="stylesheet" href="xxx.css">
</head>
「xxx.css」ファイルの中には、スタイルシートの定義のみを入れる。<style>や</style>を書かない点に注意。