[トップページ] [戻る]

CSS（Cascading Style Sheets）

スタイルシート言語の一つで、複数のスタイル設定を掛け合わせて機能（カスケード）させることができます。 カスケードのルールは、後から記されたスタイル設定が初めに記されたスタイル設定に優先する、というものです。 ただし全てのスタイルシート言語がカスケード機能をサポートしているわけではありません。

ここでは、CSS1（Cascading Style Sheets Level 1）をもとに説明していきます。
スタイルシートの使用宣言
HTML文書内でスタイルシート言語を使用する場合、<HEAD>内で宣言します。
書式
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> 
	<HEAD>
	<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
	･･･
	</HEAD>
HTMLファイルへの組み込み
スタイルシートの設定を外部ファイルとしてもち、HTMLファイルに組み込むことができます。<LINK>を<HEAD>内で宣言します。

外部ファイルは、スタイル設定を記述し、ファイル名を ****.css とします。
書式
<LINK REL="StyleSheet" HREF="外部スタイルシートファイルへのパス"> 
	<HEAD>
	<LINK REL="stylesheet" HREF="../style/style.css">
	･･･
	</HEAD>

	[style.css ファイルの内容（例）]
	BODY { font-size: 12pt; color: #FFFFFF }
グループ化
同一のスタイル指定がある場合、グループ化によってスタイルシートを簡素化することができます。 
	H1, H2, H3 { font-family: helvetica }
	TH, TD { font-size: 10pt; font-weight: bold }
継承
より外側のスタイル設定が、内側にある要素にも受け継がれることを継承といいます。 
	<FONT STYLE="font-size:11pt; color:#FF6400">こんにちは <B>XXX</B> さん</FONT>
	こんにちは XXX さん
上記の例では、<FONT> で設定されたスタイル値が、内側にある <B> に継承されています。<B> を使用したとき初期値には戻らず、<FONT> の設定を引き継ぎます。
属性の定義
CSSでは、「名前:値」の組み合わせでプロパティ指定します。１つの要素に複数のプロパティを指定する場合、;（セミコロン）で区切ります。 
	<P STYLE="font-size: 12pt; color: red">Hello World</P>
上記の例では、ある段落のスタイルを、フォントの大きさを１２ポイント、カラーを赤で設定します。
スタイル設定
スタイル設定を行うと、HTML文書内の該当タグの設定を一度に行えます。 
	<STYLE TYPE="text/css">
	<!--
		TD { background: "#00FFFF"; font-size: 10pt; text-align: center }
	-->
	</STYLE>
上記の例では、文書中のすべての <TD> のスタイルを定義しています。またスタイル設定をコメント化することにより、スタイルシート非対応ブラウザでスタイル設定が画面に表示されないようにしています。
[トップページ] [戻る]
Copyright (C) 2000 Me All rights reserved
Mail To webmaster