超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
reference
リファレンスの見方 スタイルシートの書き方 ヘッダ情報 ページ全体 見出し 文字（テキスト） リスト テーブル 画像・イメージ リンク レイアウト フォーム フレーム リファレンス一覧

ページ全体

このリファレンスの見方については「リファレンスの見方」をお読みください。
ページの背景色 ページの背景色と文字の色 リンクの色を変える
リンクに背景色をつける マウスが乗ると色が変化 ページの背景に画像をつかう
背景画像を固定する 背景画像をスクロールさせる 背景画像を1個だけ表示
表示場所を指定する 背景画像を横に並べる 背景画像を縦に並べる

ページ全体をコントロールするには、HTMLの場合は <body> タグに直接、背景色（bgcolor）、背景画像（background）、テキストの色（text）、 リンクの色（link、vlink、alink）を、スタイルシートの場合は body｛　　　｝ で、背景色、背景画像、テキストの色、マージン、余白などを指定することができます。
<body>タグには何も指定しなくても表示には問題がありませんが、 一部のブラウザでは背景色を指定しないと背景が「グレー」で表示されることがあるので、 背景色を白にする場合は、必ず背景色を白に指定しておきましょう。

ページの背景の色を変える

【HTMLタグ】
背景色を薄緑に指定

<body bgcolor="#CCFFCC">
     ・
     ・
     ・
</body>

【スタイルシート インライン】
ページの背景を薄緑に指定

<body STYLE="background-color:#CCFFFCC;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】
ページの背景を薄緑に指定

body {
background-color:#CCFFFCC;
}

BODY部分は

<body>
     ・
     ・
     ・
</body>

▲このページのトップに戻るTop

ページの背景色と文字の色を変える

【HTMLタグ】
背景色を薄緑に、テキストの色をグレーに指定

<body text="#CCCCCC" bgcolor="#CCFFCC">
     ・
     ・
     ・
</body>

【スタイルシート インライン】
背景を白、文字色をグレーに指定
複数のプロパティを指定する場合は、プロパティとプロパティの間に必ず半角スペースを入れて区切ってください。

<body STYLE="color:#CCCCCC; background-color:#CCFFFCC;">
     ・
     ・
     ・
</body>

※プロパティとは、「color:#CCCCCC;」　や「background-color:#CCFFFCC;」のことです。
【スタイルシートヘッダ、外部ファイル】
背景を薄緑、文字色をグレーに指定

body {
color:#CCCCCC
background-color:#CCFFFCC;
}

BODY部分は

<body>
     ・
     ・
     ・
</body>

▲このページのトップに戻るTop

リンクの色を変える

【HTMLタグ】
背景色を薄緑
テキストの色をグレー
リンクの色を緑
訪問済みリンクを青
クリック中のリンクを紫に指定 （改行しないで一行で書いてください）

<body text="#CCCCCC" bgcolor="#CCFFCC" link="#006600" vlink="#0000FF" alink="#990066">
     ・
     ・
     ・
</body>

インラインでは、リンクのスタイルシートの記述はできません。
ヘッダ部分及び外部ファイルを使ってください。
スタイルシートを使えば、さらにマウスを乗せたときの色を変えることができます。
【スタイルシートヘッダ、外部ファイル】
背景を薄緑、文字色をグレーに指定

body {
color:#CCCCCC
background-color:#CCFFFCC;
}

a:link { color: #006600; } 　　　　←リンクの色
a:visited { color: #0000FF; } 　　　　← 訪問済の色
a:active { color: #990066; } 　　　　← クリック中の色
a:hover { color: #FF6600; } 　　　　　← マウスを乗せたときの色

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

リンク部分に色を付ける

【スタイルシートヘッダ、外部ファイル】
リンク部分の背景を黄色に指定

a:link {
background-color: #FFFF66;
}

リンク部分の<a href="#ファイル名.html">背景が黄色に</a>なります。
リンク部分の背景が黄色になります。
▲このページのトップに戻るTop

リンクにマウスが乗ったとき、文字の色を変えて背景に色をつける

【スタイルシートヘッダ、外部ファイル】
マウスが乗ったときに文字色を赤に、背景を黄色に指定

a:hover {
color: #FF0000;
background-color: #FFFF66;
}

リンク部分の<a href="#ファイル名.html">テキストが赤に、背景が黄色に</a>なります。
リンク部分のテキストが赤に、背景が黄色になります。
▲このページのトップに戻るTop

ページの背景に画像を使う

ホームページ
【例】 背景画像はこの画像を使います。(ファイル名＝back.gif）
背景画像
【HTMLタグ】

<body background="back.gif">
     ・
     ・
     ・
</body>

【スタイルシート インライン】

<body style="background-image: url(back.gif);">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(img/back.gif);
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

背景画像を固定する

ホームページ
HTMLの書き方は「IE（インターネットエクスプローラー）でのみ有効です。
その他のブラウザでも背景画像を固定したい場合は、スタイルシートを使いましょう。
【HTMLタグ】

<body background="back.gif"　bgproperties=fixed>
     ・
     ・
     ・
</body>

【スタイルシート インライン】

<body style="background-image: url(img/border_back.gif); background-attachment:fixed;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(img/back.gif);
background-attachment:fixed;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

背景画像をスクロールさせる

ホームページ
【HTMLタグ】

<body background="back.gif"　bgproperties=scroll>
     ・
     ・
     ・
</body>

【スタイルシート インライン】

<body style="background-image: url(img/border_back.gif); background-attachment:scroll;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(img/back.gif);
background-attachment:scroll;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

背景画像を1個だけ表示

ホームページ
背景を1個だけ表示させています。
【スタイルシート インライン】

<body style="background-image: url(img/back.gif); background-repeat:no-repeat;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(back.gif);
background-repeat:no-repeat;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

表示場所を指定する

ホームページ
背景を左上に配置しています。
【スタイルシート インライン】

<body style="background-image: url(img/back.gif); background-repeat:no-repeat; background-position:left top;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(back.gif);
background-repeat:no-repeat;
background-position:left top;
}

<body>
     ・
     ・
     ・
</body>
ホームページ
背景を右上に配置しています。
【スタイルシート インライン】
右上に配置

<body style="background-image: url(img/back.gif); background-repeat:no-repeat; background-position:right top;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】
右上に配置

body {
background-image: url(back.gif);
background-repeat:no-repeat;
background-position:right top;
}

<body>
     ・
     ・
     ・
</body>
ホームページ
背景を左下に配置しています。
【スタイルシート インライン】
左下に配置

<body style="background-image: url(img/back.gif); background-repeat:no-repeat; background-position:left bottom;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】
左下に配置

body {
background-image: url(back.gif);
background-repeat:no-repeat;
background-position:left bottom;
}

<body>
     ・
     ・
     ・
</body>
ホームページ
背景を右下に配置しています。
【スタイルシート インライン】
右下に配置

<body style="background-image: url(img/back.gif); background-repeat:no-repeat; background-position:right bottom;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】
右下に配置

body {
background-image: url(back.gif);
background-repeat:no-repeat;
background-position:right bottom;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

背景画像を横に並べる

ホームページ
【スタイルシート インライン】

<body style="background-image: url(img/back.gif); background-repeat:repeat-x;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(back.gif);
background-repeat:repeat-x;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop

背景画像を縦に並べる

ホームページ
小花の画像を縦に並べています。
小花
【スタイルシート インライン】

<body style="background-image: url(img/back.gif); background-repeat:repeat-y;">
     ・
     ・
     ・
</body>

【スタイルシートヘッダ、外部ファイル】

body {
background-image: url(back.gif);
background-repeat:repeat-y;
}

<body>
     ・
     ・
     ・
</body>
▲このページのトップに戻るTop