Ⅴ-７　背景に画像を配置する

１）新規に画像を作成します

背景にする画像を作ってみましょう

①Ｐｉｘｉａを起動します。

②ファイル→新規作成→ピクセルサイズで３００×２００を指定します。

③画像の背景をコンテンツをページと同じ色にします
　編集メニューの「削除」をクリックすると、先ほどまで使っていた色が背景色で表示されます。

④イラストを描くための設定をします
　ペン型の[フリーハンド]を選択します。
　カラーパネル（Ｃパネル）で色を選択。
　パレットパネル（Ｐパネル）で描画方法を選択します。
　オプションパネル（Ｏパネル）でペンの種類を選択します。

⑤イラストを描きます
　画像の上でカーソルを動かしイラストを描きます。

⑥名前を付けて保存します
　ＪＰＥＧフォーマットで「back.jpg」で保存します。

２）背景に画像を配置します

背景色は何らかのトラブルで読み込めない場合に備えて、残しておきます。
styleの中のbody{～}の中にbackground-imageを追加します。
background-imageでは「url(～)」で背景画像を指定します。
先ほど保存した画像のファイル名を入れ「;background-image:url(back.jpg)」と書きます。
背景画像はブラウザの画面全体を埋め尽くすように、縦横に繰り返して表示されます。
indexページも背景を画像に変えました。
リンク済みの文字色も変更して見やすくしました【参考】

<html>
<head>
<title>色の景色</title>
<style type="text/css"></style>
</head>
<body>

<div align="center">
<h1><img src="title.jpg" width="500" height="50" alt="春の色"></h1>
<div class="mark">
<img src="mark.jpg" height="20" height="20" >
<a href="#c1"><b>空色</a>・・・そらいろ<br>
<img src="mark.jpg" height="20" height="20" >
<a href="#c2">水色鼠</a>・・・みずいろねず<br>
<img src="mark.jpg" height="20" height="20">
<a href="#c3">浅縹</a>・・・あさはなだ</b><br>
</div>
<h2><a name="c1">空色</a>・・・そらいろ</h2>
<p class="text01">
<img src=5-1.jpg width="330" height="255" alt="そらいろ" class="photo">
青空は季節によってかなり濃さが違ってくる<br>
天空と低空でも違って見える<br>
「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br>
地平線近くの色だろうか<br>
「天色」を「てんしょく」と読めば空模様のことだが<br>
「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p>

<h2><a name="c2">水色鼠</a>・・・みずいろねず</h2>
<p class="text01">
<img src=5-2.jpg width="330" height="255" alt="みずいろねず" class="photo">
雪解け水には独特の白い濁りがある<br>
この色が「水色鼠」だろうか。<br>
「四十八茶、百鼠」と言われた江戸時代の色名には「水色鼠」がある。<br>
青みを帯びた灰色が「藍鼠」なので<br>
青みを薄めた灰白色を「水色鼠」としてみた。<br>
「港鼠」や「深川鼠」という色も鼠色がかった淡い藍である</p>

<h2><a name="c3">浅縹</a>・・・あさはなだ</h2>
<p class="text01">
<img src=5-3.jpg width="330" height="255" alt="あさはなだ" class="photo">
風のない湖の水面は<br>
鏡面となって周囲の森を映しこんでいる<br>
ブナの若葉に染められた水の色は<br>
「浅緑」であろうか。<br>
残雪の山の色を色見本で探してみたら<br>
「浅縹」と言う色に近かった</p>
<hr>
<div><a href="index.htm">Sky&Water by sora</a></div>
</div>
</body>
</html>

Ⅴ-７ 背景に画像を配置する

１）新規に画像を作成します

２）背景に画像を配置します

Ⅴ-７　背景に画像を配置する