スタイルシートの紹介

スタイルシートって，なに?

スタイルシートは，HTML文書（いわいるホームページ）のルックス（表示結果）を調整するための仕組みです。スタイルシートを記述し，それをHTML文書に付け加えるだけで，HTML文書の表示結果は劇的に変化します。そんな例を，ひとつご紹介しましょう。

• シートなし
• シート例1
• シート例2

CSSで何が出来るの?

「カスケーディング・スタイルシート（CSS）」は，W3Cが推奨しているHTML用のスタイルシート規格です。レベル1のCSS（CSS1）だけでも，文書中の任意の部分に関して，以下のプロパティ（property）ごとにスタイルを調整できます。

◆フォント系

フォントファミリー，サイズ，太さ，斜体，スモールキャピタル，行幅

◆色と背景効果系

前景色（文字色），背景色，背景画像の調整

◆テキスト属性系

単語間隔，文字間隔，下線など，垂直位置（上付き下付き），水平位置そろえ（右そろえ，左そろえ），大文字小文字，行頭インデント

◆ボックス系

マージン・パディング，ボーダー（枠線）

◆表示位置調整

表示の横幅，縦幅，フロートと回り込み，回り込みの解除

◆その他の表示調整系

表示形式，空白の取り扱い，リストマークの調整

スタイルシートって難しい?

スタイルシートは，簡単な英単語だけでスタイルを指示する，大変直感的なものです。マージンなら「margin:1cm」などと書くだけ。学習は容易です。

スタイルシート記述例

Netscape NavigatorやInternet Explorerの標準的な見栄え設定では，段落（P要素）の開始／終了は1行分の余白で表現され，行間はぴっちり詰まっています。また，強調部分（STRONG要素）は太字で表現されます。

ところが，スタイルシートを用いれば，次のように変更できます。ほんの少しの変更ですが，文章の「締まり具合」がずいぶん違うと思いませんか?

ここで使ったシートは，次のようにカンタンなものです。

−　−　−　−　−　−　−　−　−　−　−　−　−　
P{
	text-indent: 1em; /*行頭に1文字分の字下げ*/
	line-height: 1.5em; /*行幅は1.5文字分*/
	margin-bottom: 0em; /*次の段落との余白は取らない*/
}
STRONG{	/*白黒反転*/
	color: white;
	background: black;
}
−　−　−　−　−　−　−　−　−　−　−　−　−　

本書の位置づけ

本書は，CSSを用いたHTML文書のスタイル調整を解説するものです。CSSの仕様を完全解説するのはもちろんのこととして，スタイル指定の考え方にまで言及します。

ただし，本書は対象読者を「すでにWWWに馴染んでいる人」「テキストファイル，テキストエディタなどを扱える人」を対象にしています。できれば，HTML文書を記述したことがある方が望ましいです。そのことにはご注意ください。

内容紹介

1章：introduction to CSS with HTML

1章では，CSSの簡単な紹介とともに，HTML発達史とWWW発達にともなうHTMLの混乱の歴史を紹介します。HTMLに対するCSSの位置づけやCSSの重要性について，順を追って説明しています。

◆2章：tutorial of HTML as SGML

2章では，HTML文書の本来の役割−−文書の構成を明示すること−−に関して，いったんSGMLに立ち返って解説します。「タグとは」「属性とは」などの表面的な部分ではなく，「文章内容を伝達するために，何故SGMLが必要なのか」「HTMLは，SGMLの利点をどのように継承しているのか」などを理解できるように解説します。これによって，自然にHTML文書の記述法方を飲み込めるようになるでしょう。

◆3章：some more HTML

3章では，もう少しだけHTMLに関する取り決めを説明します。

◆4章：CSS syntax in detail

4章では，CSSによるスタイルシート記述の文法的な側面を解説します。

◆5章：CSS properties for visual media in detail

5章では，CSSが規定する個々のプロパティのうち，中心的に用いられるvisualメディア用のプロパティを解説します。

◆6章：road to mastering CSS

6章では，実際にスタイルシートを構築する上で重要になる概念や，無理の無いシートにするための「考え方」を紹介します。

◆7章：new feature in CSS2

7章では，新たにCSS2で導入された「印刷」「TABLE」「音声再生」などのためのプロパティを解説します。

• indexに戻る