超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

ページ全体

このリファレンスの見方については「リファレンスの見方」をお読みください。
ページの背景色 ページの背景色と文字の色 リンクの色を変える
リンクに背景色をつける マウスが乗ると色が変化 ページの背景に画像をつかう
背景画像を固定する 背景画像をスクロールさせる 背景画像を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>

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

【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>

リンクの色を変える

【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>

リンク部分に色を付ける

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

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


リンク部分の<a href="#ファイル名.html">背景が黄色に</a>なります。
リンク部分の背景が黄色になります。

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

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

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


リンク部分の<a href="#ファイル名.html">テキストが赤に、背景が黄色に</a>なります。
リンク部分のテキストが赤に、背景が黄色になります。

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

ホームページ
【例】 背景画像はこの画像を使います。(ファイル名=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>

背景画像を固定する

ホームページ
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>

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

ホームページ
【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>

背景画像を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>

表示場所を指定する

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

<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>

背景画像を横に並べる

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

<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>

背景画像を縦に並べる

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

<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