CSS1: Basic

ＣＳＳ１の基本

基本コンセプト

CSS のスタイルシートの記述方法は、非常に簡単です。以下のようなセレクタとプロパティ(宣言と値から成る)の組み合わせで記述します。プロパティは宣言と値から構成されます。

セレクタ { 宣言: 値 }
         プロパティ

例えば、レベル1の見出し(H1)の色を赤に変更する場合、

H1 { color: red }

のように記述します。(例)

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

一般にスタイルシートの記述には、<STYLE>タグが用いられます。 <STYLE>タグはヘッダ部に置かれます。先程の例を設定する場合、次のように記述します。

<HTML>
  <HEAD>
    <TITLE>タイトル</TITLE>
    <STYLE TYPE="text/css">
      @import "http://style.com/basic"
      H1 { color: red }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>見出し</H1>
  </BODY>
</HTML>

CSS では、@import コマンドによって、URL を使ってスタイルシートファイルを指定できます。

その他に、次の方法でスタイルシートが指定できます。

LINKタグによる記述方法。

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/basic">

本文の中のタグで、STYLE属性を用いる方法

<P STYLE="color: green">This paragraph is green.</P>

セレクタ部のグループ化

スタイルシートの記述を短くするために、セレクタ部はグループ化が可能です。一つのグループは、セレクタはカンマで区切りながら記述します。

H1, H2, H3 { color: green}

同じように宣言部も ";" 区切りながらグループ化できます。

H1 {
    font-size: 24pt;
    line-height: 14pt;
    font-family: helvetica;
    font-weight: bold;
    font-style: normal
}

上記形式は、プロパティの約束によって、更に短縮可能な記述が可能な場合があります。

H1 { 24pt/14pt helvetica bold }

継承

最初の例では、H1 タグのテキストは青色で表示されます。もし、次のように <EM>タグで強調文字を設定した場合、どうなるでしょう。

<H1>The headline <EM>is</EM> important!</H1>

EM タグに色が設定されていなければ、"is" は親要素の色を継承するため、この場合は青色で表示されます。他のフォント関連のプロパティ (font-family、 font-size)も継承されます。

スタイルシートのコメントは、C 言語と同じように/* ～ */ で記述します。

H1 { color: green} /* Head level 1 is green! */

プロパティの例
プロパティ	内容
font	フォントサイズ、字体
font-size	フォントサイズ
font-style	字体
text-color	色
align	行の位置
margin[-{left,right,top,bottom}]	マージン
indent	インデント
widtd	行幅

下記がCSS方式によるスタイルシートの例です。

<HTML><HEAD>
<TITLE>タイトル</TITLE>
<STYLE>
<!-- スタイルシート -->
H1: color.text = #900000
H1: align = left
H1: margin.top = 10

H2: align = center
H2: color.text = #900000

H3: align = center
H3: color.text = #900000
H3: margin.left = 24

UL: indent = 20
UL: margin.left = 30
UL: margin.top = 4
UL: margin.bottom = 4
UL: color.text = #000000

DL: margin.left = 30

P: margin.left = 30
P: color.text = #000000


ABSTRACT: margin.left = 60
ABSTRACT: margin.right = 60

ADDRESS: color.text = $008000
ADDRESS: align = left
ADDRESS: margin.left = 30
ADDRESS: margin.right = 30

MATH: color.text = #0000C0

EM: color.text = #008000

A: color.text = #0050C0

H4: margin.left = 0
H5: margin.left = 0
H6: margin.left = 0

</STYLE>
</HEAD><BODY>

本文

</BODY>

[Back] [Next] [Previous]