第7節 スタイルシート講座 前編

  今迄の講座で基本的なタグは分かったけど、次第にホームページが
  充実してくれば、もう少し細かくデザインしたいよね。
  実際には、デザインは「スタイルシート」を使うと聞くんだ。
  言葉では、なんだか難しそうに思うけど、案外簡単に使えるようなんだ。
  では、「スタイルシート」とはどんなものか、僕と一緒に入門しましょう!



 @ 文字の大きさを細かく指定
 A 文字の色・書体を共に指定
 B 他のタグに応用する
 C スタイルの共通指定
 D リンクのデザインを付ける
 E 壁紙(背景)を貼り付ける
 F 壁紙(背景)を工夫する(1)
 G 壁紙(背景)を工夫する(2)



@ 文字の大きさを細かく指定

文字の大きさを指定するのは font タグがありましたね。 このタグでの文字の大きさの指定の復習です。
  ■ 文字の大きさの指定(復習)
<font size="**"> ここに文字を置く </font>
  size="**" : ** は 1 から 7 まで
ホームページを作っていると、この7段階より大きな文字や、中間の大きさの文字が必要な時がありますね。
このような時に役立つのが「スタイルシート」による、文字の大きさの指定です。
これだけを聞くと難しそうに聞こえますが、「百聞は一見にしかず」で、実際にその指定法を見てください。

まず font タグを使って指定します。
<font style="font-size:14pt"> 14ptの文字 </font>
また span タグを使えば次のようになります。
<span style="font-size:14pt"> 14ptの文字 </span>
如何ですか、説明なしでも推測できるくらい簡単でしょう。
  ■ 文字の大きさの指定
<タグ名 style="font-size:**">
  ** // 文字の大きさを pt 値等で指定
  「 font-size 」を属性、「 ** 」をと言い、半角コロン「 : 」で区切る
スタイルシートでは、タグの属性のような指定法
style="**:**"
で、デザイン(今回の場合は文字の大きさ)を細かく指定できる訳です。

なお、初顔出しの「 span 」は何も指定しないと一風変わったタグですが、これから、同じく何も指定しない「 div 」タグと共に、よく出てきますので覚えておいて下さい。

早速練習をしてみましょう。 メモ帳で入力します。
メモ帳
<font style="font-size:5pt">これが5ポイントの文字の大きさ</font><br>
<font style="font-size:11pt">これが11ポイントの文字の大きさ</font><br>
<span style="font-size:12pt">これが12ポイントの文字の大きさ</span><br>
<span style="font-size:30pt">これが30ポイントの文字の大きさ</span><br>
<span style="font-size:80pt">80pt文字</span>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
これが5ポイントの文字の大きさ
これが11ポイントの文字の大きさ
これが12ポイントの文字の大きさ

これが30ポイントの文字の大きさ



80pt文字



文字の大きさの単位
スタイルシートでは、文字の大きさを指定する時の単位には、先ほど出てきたポイント「pt」の他、ピクセル「px」ミリメートル「mm」などが使えます。
今後この学習室では、文字の大きさとしてよく使われる、ポイント「pt」を使って説明します。
また画像の大きさの指定と同じく、ピクセルに限り、単位を省略出来ます。

それでは、<font size="**">と、ポイントによる大きさの比較一覧を次に揚げておきます。
参考までに、この学習室の基本の文字の大きさは「 11pt 」です

  <font size="**"> の文字の大きさ
size=1 size=2 size=3 size=4 size=5 size=6 size=7
くまさん くまさん くまさん くまさん くまさん くまさん くまさん


  style="font-size:**pt" の文字の大きさ
6pt 10pt 14pt 18pt 25pt 35pt
くまさん くまさん くまさん くまさん くまさん くまさん
8pt 12pt 16pt 20pt 30pt 40pt
くまさん くまさん くまさん くまさん くまさん くまさん



A 文字の色・書体を共に指定

前項でスタイルシートの指定の方法が理解できたと思いますので、次に文字の色や書体等々を説明します。
文字の色の指定
スタイルシートで文字の色を指定する場合、「color」属性を使います。
  ■ 文字の色の指定
<タグ名 style="color:**">
  ** // 文字の色を指定(色名 または RGB値)
スタイルシートで、 span と div タグを使い、赤色の文字を書きます。
メモ帳
規定の文字色です<span style="color:red">赤色の文字です</span>戻ります
<br><br>
規定の文字色です<div style="color:red">赤色の文字です</div>戻ります
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
規定の文字色です赤色の文字です戻ります

規定の文字色です
赤色の文字です
戻ります
このように、共に何も指定しないタグ span と div との違いは、前後で改行される事です。
文字の大きさを同時指定
スタイルシートでは、同時に多くのスタイルを指定できます。
    スタイルの複数指定
style="指定値; 指定値; ・・・・; 指定値"
  指定値を、半角セミコロン「 ; 」で区切る
  指定値  // 「 属性:値 」の1対を言う
例えば、 12pt の大きさで、緑色の文字なら
style="font-size:12pt; color:green"
これでいいわけで、実に統一され、覚えやすいルールですね。

何例かを練習をしてみましょう。 メモ帳で入力します。
メモ帳
<font style="font-size:12pt; color:red">
  赤色で12ptの文字</font><br><br>
<span style="font-size:20pt; color:#f08000">
  #f08000色で20ptの文字</span><br><br>
<span style="color:#a09040; font-size:16pt">
  #a09040色で16ptの文字</span>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
赤色で12ptの文字

#f08000色で20ptの文字

#a09040色で16ptの文字
属性(今回は font-size と color )の順番はどのように指定しても良いのです。
文字の書体等の指定
スタイルシートで文字の書体を指定する場合、「font-family」属性を使います。
  ■ 文字の書体の指定値
font-family:**
  ** // 書体名を指定    (例) DHP行書体
ここで使う書体は、 <font face="**"> で使うものと同じです。

文字の大きさ・色・そして書体を併せて指定すれば、もうお解りでしょう。
style="font-size:14pt; font-family:DHP行書体; color:red"
これでいいのですが、スタイルシートでは「font-size」と「font-family」を一括指定出来ます。
この他、文字をデザインする次の属性が、一括指定出来ます。

 font 関連の属性の一覧表
属 性 属性名 属性値 デザインの種類
文字の太さ font-weight bold 太字
bolder 一段階太くする
lighter 一段階細くする
斜め文字 font-style italic 斜め文字にしたいとき指定
文字の大きさ font-size 大きさを指定 ポイント ( pt ) 値等で指定
行の間隔 line-height 間隔を指定 ピクセル値、またはパーセントで指定
文字の書体 font-family 書体名 「MS ゴシック」等を指定

これらの属性の一括指定の方法です。
    font 関連属性の一括指定
style="font:** ** **/** **"
  「**」 は、指定したい属性値(各属性値を半角スペースで区切る)
  line-height の指定時だけは、文字の大きさを同時に指定して,
  半角スラッシュ「 / 」で区切り、 12pt/120% のようにする
例えば、文字の大きさが、16ptで、DHP行書体を指定するとき。
style="font:16pt DHP行書体"
先程の色属性を含んだ指定を、 font 関連属性の一括指定で書けば
style="font:14pt DHP行書体; color:red"
このようになり、随分と簡単に書けます。 ただ「color」の値は一緒に書けません。
 ( ※ Netscape では一括指定は使えないようです。 )

それでは、ここまでを練習をしてみましょう。 メモ帳で入力します。
メモ帳
<font style="font-size:14pt; color:blue; font-family:MS 明朝">
    青色で14ptの明朝</font><br>

<span style="font:16pt DHP行書体; color:#d080a0">
    #d080a0色で16ptの行書体</span><br>

<span style="color:blue; font:bold 14pt MS 明朝">
    青色で14ptの明朝の太字</span>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
青色で14ptの明朝
#d080a0色で16ptの行書体
青色で14ptの明朝の太字
「color」と「font-family」・「bold」属性は、あえてスタイルシートを使わなくても出来ますね。 <font size=**>で指定出来ない「文字の大きさ」を指定する時に、併せて使えば簡単だと言う程度です。


B 他のタグに応用する

スタイルシートは、タグに追加してデザインをサポートするものですから、「 span 」や「 div 」タグだけでなく、ほとんどのタグに対し次のように、これまで習ったのと同様の指定が出来ます。
style="指定値; 指定値; ・・・; 指定値"
この場合、タグの持つ指定は引き継がれます。
タグ本来の指定が邪魔になる場合は、何も指定しないタグ「 span 」や「 div 」が役立つわけです。
実例 : リンクタグ 「a」
リンクタグ「a」の場合を例にします。 メモ帳で入力します。
メモ帳
<a href="#dum" style="font-size:12pt; color:red">
    リンク文字を赤で12ptに設定</a><br><br>

<a href="#dum" style="font:18pt HG創英角ポップ体; color:#c04090">
    リンク文字をポップ体に設定</a>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
マウスを当てて下さい。 このようにリンクタグにも、文字の大きさ・色・書体のスタイルが設定できました。
普通はリンクにはアンダーラインが付きますが、このページ全体のリンクにスタイルシートの設定がしてあるため少し違っています。(後で説明します)
実例 : マーキータグ 「marquee」
次は、マーキータグ「marquee」の場合を例にします。 メモ帳で入力します。
メモ帳
<marquee direction="right" style="font-size:16pt; color:blue">
    リンク文字を青で16ptに設定</marquee><br><br>
<marquee style="font:22pt HG創英角ポップ体; color:#20f0d0">
    リンク文字をポップ体に設定</marquee>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
リンク文字を青で16ptに設定

リンク文字をポップ体に設定
これもうまくいきました。 このようにスタイルシートは、どのタグにも共通の指定法でデザインを設定でき、大変便利ですね。 フォーム関連のタグや、<b>、<p>、<h1>等のタグにも同様に設定できます。
実例 : テーブル 「table」
最後に、テーブル「table」の場合を例にします。
このタグは他とは違い、セルの一つ一つに独立した画面を持っています。 たとえば font タグで、2つ以上のセルにまたがる、文字の大きさの指定をしても、はじめのセルだけに有効になるだけで、テーブル全部や、ある行全部の文字の大きさは指定出来ませんでした。

スタイルシートで指定した場合は、一つのセル内で、当然、次のように指定出来ます。
<table>
 <tr>
  <td> <span style="font:16pt DHP行書体; color:#d080a0">
    #d080a0色で16ptの行書体</span> </td>
  <td>・・・</td>
      ・・
    繰り返し
      ・・
</table>
このセル全体が同じデザインなら、これらの属性を「 td 」タグに付けて、次のように書くほうがよいでしょう。
<table>
 <tr>
  <td style="font:16pt DHP行書体; color:#d080a0">
    #d080a0色で16ptの行書体 </td>
  <td>・・・</td>
      ・・
    繰り返し
      ・・
</table>
これを応用して、「tr」や「table」タグにも付ける事が出来、「行全体」及び「テーブル全体」のスタイルを一括して指定出来るのです。

実際に、2行3列のテーブルの例を揚げて練習してみましょう。
メモ帳
一つのセル(1行2列)を指定
<table border=1>
  <tr>
    <td>1行1列</td>
    <td style="font:16pt DHP行書体; color:#d080a0">1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table><br>

一つの行(1行目)を指定
<table border=1>
  <tr style="font:16pt DHP行書体; color:#d080a0">
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table><br>

テーブル全部を指定
<table border=1 style="font:16pt DHP行書体; color:#d080a0">
  <tr>
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
  </tr>
</table>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
一つのセル(1行2列)を指定
1行1列 1行2列 1行3列
2行1列 2行2列 2行3列

一つの行(1行目)を指定
1行1列 1行2列 1行3列
2行1列 2行2列 2行3列

テーブル全部を指定
1行1列 1行2列 1行3列
2行1列 2行2列 2行3列
テーブルのスタイルシートの一括指定は、従来の「セルごとに指定の制限」をクリア出来、大変便利ですね。
以上の例で、スタイルシートの指定法はご理解いただけましたか。


C スタイルの共通指定

ホームページを作るのに、基本の文字の大きさは 12pt ですね。 この基本の大きさを変えたい(例えば 11pt にする)場合どうすればいいでしょうか?
方法1 : <body>タグにスタイルを指定する。 <body style="font-size:11pt">
方法2 : <head>〜</head>内で、タグの共通指定をする
方法1は、今まで通りの指定方法ですが、タグが「body」なので、<body>〜</body>内のすべてにスタイル指定することになります。
方法2は、この項目で説明する内容で、bodyに限らず全てのタグを、そのHTMLファイル内での、デザインの共通指定ができます。

タグの共通指定法
body タグの共通指定を、「方法2」で書いてみます。
<head>
  <style type="text/css">
  <!--
    body { font-size:11pt; color:#303030 }
   -->
  </style>
</head>
1) まずは、<head>〜</head>内には、tytle 等他の指定も一緒に入れてください。
2) 次に、このアンダーラインの部分は共通設定タグを置く場所の宣言です。
3) 今回は body タグだけでしたが、上記で宣言された間に、必要に応じ、他のタグを置きます。
4) 単体タグの指定では「 style="  " 」でしたが、共通設定タグの指定では中括弧 { } で囲います。
5) 属性と値の間のコロン「 : 」や、指定値の区切りのセミコロン「 ; 」は単体タグの指定と同じです。

今回の例は、 body タグ内の文字の大きさが 11pt で、色が #303030 であることを宣言しています。
共通指定とテーブルタグ
上記のように「 body 」で、スタイルの共通指定しても反映されない部分があります。 それはテーブル内です。
body タグのスタイルの共通指定は、table タグ内に及ばない
  ( ※ その他 input , textarea 等のフォーム関連タグも同様みたいです )
罫線の入ったテーブルならいいのですが、罫線非表示でレイアウト用に使っている場合は、ほとんどの部分が、テーブル内なので、「 body 」をスタイル指定しても、何も変わりません。
私は当初、「一見してわからないテーブル内」でもあり、この原因が分からなくて苦労しました。
余計なお世話かもしれませんが、あえて書いておきます。

それゆえ、基本のスタイルを変更する場合は、 body タグと同じ指定を、「 table , tr , td 」タグにも指定します。( ※ table タグだけでテーブル内全部を指定出来るようです )
<head>
  <style type="text/css">
  <!--
    body,table{ font-size:11pt; color:#303030 }
   -->
  </style>
</head>
ここでも、新しい指定法が出てきました。 body,table の部分です。
  ■ 複数のタグに同じスタイルを指定をする
各タグを、半角コンマ「 , 」で区切って並べる



D リンクのデザインを付ける

一般に、文字にリンクを貼った時は、下にアンダーラインが引かれ、未訪問のページなら「青色」に、訪問済みページなら「パープル」になりますね。
スタイルシートを使えば、オリジナルのデザインに変更出来ます。 (この学習室も変えています)

「 a 」タグの一括指定になりますので、前項の通り、<head>〜</head>内で共通指定をします。
次の4つの状態ごとに別の設定が出来ます。 最後の「 hover 」はスタイルシート特有のもので効果的です。
a:link { スタイルの指定 }   :まだ訪れていないリンク
a:visited { スタイルの指定 }:すでに訪れたリンク
a:active { スタイルの指定 } :マウスが押されている時のリンク
a:hover { スタイルの指定 }  :マウスがリンクと重なっている時
使えそうなスタイル属性
ここでは各スタイルの指定に使えそうなものと、テキスト関連の、スタイルシートの属性を紹介します。
属 性 属性名 属性値 デザインの種類
文字の飾り text-decoration none 文字飾りなし
underline 下線を入れる
overline 上線を入れる
line-through 取消線を入れる
水平位置の指定 text-align left 左寄せ
center 中央合わせ
right 右寄せ
背景色の指定 background-color 色を指定 色名、または、RGB値で指定

今まで習ったものを組み合わせて、いくつかの例を試しましょう。
下線を消し、マウスが重なった時、下線を入れ赤色にする
これは、この学習室のリンクの設定です。 それでは指定内容を見ましょう。
メモ帳
<head>
  <style type="text/css">
  <!--
    a:link    { text-decoration:none }
    a:visited { text-decoration:none }
    a:hover   { text-decoration:underline; color:red }
   -->
  </style>
</head>
これの実例は、この学習室のリンクなので省略します。
リンクに上線、マウスが重なれば太文字
次に、リンクに上線を入れ、マウスが重なった時に太文字にします。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      a:link    { text-decoration:overline }
      a:visited { text-decoration:overline }
      a:hover   { font-weight:bold }
     -->
    </style>
  </head>
  <body>
    <a href="#dum1">ここにリンクを貼りました</a>
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
デザインはともかく、面白いリンクが出来ましたね。
リンクの下線なし、訪問したリンクは斜め文字、マウスが重なれば黄色のマーカー
最後に、リンクの下線を消し、訪問したリンクは斜め文字にし、マウスが重なった時に黄色のマーカー(背景を黄色にする)設定をしてみましょう。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      a:link    { text-decoration:none }
      a:visited { text-decoration:none; font-style:italic }
      a:hover   { text-decoration:none; background-color:yellow }
     -->
    </style>
  </head>
  <body>
    <a href="#dum2">ここにリンクを貼りました</a>
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
さらに属性を組み合わせれば、オリジナルで楽しいリンクが作れますね。


E 壁紙(背景)を貼り付ける

背景のデザイン指定と言えば、前項で色の指定が出てきましたね。
ここでは、その他の指定を合わせ説明しますが、文字の背景ではなく、「 body 」タグの背景である「壁紙」のデザイン指定を説明します。

 背景関連の属性の一覧
属 性 属性名 属性値 デザインの種類
背景色
 を指定
background
 -color
色を指定 色名、または、RGB値
背景画像
 を指定
background
 -image
url( 画像名 ) 括弧内に、アドレス+画像名を指定
背景画像の
 並べ方
background
 -repeat
repeat 背景画像を縦横ともに敷き詰める(規定値)
repeat-x 背景画像を横方向のみ並べる
repeat-y 背景画像を縦方向のみ並べる
no-repeat 背景画像をひとつだけ表示する
背景の
 スクロール
background
 -attachment
scroll 背景画像も同時にスクロールする
(規定値)
fixed 背景画像はスクロールしない
背景画像
 の位置
background
 -position
横位置 縦位置

(指定値が1つ
 なら縦横同じ)
位置名で指定。
 横方向 : left(左端)、center(中央)、right(右端)
 縦方向 : top(上端)、center(中央)、bottom(下端)
左端、上端からの距離を数値により指定。
 ピクセル値または割合(%)で指定。

次に、window の背景(壁紙)の指定法を説明します。 この場合 body タグのスタイル指定になり、C項で説明した、2つの方法がありますが、ここでは <head>〜</head> 内で指定します。
背景色・背景画像の指定
背景色・背景画像の設定は
<body bgcolor=**> 、 <body background=**>
このタグで指定出来ましたが、後で説明する応用のため、スタイルシートでの指定を覚えてください。
  ■ 背景色の指定値
background-color:**
  ** // 色名 または RGB値 を指定
  ■ 背景画像の指定値
background-image:url(**)
  ** // アドレスに続き、画像ファイル名 を指定

背景色は白で、背景画像「 hana3.gif 」の場合の例です。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      body { background-color:white;
             background-image:url(parts/hana3.gif) }
     -->
    </style>
  </head>
  <body>
    背景の色を white に、<br><br><br><br><br><br><br>
    背景画像を hana3.gif しました
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
背景の色を white に、






背景画像を bg.gif しました
使用した画像ファイル「 hana3.gif 」は、 です。
背景色と背景画像の両方を指定すれば、背景画像が表示されますが、この画像が大きなサイズの場合は読み込みまでの時間は、背景色が指定されます。


F 壁紙(背景)を工夫する(1)

背景画像を指定した場合、その画像が縦横に繰り返され、画面いっぱいに表示されます。 またスクロールした場合、背景も一緒にスクロールされます。
背景画像の並べ方の指定
スタイルシートでは、背景画像の並べ方を指定する事が出来ます。
  ■ 背景画像の並べ方の指定値
background-repeat:**
  ** = repeat    // 縦横共に繰り返す場合(規定値)
  ** = repeat-x  // 横方向だけ繰り返す場合
  ** = repeat-y  // 縦方向だけ繰り返す場合
  ** = no-repeat // 背景画像を一つだけ表示する場合
それでは、前項で使った花の画像「 hana3.gif 」を、縦方向だけ繰り返してみましょう。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      body { background-color:white; 
             background-image:url(parts/hana3.gif);
             background-repeat:repeat-y }
     -->
    </style>
  </head>
  <body>
    背景の色を white に、<br><br><br><br><br>
    背景画像を bg.gif しました<br><br><br><br><br>
    背景画像を 縦に繰り返しました
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
    背景の色を white に、




    背景画像を bg.gif しました




    背景画像を 縦に繰り返しました
如何でしょうか? うまく使えば面白い壁紙が出来ますね。
但し、画像表示は左端一列で、右側は背景色が表示されるので、画像との色合わせに気を付けましょう。
背景画像の「スクロール」の指定
また、スタイルシートでは、背景画像のスクロールを指定する事も出来ます。
  ■ 背景画像のスクロールの指定値
background-attachment:**
  ** = scroll // 背景画像も同時にスクロールする(規定値)
  ** = fixed  // 背景画像はスクロールしない
背景に大きな模様などを貼り付けスクロールさせた時に、背景が止まって見えれば、いい雰囲気になりますね。

それでは例を揚げ、練習します。
背景画像は同じく「hana3.gif」を、今度は横にリピートさせます。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      body { background-color:white; 
             background-image:url(parts/hana3.gif); 
             background-repeat:repeat-x;
             background-attachment:fixed }
     -->
    </style>
  </head>
  <body>
背景の色を white に、<br><br><br><br>
背景画像を bg.gif しました<br><br><br><br>
背景画像を 横に繰り返しました<br><br><br><br>
背景画像を固定しました
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
背景の色を white に、



背景画像を bg.gif しました



背景画像を 横に繰り返しました



背景画像を固定しました
このように、スクロールしても背景が消えてしまわず、デザインとして使えそうですね。


G 壁紙(背景)を工夫する(2)

背景画像を並べて表示する属性「 background-repeat 」が「 repeat 」以外では、画像の位置を指定できます。
  背景画像の位置指定の規定値
background-position:(横位置) (縦位置)
 各位置は半角スペースで仕切る
 指定値が一つの場合は、(横位置)=(縦位置)となる

 位置の指定法
 (1)位置名で指定する (位置名は下記の通り)
   (横位置) : left(左端)、center(中央)、right(右端)
   (縦位置) : top(上端)、center(中央)、bottom(下端)
 (2)左端、上端からの距離を数値により指定する
   ピクセル等の絶対値、または、割合値「 % 」で指定
なお、「 background-attachment 」属性が「 repeat-x 」の場合は縦方向、「 repeat-y 」の場合は横方向の位置を指定出来ます。

それでは例を揚げ、練習します。
背景白で、写真「 hana3.gif 」を横に並べ、上から60ピクセルの位置に表示してみましょう。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      body { background-color:white;
             background-image:url(parts/hana3.gif);
             background-repeat:repeat-x;
             background-position:0 60} 
     -->
    </style>
  </head>
  <body>
    背景の色を white に、<br><br><br><br>
    背景画像を hana3.gif にしました<br><br><br><br>
    背景画像を 横に並べ表示しました<br><br><br><br>
    背景画像を上から60ピクセルの位置に表示しました
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
背景の色を white に、



背景画像を hana3.gif にしました



背景画像を 横に並べ表示しました



背景画像を上から60ピクセルの位置に表示しました
横に並べた場合の、縦の位置は何を指定してもいいようです。
背景属性の一括指定
背景に関わる各属性は、一括して書けます。
  ■ 背景属性の一括指定法
background:背景色 背景画像 繰返し スクロール 位置
  各属性値は、半角スペースで区切る
  各属性値は、必要なものだけを、好きな順序で書ける
    ( ※ Netscape は出来ないようです )

それでは例を揚げ、練習します。
写真「icho.jpg」をひとつだけ、縦横共に中央に表示してみましょう。
メモ帳
<html>
  <head>
    <style type="text/css">
    <!--
      body { background:white url(parts/icho.jpg) no-repeat center center}
     -->
    </style>
  </head>
  <body>
    背景の色を white に、<br><br><br><br>
    背景画像を icho.jpg にしました<br><br><br><br>
    背景画像を 一つ表示しました<br><br><br><br>
    背景画像スクロールします(規定値)<br><br><br><br>
    背景画像を画面中央に表示しました
  </body>
</html>
これをHTMLファイルにして、ブラウザで表示すると,次のようになります。
背景の色を white に、



背景画像を icho.jpg にしました



背景画像を 一つ表示しました



背景画像スクロールします(規定値)



背景画像を画面中央に表示しました
これらの背景のスタイルシートを使い、よりデザインされたオリジナル背景を作ってください。
なお、この写真は MIYUKI PHOTO さんよりお借りしました。