CSSの基礎知識

スタイルシート（Cascading Style Sheets）は、ウェブページのデザイン（見栄え）を定義・記述するための技法である。HTML文書の内容を「構造」と「見栄え」に分けることで、効率的なウェブ管理ができる。

HTML　→　ウェブページの構造（内容）を記述するもの
ＣＳＳ　→　ウェブページのデザイン（見栄え）を記述するもの

スタイルシートを利用するメリット

・文字や画像の配置、行間などを細かく設定することができる。
・ページの内容とデザイン（見栄え）を、別々に管理することができる。
・デザインの変更を一括して行えるため、ページの管理が楽になる。

２．ボックス（ブロック）という考え方

ページにデザインを適用する場合は、ボックス（ブロック、かたまり）という単位で考えるとよい。ある範囲にボックスを作りたい場合は、下図のように、<div>タグを使う。

見出しのボックス

文章のボックス
・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・

divタグを使って、全体をボックスにする例。

　　<div>
　　 <h2>見出しのボックス</h2>
　　 <p>文章のボックス　・・・・・　</p>
　　</div>

HTMLのタグは、ブロック要素とインライン要素に分けられる。

ブロック要素　　→　タグの前後に改行が入る。ブロックを形成するタグのこと。
インライン要素　→　タグの前後に改行が入らない。要素は行の一部となる。

ブロック要素となるタグ

<H1>～<H6>、<P>、<BLOCKQUOTE>、<UL>、<OL>、<DIV> など

インライン要素となるタグ

<B>、<I>、<A>、<IMG>、<FONT>、<SPAN> など

３．スタイルシートの書き方

（１）スタイルシートを書く場所

ヘッダ部に <style> ～ </style> タグを置き、そこにスタイルを設定する。その際、CSS非対応のブラウザが、スタイル定義を表示してしまうことを避けるため、を入れてコメント化しておくとよい。

<html> <head>
<title>CSSの基礎知識 </title>
<style type="text/css">

</style>
</head>

（２）タグにスタイルシートを設定する方法

特定のタグに対して、スタイルを設定する場合は次のように書く。
　　（タグ名）　｛（属性）：（値）；　（属性）：（値）；　・・・　}　

　（例）見出し（h2）の文字を赤、背景色を水色、段落(p)の文字サイズを90%、行間を150%に設定する。　　

（３）クラスを設定してスタイルを適用する方法

タグの種類にかかわらず、同一のデザインを適用したい場合は、クラスによる指定を行う。クラスを指定する場合は、半角のピリオドに続けてクラス名を書く。
　　．（クラス名）　｛（属性）：（値）；　（属性）：（値）；　・・・　}　

　（例）　「menu」クラスを指定した文字に対して、文字色を青に設定する。　　

（４）タグとクラスを組み合わせる方法

(ａ) 同一のタグの中で、クラス指定のあるものだけにデザインを適用する。
　　（タグ名）．（クラス名）　｛（属性）：（値）；　（属性）：（値）；　・・・　}　

　（例）　<p>タグを使用している段落の中で、「menu」というクラスのみにスタイル（青い文字）を設定する。　　

(ｂ) クラス内にある任意のタグに対してデザインを適用する。
　　　．（クラス名）（半角スペース）（タグ名）　｛（属性）：（値）；　（属性）：（値）；　・・・　}　

　（例）　「menu」クラスの中にある<h2>タグのみにスタイル（青い文字）を設定する。　　

（５）スタイルシートを別ファイルとして設定する方法

複数のページに同一のスタイルを設定するような場合、スタイルシートの定義部分を別ファイルから読み込むことができる。指定方法は、次のようにヘッダ部の中に<link>タグを入れる。このとき、ファイル名の拡張子は「css」にしておく。

<html>
<head><title>Style Sheet Test</title>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>

「xxx.css」ファイルの中には、スタイルシートの定義のみを入れる。<style></style>は含めなくてよい。

１．スタイルシート（CSS）とは