So-net無料ブログ作成
検索選択

アクセスアップのためのブログで使えるHTML研究 【その3】 画像をTABLEタグでどうやって操るの? [ブログ入門・虎の巻]

アクセスアップのための
ブログで使える
HTML研究 【その3】
TABLEの中で画像の位置を
どう決めたらよいのか?

まずサンプルとして11月30日に書いた
次の記事(『レンゲさん、あなたは本当は
メチャ美人なんですよ!』
)の
一番上の画像の部分を見てください。

レンゲさん、あなたは本当は
メチャ美人なんですよ!

上の画像は次の2つの画像の合成したものです。

         ../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 で水平方向の位置を決めます。
次の3つの中から指定してください。

right(右) left(左) center(中央)

valign で垂直方向の位置を決めます。
良く使われるのは次の3つです。

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 (スタイルシート) をどのように使ったらよいのか教えてください』

新しいブログを探している人のために!
次のリンクをクリック!

■ 『あなたが探していたブログはこれですよ!』

レンゲさんの愉快で面白い、そして悩み多いバンクーバーの日々は
次のリンクをクリックして読んでください。

■ 『レンゲのバンクーバー紀行』

バンクーバーから戻ってきたレンゲさんの新しい悩みは次のリンクをクリックして読んでください。

■ 『夢のバンクーバー“後記”』


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:blog

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

この記事のトラックバックURL:
※言及リンクのないトラックバックは受信されません。