■ 背景色や背景画像を設定してみよう。

今度は先ほどのトップページ「index.html」に背景色を設定してみましょう。

「背景画像」を設定する前に「背景色」を設定すればページの雰囲気が大体つかめます。
また、時によって背景画像の読み込みが遅い時、しばらくの間背景画像の無い状態が表示されたりします。

この時、かなり間の抜けたページになったり、ぜんぜん文字が見えなかったりすることもあるので「背景画像」を設定する、しないに、かかわらず設定しておくことは大事です。
たとえ「白」であっても、ブラウザが違えば、ブラウザの標準の背景色が「白」とは限らないからです。

「背景色」の設定方法は「コマンドメニュー」の「書式(O)」−「ページの配色と背景…(U)」で設定します。
「ページの配色と背景…(U)」をクリックすると、次のような画面が表示されます。

画面上部の「次の配色にする(C)」をクリックし、「背景(B)」右横のボタンを押しますと次のような画面が表示されます。

この中から、背景色に設定したい色をクリック後、「OK」ボタンをクリックすると背景色が設定されます。
「色の初期値」から選択したり、グラデーションカラーをクリック後、明度を調整したり、カラーコードを入力したり、と様々な取得方法があります。

とはいえ、誰もが同じ環境（WindowsのInternet Expolorer）で見てるとは限りません。 ホームページ（WEBページ）に使用する色は「WEBカラー」と呼ばれる基本216色カラーを使用するのがベストです。
※「WEBカラー」、「基本216色カラー」については、「文字カラーピッカー（JavaScript版）」、「背景カラーピッカー（JavaScript版）」を参照してください。

「ページの配色と背景…(U)」の画面に戻りましたら、「OK」ボタンを押して設定完了です。

その後、 「編集ツールバー」の「上書き保存」をクリックして保存しておきます。

「背景画像」を設定する為には何かサンプル画像が必要ですね。
ということで、次の画像を用意してみました。

この画像を利用する場合は、一度自分のパソコンに保存しておかなければなりません。
まず、画像の上にマウスを持って行き右クリックするとポップアップメニューが現れます。
（このメニューは「コンテキストメニュー」と言います）

その中から、「名前をつけて画像を保存(S)…」をクリックします。
すると次のような画面が表示されます。

この画面の左、フォルダツリーをずらし、「トップページを作ろう。」で設定した「myhp」フォルダに切替えます。
そして画面左上の「新しいフォルダー」をクリックし、「新しいフォルダー」が作成されましたら「images」などと、解かり易い名前を付けます。
※画像専用のフォルダ名は一般的に「images」、「image」、「img」などと付けられることが多いですが、全然別の名前でも問題ありません。

画像が少ない間は「トップページ」と同じフォルダに置いてもいいのですが、ページが増えてきたり、画像が増えてくると整理が付かなくなります。
初めから、きちんと分けておいたほうが楽です。

作成したフォルダ「images」をダブルクリックで開きます。
画面の上のフォルダ指定が「images」になってることを確認し、保存する「ファイル名」が「cbbg1r.jpeg」になっていましたら、「保存(S)」ボタンを押します。

今回解説した「右クリック」の方法は、素材サイトなどから画像や写真をダウンロードする時にも同じ方法で行います。
きちんと覚えておくとよいでしょう。

ではこの画像をトップページの背景に使用する方法を説明します。

以前作成したトップページ「index.html」を開き、「コマンドメニュー」の「書式(O)」−「ページの配色と背景…(U)」をクリックします。

この画面の右側にあるファイル選択ボタンをクリックし、先ほどの画像を選択し「開く(O)」ボタンを押しますと、ファイル名がセットされます。

そして、「OK」ボタンを押したら背景画像の設定は完了です。

その後、「編集ツールバー」の「上書き保存」をクリックして変更したページを保存しておきます。