Cascading Style Sheets（カスケーディングスタイルシート）とは何か・何ができるのかということから、基本的な使い方を説明します。
多種多様な User Agnet（ユーザーエージェント）がアクセス（支障なく情報を取得）できる、アクセシビリティの高いサイト作りには CSS（Cascading Style Sheets：カスケーディングスタイルシート）は欠かせません。CSS を使うことで、(X)HTML は本来の情報伝達のみの役割に徹することができ、さらにウェブページの見栄えを整えるのに役立ちます。Cascading Style Sheets の Cascade とは、順序立てられたリストという意味で、スタイルシートが段階的に継承していく働きを表しており、UA は制作者スタイルシート、ユーザースタイルシート、デフォルトスタイルシートの3つの中から好みのスタイルを自由に選択できるのが特徴です（スタイルを選べない UA もある）。
まず、スタイルシート（Style Sheets）とは HTML や XHTML のようにウェブ上で使われている言語に限ったものではなく、PC（パソコン）を利用している方であれば、普段から何気なくスタイルシートにふれていることが多いはずです。たとえば、Microsoft Word, 一太郎などのワープロソフトでフォントの種類や文字の大きさ、色、行間の幅の指定など様々な文書の見栄え（レイアウト）に関する情報を定義しているのがスタイルシートなのです。
ウェブ上で使われるスタイルシートとは、主に (X)HTML文書に対しての見栄え（レイアウト）を定義することを指します。スタイルシートには、いくつかのスタイル言語があり、(X)HTML文書の見栄えを指定するためのスタイル言語には、各視覚環境の UA の対応状況などから CSS が一般的に使用されています。つまり、CSS もいくつかのスタイルシートの中の一種でしかなく、他にもウェブ上で使われているスタイル言語に XSL（eXtensible Stylesheet Language）などがあります。CSS が (X)HTML文書に対しての見栄え（レイアウト）を定義するのに対し、XSL は XML文書に対しての見栄え（レイアウト）を定義します。そして、本稿（CSSガイド）で扱うのが (X)HTML文書に対しての見栄え（レイアウト）を定義するスタイルシートである CSS というわけです。
では、CSS では一体何ができるのでしょうか。(X)HTML には文章を 「見出し」「段落」「リスト」「表」のように各部分を構造化する特徴がありました。これに対して、(X)HTML文書の見栄えを定義する CSS は、これら (X)HTML によって構造付けされた「見出し」なら「見出し」の構造に対してレイアウトを定義するのが特徴です。たとえば、 (X)HTML で見出しと構造化した部分に、さらに文字の色や形などを装飾するための指定があると、見出しとして定義された部分に装飾に関する不明確な情報が余計に混じってしまうことになり、情報伝達の妨げとなります。そこで CSS は、従来の HTML が担ってきた情報伝達と見た目を整える2つの作業の内、見た目を整える作業については、CSS が分担することによって、(X)HTML が効率的に情報交換を行えるように、(X)HTML文書が本来の役割とは違う見た目を達成するのに役立ちます。
つまり、CSS は (X)HTML文書のコンテンツや論理構造と表現（見栄え）とを分離させることで、さまざまなメリットを生みます。(X)HTML はシンプルなまま、(X)HTML 本来の役割に徹することができ、さらに一度定義したスタイル情報は複数の (X)HTML文書で共有させることができるように設計されているので、サイト全体のデザインに一貫性を持たせるができ、メンテナンス性が大幅に向上します。CSS による文書のプレゼンテーション手法を習得すれば、あなたのウェブサイトはより鮮やかに、そしてより効率的な情報交換が行えるようになるのです。
CSS により定義したスタイル情報を (X)HTML文書に適用する方法は、主に次の3通りの方法に別れます。
style属性を追加して直接スタイル情報を指定するhead要素内に style要素を使ってスタイル情報を記述するlink要素で (X)HTML文書とスタイルシートのファイルとを連結させるこれら3通りの方法のうち、もっとも簡単なのは、1番目の style属性で直接スタイル情報を指定する方法でしょう。この方法はウェブページの作成に慣れていない制作者ほど、この方法を使っていることが多いはずです。しかし、最も CSS のメリットを活かすことができるのは、3番目のスタイル情報を記述したファイルを別に作成し、link要素で (X)HTML文書とスタイルシートのファイルとを連結させる方法です。この方法が最も難しそうで手間のかかりそうですが、何故このような方法を使う必要があるのかを明確にし、そのメリットを説明しておかないことには、CSS 専用のファイルを作成して、わざわざ別ルートからスタイル情報を参照させる面倒なことをする必要性があるのかを理解できないことと思います。
1番目、2番目の方法は当該文書に直接スタイル情報を記述するので、そのスタイル情報が反映される有効範囲は該文書のみです。これに対して、CSS のルールセットを記述したファイルを外部から参照させる方法は、全ての (X)HTML文書に共有させることができるので、サイト全体の表現を簡単に統一することができます。さらに、スタイル情報を定義しているファイルの内容の一部を変更するだけで、サイト内の全ての (X)HTML文書のデザインを同時に全て変更することが可能となるので、作業の効率性・メンテナンス性が飛躍的に向上します。外部から参照させる手法のメリットはこれだけではありません。
ウェブページ作成の心得みたいなものに「KISSを大切にせよ」という一種の諺（格言）があります。"KISS" とは「Keep It Simple,Stupid」、または「Keep It Small and Simple」のそれぞれ頭文字をとったもので、どちらも「ウェブページは、シンプルにすべし」ということを意味します。外部から参照する方法は、他の2つの方法とは違って (X)HTML文書自体に直接スタイル情報を記述しているわけではないので、(X)HTML文書はシンプルな状態のままで、装飾を施すことができます。つまり、シンプルな (X)HTML文書はファイル自体の容量が軽く、他の2つの方法に比べてもページのレンダリングが速くなります。さらに CSS の機構が提案されるよりも以前に HTML文書に対するスタイルシートは link要素で参照する方法が提案されていたことから、スタイルシートを link要素で提供することで最適化されるように CSS の仕様も UA の実装も設計されています。
CSSファイルとは、(X)HTML文書内の各要素を目印（セレクタ）にスタイル宣言のルールセットを記述したファイルのことを指します。スタイル宣言のルールセットは、Windows に付属しているメモ帳などのテキストエディタを利用して記述することができます。たとえば、(X)HTML文書において見出しとして定義された h1要素に対して、レイアウトを施したい場合は次のような形式でスタイル情報を記述します。
h1 {
text-align : center ; border-width : 1px 4em 0em 4em ;
border-style : solid ; border-color : navy ;
}
これは h1要素内のテキストを中央揃え（"text-align: center ;"）にして、さらに枠線の装飾（"border-width : 1px 4em 0em 4em ; border-style :solid ; border-color : #000080 ;"）を施しています。こうしたルールセットをいくつも記述して、CSSファイルとして保存します。そして、このようにルールセットがいくつも並べられるスタイルシートであることから順序立てられたリストとして CSS の設計者は Cascade と名付けられたようです。なお、CSSファイルを保存する際には、(X)HTML文書であれば一般的に「.html｣、または｢.htm」といった拡張子をつけるように、 CSSファイルの場合は「.css」の拡張子をつけて保存するのが一般的です（*拡張子は httpd.conf や .htaccess に設定されている MIMEタイプに依りますが、指定の拡張子に対する MIMEタイプを定義することでどのような拡張子でも CSSファイルとして利用できます）。
(X)HTML文書で CSS を使う場合には、ウェブブラウザがページを表示する際や検索エンジンのロボットがウェブページの情報を収集する際など、これらの UA が誤作動を起こさないように head要素内には、UA に対してあらかじめ 「この (X)HTML文書では CSS を使用しています」といったお知らせをして、スタイル情報を正しく解釈できるように CSS 専用の MIMEタイプを設定しておきます（XHTML1.1 以降の規格では、この meta http-equiv宣言は HTML互換のため設定すること自体が認められていません）。CSS の MIMEタイプは "text/css" です。
<meta http-equiv="Content-Style-Type" content="text/css">
次に、link要素に対して href属性でウェブサーバー内における CSSファイルの所在を URI で示します。 この指定が行われた (X)HTML文書は link要素で指定された CSSファイルを参照することができるようになり、CSS に適合する UA であれば、その CSSファイルのスタイル情報を解析し、(X)HTML で構造化されている各要素に対して、それぞれのスタイル宣言に応じたレイアウトを施した状態でレンダリング（描画）します。
<link rel="stylesheet" href="sample.css" type="text/css">
link要素の rel="stylesheet" の部分が外部の CSSファイルの参照を示し、続く href="sample.css" の部分が CSSファイルである "sample.css" を参照するように、その所在を示しており、type="text/css" が CSS用の MIMEタイプを示したものです。なお、この link要素の指定を複数記述することでひとつの (X)HTML文書に対して複数の CSSファイルを参照させることも可能です。
http://w3g.jp/css/guide/outline直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!