コンピュータリテラシー目次

スタイルシート：Webページの見栄えを決める

HTMLでWebページを書く場合、文書の内容と論理構造のみを書くべきであり、 文字の色や大きさ，配置などの「見栄え」を決めるには スタイルシートという仕組みを使うのが正しいやり方である。

論理構造はHTML、見栄えはスタイルシートと別々に分けて書くことで、 文書の構造と、文書の表現を明確に分けることができる。以下の例を見よ。

スタイルシート未使用	スタイルシート使用(その1)	スタイルシート使用(その2)

この3つの例では、HTMLの内容は全く同じである。しかし、1つめは スタイルシートを使っていない。2つめと3つめは、異なるスタイルシートを使っている。 このように異なるスタイルシートを使うことで、文書の構造は変えずに見栄えを変更できるわけである。

古くからWebページを書いている人は、HTML内に文字の色や大きさなどの見栄えを今でも書く者がいるが、現在ではこれは時代遅れで不適切な方法となっている。 見栄えはHTMLとして書かずスタイルシートで記述するよう十分注意して欲しい。

スタイルシートの具体的な説明

• スタイルシートの基本
• スタイルシートの簡単な利用
• 色見本

参考：スタイルシートの記述方法

1. インラインで指定する方式
   例: <h1 style="color:red">aaaa</h1>
2. HTMLファイル内にまとめて設定する方式
   例: <style type="text/css"> ..... </style>
3. 外部スタイルファイルを読み込む方式
   例: ファイル style.css にスタイルシートの設定を書いて，<link ... > で読み込む．

コンピュータリテラシー目次