背景に画像

背景を画像にすべきか

背景に画像を使うことができます。ページが華やいだ雰囲気になりますが、やりすぎにならないようにしてください。気をつけることは３つぐらいあります。

全体にはっきりとした模様をつけると上の文字が読みにくくなる。文字とのかねあいをよく考えること。
背景がよくてもページの内容にはまったく関係がない。飾りより相手のためになる情報を提供することに力をいれたい。ただ、デザインそのものを見てもらいたいページはそれが内容となる。とはいうものの、練習で作るページは内容についてはそれほど真剣に考える必要はない。
やはり画像一般に言えることだが，データ量を減らすように考えること。

どうすればよいか

背景にする画像を作成し，スタイルシートに記入します。たとえば，

body {
  background-image: url(images/naruto.png);
  background-color: #e0e0ff;
  }

この２行は次のように１行に書くこともできます。

body {background:#e0e0ff url(images/naruto.png);}

背景画像は繰り返し並べて表示されますから，データ量を押さえるため，小さい画像にします。画像によっては並べたときに模様が重なるように工夫する必要があります。

背景サンプル

#e0e0ff は背景色です。背景画像が並べられると背景色は見えないのですが，何かの原因で画像が表示できなかったときにも類似した効果が出るように指定します。特に、たとえば暗い色の画像を背景に使って，文字の色を白っぽいものにすると，背景画像がないと文字が読めなくなります。背景色を暗い色に指定しておけば画像がなくても文字は読めます。

他の背景にしてみる

現在の背景画像

透過白
pタグの背景色

課題 haikei.html

背景のあるページ haikei.html を作ります。背景画像は自作します。繰り返し並ぶことを考えてください。

文字が読めなくなる画像の場合は文字の入っている要素( pタグなどではさまれたところ)の背景色を指定して見やすくします。

宣言、html,head,bodyなどのタグも正確に

xml宣言など


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

head部

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>わたよ　のウェブページ</title>
<style type="text/css">
body {background......   }
h1 {background......   }
...... 
</style>
</head>

body部

<body>
<h1>わたよ　のウェブページ</h1>
<p>ホームページはほんとうはウェブページというらしい。</p>
<p>h1,pタグは複数あっていいが、html,head,body,titleは一組だけ。</p>

</body>

おしまい

</html>

ウェブページ(Jun.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2002 改訂