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

Freepage List

レストアの仕方

< 新しい記事

新着記事一覧(全446件)

過去の記事 >

2004/07/17

【ご質問にお答して！】背景画像を４枚並べてみる！

(3)

カテゴリ：カテゴリ未分類

昨日は長い一日でした！・・・・・(-_-;)

みなさん・・・時計は長針だけじゃあなく、短針もちゃんと確認しましょう。(￣^￣)b

で！今日は、またまた

「ご質問にお答えして！」

をやりましょうか！(￣　￣*)V

友らん＊さん

からこの様なご質問が来ました。

・・・今日は　写真背景画像の日記の写真を４枚並べられないものか？
とウロウロしていました(^_-)-☆
・・・テーブルの中に４つテーブルを入れると出来るのかしら・・・諦めました（笑　

背景画像を４枚使いたいということですが・・・・

色々なやり方があります。

簡単に出来るのは２行２列のセル→　<TD>に背景画像を指定してあげれば、４枚になります。

しかし、セルごとでしか、テキストが載りません。

セルとセルをまたいでテキストが載らないですね！

そこで４つのTABLEを使いまして、STYLEシートで背景の位置を指定し一枚づつ表示してみます。

この　

background-repeat:no-repeat;background-Position:

　で背景画像のマージンを指定したり、

POSITIONを細かく指定する事も出来ますが、

最も簡単な位置指定で表示させて見ますね！

←この画像を使ってみましょう！

この画像は２００×２００のサイズがあります。

同じサイズの画像を４枚用意します。一番大きくて３５０×３５０までですね。

というのは、日記のTABLEの幅は７００ぐらいだからです。３５０の画像を２枚しか横に並べられません。お判りですか！

←この画像一枚しか使いませんが、どのようになっているか判るはずです。

では、TABLEを表示してみましょう！

此処に文字此処に文字此処に文字此処に文字此処に文字此処に文字此処に文字此処に文字

ではタグです。

<TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="0" WIDTH=" 500 " HEIGHT=" 500 " BGCOLOR="black" style="border-style:ridge;border-width:10;border-color:skyblue;"><TR><TD VALIGN="top" style="background-image: url( http://右下の背景画像のURL );background-repeat:no-repeat;background-Position:bottom right;"><TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="0" WIDTH=" 500 " HEIGHT=" 500 " BGCOLOR=""><TR><TD VALIGN="top" style="background-image: url( http://左下の背景画像のURL );background-repeat:no-repeat;background-Position:bottom left;"><TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="0" WIDTH=" 500 " HEIGHT=" 500 " BGCOLOR=""><TR><TD VALIGN="top" style="background-image: url( http://左上の背景画像のURL );background-repeat:no-repeat;background-Position:top left;"><TABLE ALIGN="center" CELLSPACING="0" CELLPADDING="5" WIDTH=" 500 " HEIGHT=" 500 " BGCOLOR="" style="cursor:help;font-size:15px;line-height:1.3em;color:pink;font-family: Comic Sans MS;"><TR><TD VALIGN="top" BGCOLOR="" style="background-image: url( http://右上の背景画像のURL );background-repeat:no-repeat;background-Position:top right;"><UL>
此処に本文を書きます。
</UL></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>

TABLEのWIDTH(幅）は、５００にしてあります。画像２枚分にしたいときは、４００　になりますね！

高さにつきましては、幅と同じ５００　にしてあります。

テキストをどんどん書いて行きますと、TABLEは縦長になります。

きっちり背景画像を動かしたくない人は、スクロールボックスの中にテキストを入れればいいです！

ここでは、背景画像の間が開いてしまいますから、一番上のTABLEにBLACKの背景色をいれてあります。

↓これはスクロールボックスを入れた例です。

スクロールバーのカラーを変える事も出来ますね。