スタイルシートの技
背景画像を敷き詰めたり、横縦一列に並べたりする
背景画像はウェブページ制作の基礎です。背景画像があるのと無いのではページの印象も随分と違うものです。 背景無しでセンス良くまとめているページもありますが、ここでは背景画像を色々スタイルシートで操作してみましょう。 尚、横縦一列に並べるのはスタイルシートでしかできません。
以下の画像は私のサイトのトップページで使っているものですが、 右クリックで画像を保存して「background.gif」と改名して下さい。 また、ファイルはHTMLファイルがある場所と同じフォルダにして下さい。
background.gif
<html>
<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('background.gif'); }
*.horizontal { background-repeat: repeat-x; }
*.vertical { background-repeat: repeat-y; }
</style>
</head>
<body>
<h1>壁紙の指定</h1>
<p>HTML編集にてbody要素のclass属性の属性値を「horizontal」や「vertical」
に変えてみて結果を確かめてみて下さい。</p>
</body>
</html>
何も指定しない場合
壁紙の指定
HTML編集にてbody要素のclass属性の属性値を「horizontal」や「vertical」に変えてみて結果を確かめてみて下さい。
bodyのclassにhorizontalを適応した場合
壁紙の指定
HTML編集にてbody要素のclass属性の属性値を「horizontal」や「vertical」に変えてみて結果を確かめてみて下さい。
bodyのclassにverticalを適応した場合
壁紙の指定
HTML編集にてbody要素のclass属性の属性値を「horizontal」や「vertical」に変えてみて結果を確かめてみて下さい。
このように背景画像の敷き詰め方を全体・縦方向のみ・横方向のみと分ける事ができます。 クールなページなどでは、黒・灰ストライプに白抜き文字みたいな感じになっていますよね。 ちょっと試しにやってみましょう。同じように画像を保存して「background.gif」としてみて下さい。
background.gif
<html>
<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
{
color: #ffffff;
background-image: url('background.gif');
}
</style>
</head>
<body>
<h1>壁紙の指定</h1>
<p>黒ストライプに白抜き文字を使うと文字がすっきり締まってクールになります。</p>
</body>
</html>
壁紙の指定
黒ストライプに白抜き文字を使うと文字がすっきり締まってクールになります。
いかがでしょうか？背景画像が暗色の場合には明るい黄色や白の文字色、 明色の場合には逆の黒や濃灰色などを使うと良いでしょう。