|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
h1{
background-color:#FFFF00;
}
-->
</style> </head>
<body>
<h1>ここに入力しますよ〜♪</h1>
</body>
</html>
↑前回はここまでやりました。
今回は何か壁紙で背景をきれいにしてみましょう。
自前の画像があればそれでもいいし、ﾈｯﾄで、無料の画像ﾃﾞｰﾀをﾀﾞｳﾝﾛｰﾄﾞして使用してもいいでしょう。
準備する前にﾌｫﾙﾀﾞ作りから始めます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
h1{
background-color:#FFFF00;
}
-->
</style> </head>
<body>
<h1>ここに入力しますよ〜♪</h1>
</body>
</html> 画像ﾃﾞｰﾀを準備する前に、新規ﾌｫﾙﾀﾞを作ります。
ﾌｫﾙﾀﾞ名は半角英数字で記号は＿ｱﾝﾀﾞｰﾊﾞｰだけ使用ＯＫです。
好きなﾀｲﾄﾙを付けます。
ﾌｫﾙﾀﾞの中にもう一つﾌｫﾙﾀﾞを作り、そのﾌｫﾙﾀﾞ名は、imagesと付けます。
画像ﾃﾞｰﾀを見つけたらimagesの中へ保存します。
imagesの中へ保存する時は、画像のﾀｲﾄﾙを半角英数字を付けて保存します。
なるべく簡単な名前を付けます。自動的に登録される、拡張子.jpgはこのままで保存します。
ﾌｫﾙﾀﾞも画像も準備出来ましたら次〜
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
↓
次はここに画像のデータを記述します。
↑
h1{
background-color:#FFFF00;
}
-->
</style> </head>
<body>
<h1>ここに入力しますよ〜♪</h1>
</body>
</html> body{
background-image:url("images/1.jpg");
background-repeat:repeat;
}
↑この部分を上のﾋﾟﾝｸ色の矢印の間に記述します。
↓そしてこうなります。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body{
background-image:url("images/1.jpg");
background-repeat:repeat;
} h1{
background-color:#FFFF00;
}
-->
</style> </head>
<body>
<h1>ここに入力しますよ〜♪</h1>
</body>
</html>
body{
ここはwebﾍﾟｰｼﾞの本体部分です。
ここのﾃﾞｻﾞｲﾝをどうするかでﾍﾟｰｼﾞ全体のｲﾒｰｼﾞも変わります♪
} background-image（背景画像）:url("images/1.jpg");（いわゆる住所と画像がどこにあるか記述）
background-repeat:repeat;（その画像ﾃﾞｰﾀをどう背景に置くかを記述）
背景画像は、同じﾌｫﾙﾀﾞ内のimagesの中の1.jpgと名前を付けてある画像を使います。
それを背景いっぱいに使います。と記述してあります。
これをﾌﾞﾗｳｻﾞで確認してみましょう。
背景画像がきちんと反映されていましたね♪
はい
 おつかれさま〜とチョコ一緒に食べると幸せ♪ |
>
- コンピュータとインターネット
>
- インターネット
>
- ホームページ
こちらこそ放置するかも
