作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > スタイルシート > CSSの属性(文字と背景)

CSS属性 これだけはっ!

スタイルシートの属性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS側 > クラス指定で、2つの色を使います。
       色の設定は#でおこなってます。

.col_ao{
 color : #3366ff;
}

.col_ak{
 color : #ff0000;
}



HTML側> どちらもp要素にクラスを設定します。
       違う部分は・・・。

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

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

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

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

■ 文字の大きさをきめる

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

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

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

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



HTML側> spanとfontに使っています。

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

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

卵が先か?それとも・・・ コロンブスが先か?
■ 背景の色をきめる

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

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


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

スタンダードの白と黒

■ 背景のイメージ1

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

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

CSS側 > 繰り返さないイメージを描く。

span.t_img1{
 background-image: url(img/t_usiro1.gif);
 background-repeat: no-repeat;

 width : 200;
 height : 35;
}

HTML側> 
<span class="t_img1">うーむ。これが背景か。</span>

うーむ。これが背景か。

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

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

■ 背景のイメージ2

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

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

CSS側 > 縦横に繰り返すイメージを描く。

div.t_img1{
 background-image: url(img/t_oyaji1.gif);
 background-repeat: repeat;

 color :#6666ff;
 font-size:20px;
 width : 300;
 height : 100;
}

HTML側> 
<div class="t_img1">わしが、いっぱいじゃぁ!!</div>

わしが、いっぱいじゃぁ!!

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

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

<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする