素材工房 まさん房素材置き場TOP壁紙集選択画面>大きめのサイズの使い方
和風壁紙
「大きめのサイズ」
の使い方
ここでは、CSSを使って「大きめのサイズ」の壁紙を使う方法を説明します。
説明と言っても、サンプルソースを書いてあるだけですけど。
手抜きですみません。
私流のやり方ですので効率の悪い部分や、「この書き方あんまりよくないよー」と言う部分もあるかもしれません。 あくまでも私流のやり方ですので、自分流にアレンジするか、手紙を書くのページからお知らせください。

ここでは、「大きめのサイズ」の壁紙「牡丹」を使って説明していきます。
牡丹
ここではCSS(カスケーディングスタイルシート)を使った、壁紙の設定の仕方を説明します。
普通に壁紙を一面に並べて表示するのは省いて、「大きめの壁紙」ではほとんどが縦方向にしかシームレス加工をしてませんので、 そういう壁紙を使うときにどうするかというのを説明していきます。

初めから横幅を「1024ピクセル」とか余白の部分を付けてながーくしておけばそのまま気にせずタイル状に並べればいいのですが、
それだと、素材のファイルサイズが多少でも大きくなってしまいますし、大きい画面で見ると右側にもう一度壁紙の端が現れたりして美しくないので、
私は小さいままにしてCSSで縦方向にのみ並べるやり方をオススメします。
ファイルの構成が以下のような状態の時のソースファイルです。
[sample.html]のソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
    <title>「大きめの壁紙」素材の使い方〜サンプル</title>
    <LINK REL="STYLESHEET" TYPE="text/css" HREF="samp_css.css">
    <META NAME="author" CONTENT="まさん坊">
</head>
<body id="wall">
サンプルです。
ここに、本文を記述してください。

</body>
</html>
[samp_css.css]のソース
#wall{
/* 画像の指定 */
    background-image:url(image/botan_01.gif);
/* 背景色の指定(「大きめのサイズ」の壁紙は大抵白『#FFFFFF』が基本となっています。 */
    background-color:#FFFFFF;
/* 繰り返しの方向(この場合は縦方向のみなのでこうなります) */
    background-repeat:repeat-y;
/* 背景画像の位置(左寄せ。「right」にすれば右側に寄ります。) */
    background-position:left;
/* 本文の始まる左側の位置 */
    padding-left:150px;
}
すると、こういうぐあいに表示されます。
今はこの一部の表示となっていますが、実際はページ全体がこのように表示されます。

CSSファイル内の「id名(#の後ろにある任意の文字列)」は「wall」としていますが、自由に設定できますのでお好きな物に変更してもらってもかまいません。
変更したときはhtml文書内のid属性も変更してください。
この場合は<body>タグ内のid="wall"の所。

適用するタグも<body>でなければならないと言うわけではありませんので、いろいろなところで試してみてください。