アクセスアップのための
ブログで使える
HTML研究 【その３】
TABLEの中で画像の位置を
どう決めたらよいのか？
まずサンプルとして１１月３０日に書いた
次の記事（『レンゲさん、あなたは本当は
メチャ美人なんですよ！』）の
一番上の画像の部分を見てください。
レンゲさん、あなたは本当は
メチャ美人なんですよ！
 |
上の画像は次の２つの画像の合成したものです。
../images/sunset85.jpg （上の画像のURL）
../images/manila92.gif （上の画像のURL）
上の合成画像は次のコードで表示されています。
＜table width=450 height=528
background=../images/sunset85.jpg＞
＜tr＞＜td align=center valign=bottom＞
＜img src=../images/manila92.gif＞
＜/td＞＜/tr＞
＜/table＞
align で水平方向の位置を決めます。
次の３つの中から指定してください。
right（右） left（左） center（中央）
valign で垂直方向の位置を決めます。
良く使われるのは次の３つです。
top （トップ） middle （真ん中） bottom （底）
何も指定しない場合はどうなるのか？
|
レンゲさんの透過性GIF画像が左によって垂直方向では真ん中に位置されます。
上のコードは次のようになっています。
＜table width=450 height=528
background=../images/wisgolf6.jpg＞
＜tr＞＜td＞
＜img src=../images/manila92.gif＞
＜/td＞＜/tr＞
＜/table＞
これを正常に表示するには次のようにします。
＜table width=450 height=889
background=../images/wisgolf6.jpg＞
＜tr＞＜td align=right valign=bottom＞
＜img src=../images/manila92.gif＞
＜/td＞＜/tr＞
＜/table＞
|
注意： ＜ と ＞ は表示するために全角を使っています。
実際には半角を使ってください。
上のコードをそのままコピーして使っても、うまく表示しません。
では、あなたも試してみてください。
面白い作品が出来たら次の掲示板に貼ってくださいね。
この掲示板を練習台に使ってもいいですよ。
■ 『作品を皆に見せたい掲示板』
僕の作品をもっと見たい人は次のリンクをクリックしてください。
スッゲ～、かっこいい！ わ～、きれいやわあああ！
そういう作品がいっぱいありますよ。
■ 『レンゲさん、あなたは実はメチャ美人なんですよ！』
まだ読んでいないなら『ブログ入門・虎の巻』を下のリンクをクリックして読んでください。
ためになること請け合いです！
■ 『たくさんの人に読んでもらえるブログの作り方』
■ 『ブログで HTML をどのように使ったらよいのか教えてください』
■ 『ブログでCSS （スタイルシート） をどのように使ったらよいのか教えてください』
新しいブログを探している人のために！
次のリンクをクリック！
■ 『あなたが探していたブログはこれですよ！』
レンゲさんの愉快で面白い、そして悩み多いバンクーバーの日々は
次のリンクをクリックして読んでください。
■ 『レンゲのバンクーバー紀行』
バンクーバーから戻ってきたレンゲさんの新しい悩みは次のリンクをクリックして読んでください。
■ 『夢のバンクーバー“後記”』
