超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > プロパティと値 > Next 

■ プロパティと値

CSS の設定・記述の方法がわかったところで(わかったことにして^^;)、ここからは CSS に使われるプロパティと値について勉強しましょう。

基本的なプロパティと値はここまでの説明でも出てきたので、HTML がわかる方であれば、なんとなくどういう感じかわかったと思います。
前に説明したように、HTML でもプロパティと値は出てきます。

<font color="#0000ff">文字色は青だよー</font>

って書けば、タグ名=font(文字)、プロパティ=color(色)、値=#0000ff(青)ということになるし、

<p align="center">段落をセンタリングしちゃえ!</p>

って書いた場合は、タグ名=p(段落)、プロパティ=align(位置)、値=center(中央)ということになるよね。
ちょっと書き方を変えて、CSS のプロパティと値を覚えるだけです。
な〜んだって感じでしょ^^

上の2つの HTML を CSS で書くとこうなりますね。
タグに直接スタイルを適用する方法でやってみます。

<div style="color:#0000ff;">文字色は青だよー</div>

文字色は青だよー

<p style="text-align:center;">段落をセンタリングしちゃえ!</p>

段落をセンタリンクしちゃえ!

タグを組み合わせた場合はこうなりますね。
<font> タグ、<b> タグ、<u> タグを組み合わせます。

(html)
<div>
CSS ではタグの属性をプロパティとその値で表現しますが、逆にそのタグをプロパティに定義された<font color="#ff0000"><b><u>セレクタ</u></b></font>とよびます。
</div>

CSS ではタグの属性をプロパティとその値で表現しますが、逆にそのタグをプロパティに定義されたセレクタとよびます。

(css)
<div>
要するに{ }の前にあるタグ名を、{ }に定義された<span style="color:#ff0000; font-weight:bold; text-decoration:underline;">セレクタ</span>といいます。
</div>

要するに{ }の前にあるタグ名を、{ }に定義されたセレクタといいます。

上の例で使った HTML タグと CSS を比較するとこのようになります。

HTMLCSS
タグプロパティセレクタプロパティ
u--spantext-decorationunderline
b--font-weightbold
fontcolor#ff0000color#ff0000

■<span>タグについて■
<span> タグって HTML では見かけないタグじゃないですか。CSS では段落の中の単語や文節のスタイルを設定したいときに使えば便利です。
HTML では単語や文節に使うタグは既にタグ自身が属性をもっているので、<span> タグのような属性をもたないタグは不要です。CSS では、タグにプロパティと値によって属性を指定するので、単独では属性を持たないタグを使用した方がやりやすい場合があります。もちろん HTML で単語や文節につかうタグ <u>、<b>、<strong> などに CSS で別の属性を加えることもできます。
ちなみにこれら段落(ブロック)の中に記述できるタグ(記述しても改行されないタグ)をインラインエレメントとよびます(覚えなくてもいいよ^^;)。

(html)
<div>
前に勉強したクラスや ID も<span>セレクタ</span>です。クラスセレクタ、ID セレクタという言い方をするときもあるようです。
</div>

前に勉強したクラスや ID もセレクタです。クラスセレクタ、ID セレクタという言い方をするときもあるようです。

このように <span> タグは属性をもたないので、<span> タグを記述しても何も変わりません。あえて <span> タグの属性を言うとしたら、「適用範囲を指定する」ってことでしょうか。


 Home < 超初心者のためのスタイルシート講座 < Back < プロパティと値 > Next