初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。今週のおさらいバックナンバーはこちらから
第１号 第２号 第３号 第４号 第５号 第６号 第７号 第８号 第９号 第10号
目次
今週＜第11号＞マガジンのおさらい
まず、記事から抜書きでおさらいします。
毎週金曜日配信 What's New 2002/7/26
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今週の課題■ Webで扱う画像 その２
◆ページの背景に画像を貼り込む
Webページの背景は、各ブラウザのデフォルトの色で表示されます。白、灰色な
ど、ブラウザによって違いますが、この背景に自分で作った画像を貼り込んで、
表情をつけます。スタイルシートを利用することによって、さまざまな表示が可
能になり、楽しさが増します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
さっそく作ってみましょう。テキストエディタを起動して新たにHTML文書を作り
ます。下記のようにタイプしてください。なお、背景に貼り付ける画像は、ダウ
ンロードした教材から使用します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-image: url("images/kabe.png")
color: #fff }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
</body>
</html>
入力が終わりましたら保存します。半角小文字で、
test_8.html と必ず拡張子 .html を忘れないようにします。
保存が終わったら、 test_08.html という文書のアイコンが、いつも使っている
ブラウザのアイコンになっているはずです。ダブルクリックしてブラウザで見て
みましょう。 ">Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
では、背景画像の繰り返し表示をコントロールします。スタイルシートの登場に
よって可能になった表示方法です。
テキストエディタで、新規にHTML文書を作成します。下記のようにタイプして
ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-color: #fff;
background-image: url("images/kabe.gif") ;
background-repeat: repeat-y }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
</body>
</html>
入力が終わりましたら保存します。半角小文字で、
test_9.html と必ず拡張子 .html を忘れないようにします。 ">Sample
background-image: url("images/kabe.gif") とスタイルシートで記述します。通常は縦、横に繰り返して表示しますが、background-repeat 属性によって縦か横のみの繰り返しを指定します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
では、背景画像の繰り返し表示をコントロールします。スタイルシートの登場に
よって可能になった表示方法です。
テキストエディタで、新規にHTML文書を作成します。下記のようにタイプして
ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景に画像を貼る</title>
<style type="text/css">
<!--
body { background-color: #fff;
background-image: url("images/title.gif") ;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom }
-->
</style>
</head>
<body>
<h2>初心者のためのホームページ作り</h2>
<div>
<img src="images/space.gif" width="1" height="800" alt="">
</div>
<h1>初心者のためのホームページ作り</h1>
</body>
</html> ">Sample
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
background-repeat: no-repeat; これは背景画像を繰り返し表示を禁じる属性です。background-attachment: fixed; これは背景画像を固定させる属性です。background-position: right bottom これは背景画像の位置を指定する属性です。
これらの属性を組み合わせることで、背景画像の表示効果を得ることができます。
注意しなければならないのが、コンテンツはスクロールさせるわけですから、背景画像がコンテンツの邪魔にならないようにしましょう。