HOME > オンラインマニュアル
> ホームページ作成ガイド > CSS編 > スタイルシートの基礎知識
ホームページ作成ガイド
CSS編
スタイルシートの基礎知識
1. スタイルシートってなに?
|
| |
|
スタイルシートとはHTML文書の表示結果(見ため)を調整する「仕組み」です。
スタイルシートには大きく分けて2種類あります。ひとつがW3C(注1)が中心となって策定し、現在標準とされているCSS(注2)で、もうひとつがJavaScriptで記述するJSSS(注3)です。
- (注1)World Wide Web Consortium
- (注2)Cascading Style Sheets
- (注3)Java Script Style Sheets
|
2. スタイルシートの沿革は?
|
| |
|
近年ますますWebページはデザイン重視の傾向が続いていますが、Webページを記述するHTMLは元々論理構造を記述するのには向いていますがデザインについては範囲外でした。
そのためデザイン機能への要求に応えようとしたHTML3.0ドラフトは複雑になりすぎ、ついに使われることはなかったのです。
そこでHTML3.2より論理構造をHTML、デザインをCSS(Cascading Style
Sheets)が受け持つことになったのです。そして、最初に策定されたCSS Lebel 1の策定から2年後に、さらに機能拡張されたCSS
Lebel 2が策定され、現在主要なブラウザはこのCSSに対応するようになっています。
|
★フォント系★
フォントファミリー、サイズ、太さ、斜体、スモールキャピタル、行幅
★色と背景効果系★
前景色(文字色)、背景色、背景画像の調整
★テキスト属性系★
単語間隔、文字間隔、下線など、垂直位置、水平位置揃え、大文字小文字、行頭インデント
★ボックス系★
マージン・パディング、ボーダー(枠線)
★表示位置調整★
表示の横幅・縦幅、フロートと回り込み、回り込みの解除
★その他の表示調整系★
表示形式、空白の取り扱い、リストマークの調整
CSS Level2ではそれに加えて次の機能が追加されています。
|
|
4. スタイルシートの書式は?
|
| |
|
スタイルシートの書式は以下のとおりになります。
|
※"セレクタ{ 宣言 }" と記述している参考書もあります。
属性の後ろは ":"(半角コロン)、値の後ろは ";"(半角セミコロン)で区切り、属性・値の前後には"{ }"
を記載します。 |
|