初心者向け
ホームページの
作り方講座

HP外側に背景を設定

続いてホームページの外側の背景の設定を行ってみます。

ホームページの外枠は現在真っ白です

分かりやすいように以下では色をつけましたが、実際のホームページはこの部分は真っ白です。
ここに背景用の画像を加えてみます。

背景画像の用意

素材サイトなどを検索すると沢山の背景用壁紙素材が出てきますのでお好みのものを探してもいいでしょう。
今回は以下のようなシンプルなストライプ柄を使う事にします。

このストライプ柄でいい人は…

ここをクリックして画像をダウンロード(bg.zip)して下さい
シングルクリック又はダブルクリックで開くと思いますので、bg.pngファイルをお手元のimagesフォルダに移動してきて下さい。

背景画像を指定します

ホームページの外側に背景を指定したい場合、<body>タグに指定します。
cssフォルダにあるstyle.cssをTeraPadで開いて下さい。冒頭にbodyタグへの設定箇所があります。背景画像はbackgroundで指定しますが、既に白色(#fff)で単色の指定が入っていますね。 今回はここに背景画像を読み込む指定を行います。

使うタグは、
url(背景画像)
です。(背景画像)には、style.cssファイルから見た画像の位置と画像ファイル名を入力します。

実際に置き換えてみると、
url(../images/bg.png)
になります。

今回初めて「../」という文字が現れましたね。これは「1つ上の階層」という意味です。style.cssからimagesフォルダを見ると、1つ上の場所になるので、「../」という事になります。
その後ろに続く「images/bg.png」は、「images」フォルダの中にある「bg.png」になります。

まとめますと、cssファイルからみた、背景画像(imagesフォルダ内にあるbg.png)なので、
「1個上(../)にある、imagesフォルダにある(images/)、画像(bg.png)」
となります。

実際にbackgroundに追加してみました。
※#fffの後ろに半角スペースをあけて入力して下さい。

↓backgroundの行をまとめてコピペしなおしたい人は以下タグをご利用下さい。

index.htmlをプレビューしてみます

以下のように壁紙が出たらOKです。

次のステップは…

「cssにコメントを追加して見やすく」です。頑張りましょう!