ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

壁紙の位置指定

初心者のためのＨＰの飾りつけ教室VOL.9

【更新2004/10/11　お詫び！】
2003/10/23 のタグ規制でここから下のタグは使えなくなりました。
onload=body.style.　というタグが使えません。
ですから、ＢＯＤＹ　内に命令が出せなくなりました。
楽天では使えませんが、参考のために残して起きます。
ご承知おき下さい。

■ 【ＨＰの飾りつけ教室VOL.9】壁紙を上に！左に！右に！固定してみよう。

★ 壁紙でＨＰをセンスアップしよう！ ★

前回は、各ページに壁紙を指定する方法をやりました。
壁紙は自動で「リピート」されて、ブラウザ画面全体に表示されます。

では、今回は壁紙を「リピート」させないようにして、「一行表示」「一列表示」
をやってみましょう。
また、「一枚だけ表示する」事も出来ます。

一枚表示の背景、一行、一列表示の背景は普通に画像を並べても出来ます。
しかし、画像の上にはテキストは載せられません。
画像を背景画像にすれば、その上にテキストを載せる事が出来ます。
背景画像には、そういう利点があります。(^_-)-☆

では、前回のおさらいで壁紙を貼りつける、タグを書いてみましょう。

という風になりますね。(*^^)v

↓下のブラウザもどきのテーブルに、一枚だけ背景画像を載せてみましょう。

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、背景画像は左上に１枚だけ表示されます。

注：このタグをコピペで貼り付ける時は、 body の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

では、この背景画像の配置を変えてみましょう。
上のタグに位置(position)を命令するタグを追加します。

;body.style.backgroundPosition=" ～位置～ "

「～位置～」の属性は、　　 top 　　　　　ブラウザの上端中央
center 　　　ブラウザの中央
bottom 　　　ブラウザの下端中央
left 　　　　　ブラウザの左端中央
right 　　　　　ブラウザの右端中央

一つタグを書いてみましょう。「位置」を「center」にしてみましょう。

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、背景画像は中央に１枚だけ表示されます。

注：このタグをコピペで貼り付ける時は、 body の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

このようになります。お判りでしょうか。

では次に、一行だけの表示、一列だけの表示をやってみましょう。
まずは、上に一行壁紙を貼りつけるためのタグです。

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、
背景画像は一番上に一行だけ表示されます。

注：このタグをコピペで貼り付ける時は、 body の前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

先ほどと違いますのは、「リピート」をさせない、タグ　"no-repeat"の所に" repeat-x "を
入れている事です。
これは、Ｘ軸方向（行方向）だけ背景画像を「リピート」しなさいと命令を出しています。

;body.style.backgroundPosition=" ～位置～ "

「～位置～」の属性は、　　 top 　　　　　ブラウザの上端
center 　　　ブラウザの中央
bottom 　　　ブラウザの下端

位置の属性は↑このようになります。

今度は、左端一列に表示してみましょう。
" repeat-x "のところを" repeat-y "として、Ｙ軸方向（列方向）だけ
背景画像を「リピート」しなさいと命令を出せばいいのです。

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□