ＣＳＳ属性　これだけはっ！

スタイルシートの属性

大事な　大事な　属性ちゃん♪

　スタイルシートの属性（設定項目）は、さまざまです。
　文字サイズにはじまって、グラフィックの位置、カーソルの形状まできめることができます。

　すべてを使いこなすつもりなら、時間がいくらあっても足りない。
また、ほとんどの属性は、いつも使うものではありませんしね。

　わたしも、使っていない属性のほうが多いくらいです。

　あなたが、スタイルシートに何を求めるているかはわかりません
　もしＨＰをシンプルに見やすいものにするためだけなら、
次のことができれば十分です。

　文字の色と大きさと位置
　 線　の色と大きさと位置と種類
　背景の色やイメージ

　これだけです。　カンタンでしょう？

　このページでは文字と背景。
　次のページでは線についてお話します。
　位置の説明は、補足説明で行ないます。

　シンプルに見やすくするだけ・・・と言いましたが、
　実はこれが一番難しいんです。

　ＨＰを作っていくほどに、実感するでしょう。

参照
ＣＳＳファイルの作り方は、スタイルシートの呼び出し方を
ＣＳＳ属性の設定のやりかたはＣＳＳの設定を参照して下さい。

1. 文字の色をきめる
2. 背景の色をきめる
3. 背景のイメージ１（ひとつだけ描く）
4. 背景のイメージ２（いっぱい描く）

■　文字の色をきめる

最初は色から説明しましょう。すべての属性に適用できます。

すべて、例だけを書きますね。ＣＳＳファイル側の設定と、ＨＴＭＬファイル側の使い方を見てください。結果はすぐ下にあります。

ＣＳＳ側　＞　クラス指定で、２つの色を使います。
　　　　　　　色の設定は＃でおこなってます。

.col_ao{
　color : #3366ff;
}

.col_ak{
　color : #ff0000;
}


ＨＴＭＬ側＞　どちらもｐ要素にクラスを設定します。
　　　　　　　違う部分は・・・。

<p class="col_ao">もっえあがーれっ もえあがーれっ</p>

<p class="col_ak">もっえあがーれっ もえあがーれっ</p>

もっえあがーれっ もえあがーれっ

もっえあがーれっ もえあがーれっ

■　文字の大きさをきめる

次にサイズです。。　文字についての大きさを設定します。
サイズは、ｐｘや％などの単位によって意味が変化します。
詳しくは余白の大きさで説明しています。

ＣＳＳ側　＞　文字サイズを大きくしてみます。
　　　　　　　色との複合も自由です。

span.s1{
　font-size : 30px;
}

#sz_col{
　font-size : 50%;
　color 　　　: red;
}


ＨＴＭＬ側＞　spanとfontに使っています。

<span class="s1">卵が先か？それとも・・・</span>

<font id="sz_col">コロンブスが先か？</font>

■　背景の色をきめる

色を設定する・・・のです。　が、文字の色と背景の色とでは、
ＣＳＳの属性がちがってきます。混同しないようにしましょう。

ＣＳＳ側　＞　ｐ要素の背景色を黒にします。
p.black {
backgroung-color : black;
color 　　　　　　　　 : white;
}

ＨＴＭＬ側　↓
<p class="black">スタンダードの白と黒</p>

スタンダードの白と黒

■　背景のイメージ１

ホームページ全体や部分の背景には、写真や絵などのイメージをつかうことができます。「背景」ですから、前面に文字を書くこともできます。

遊ぶことができるプロパティなので、いろいろ試してみてください。

ＣＳＳ側　＞　繰り返さないイメージを描く。

span.t_img1{
　background-image: url(img/t_usiro1.gif);
　background-repeat: no-repeat;
　width : 200;
　height : 35;
}

ＨＴＭＬ側＞　
<span class="t_img1">うーむ。これが背景か。</span>

バックグランドイメージと使うと、イメージは勝手に繰り返して表示されます。表示させるのが１回だけなら、上記のように、リピートさせないプロパティを追加するひつようがあるんです。

一口メモ
背景は、イメージサイズを気にしません。画像イメージが切れたりするときには、widthやheightを追加して、大きを調整してください。

■　背景のイメージ２

背景イメージをくりかえし表示させます。リピート（くりかえし）をさせるかさせないか。それだけをきめるプロパティです。

縦横にイメージを繰り返すつもりなら、省略してもかまいません。
が、くりかえしを明確にしておいた方が管理上、ブナンです。

ＣＳＳ側　＞　縦横に繰り返すイメージを描く。

div.t_img1{
　background-image: url(img/t_oyaji1.gif);
　background-repeat: repeat;
　color :#6666ff;
　font-size:20px;
　width : 300;
　height : 100;
}

ＨＴＭＬ側＞　
<div class="t_img1">わしが、いっぱいじゃぁ！！</div>

イメージを横方向にくりかえすなら、repeat-x　。同様に、縦方向だけなら、repeat-y　とします。

画像をみせるさせるタグには、<img>がありますが、バックグランドイメージは、背景としてつかうところに特徴があります。