初心者のためのホームページ作り 第11号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
目次  

プレーンテキスト版

今週<第11号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                   毎週金曜日配信 What's New 2002/7/26
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ Webで扱う画像 その2

◆ページの背景に画像を貼り込む
 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 これは背景画像の位置を指定する属性です。

これらの属性を組み合わせることで、背景画像の表示効果を得ることができます。
注意しなければならないのが、コンテンツはスクロールさせるわけですから、背景画像がコンテンツの邪魔にならないようにしましょう。



Copyright(C) 2002-2003 banban@scollabo.com