もどる

つららのある風景

課　題　haikei.html

新しいページ（htmlファイル）を作って背景を工夫しなさい。ファイル名はhaikei.htmlとします。制作に苦労した点や，注目してもらいたい点を書きなさい。

繰り返しの背景を使った場合は、繰り返しの元になった絵を img タグでこのページのように紹介してください。

index.html からのリンクを作り，index.html にもどるリンクも作ること。

説　明

元の絵はこれです。

元の絵には枠はありませんが，スタイルシートで、img {border:solid 1px} とすればこのように幅１ピクセルの線を引いてくれます。

repeat-x を使って，一番上だけに，画像を配置した例です。普通，背景画像はスクロールとともに動きます。縦長のページだとスクロールするとこのような「つらら」は見えなくなってしまいます。しかし，background-attachment: fixed; を書き加えることにより，スクロールしても動かないようにできます。これは NN4.73では無視されますから注意が必要です。

body {
   background-color : #f0f8ff;
   background-image : url(images/tsurarav.png);
   background-repeat: repeat-x;
   background-attachment: fixed;
}

あわせて次のように書くこともできます。

body { background: #f0f8ff url(images/tsurarav.png) repeat-x fixed;}

repeat-x や repeat-y の画像と文字が重ならないようにするには margin が最適です。repeat-x なら，一番上の H1 や div.shomei の上マージンを大きくとります。このページは「もどる」ボタンをあえてつららと重ねたかったので，h1 の mergin を大きくしました。

h1 {
   color :#003300;
   text-align:center;
   margin: 20% 30% 4% 30%;
}