| HOME | MAIL | 本館:b-cures. | 別館:Template b |
 
★高収入が可能!WEBデザインのプロになってみない?!

スタイルシートを使う

▼ページの背景に画像を1枚だけ表示する

背景画像をレイアウトしてみましょう。背景画像には下の画像を使用します。

背景に使う画像素材

<head>から</head>の間に以下のタグを挿入します。

<style type=text/css>
<!--
body
{
background-image:url(ここに画像のファイル名を記入);
background-repeat:no-repeat; ← 画像を1枚だけ表示するという意味
background-attachment:fixed; ← 画像を固定するという意味
}
-->
</style>

<html>
<head>
<title>
私のホームページ
</title>
<style type=text/css>
<!--
body
{
background-image:url(img/ic.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
-->
</style>

</head>
<body text="#999999" link="#0000FF" vlink="#000099" alink="#000099">
〜中略〜
</body>
</html>

サンプルページ

▼画像を配置を指定して1枚だけ表示する

<head>から</head>の間に以下のタグを入力します。

<style type=text/css>
<!--
body
{
background-image:url(ここに画像のファイル名を記入);
background-attachment:fixed; ← 画像を固定するという意味
background-repeat:no-repeat; ← 画像を1枚だけ表示するという意味
background-position:bottom left; ← 画像を表示する場所を指定
}
-->
</style>

<html>
<head>
<title>
私のホームページ
</title>
<style type=text/css>
<!--
body
{
background-image:url(img/ic.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom left;
}
-->
</style>

</head>
<body text="#999999" link="#0000FF" vlink="#000099" alink="#000099">
〜中略〜
</body>
</html>

サンプルページ

bottom(下)→top(上)とcenter(中央)。left(左)→right(右)とcenter(中央)に変更できます。

(C)2006 html sample. All Rights Reserved.