Freepage List

タグのテスト


< 新しい記事

新着記事一覧(全345件)

過去の記事 >

2005.11.14
XML

【解説】　寄せる　の違い

(10)
テーマ： ホームページ作成の悩み(549)
カテゴリ： 楽天ブログ便利帳



画像・テーブルを左右に寄せる


「挟む」と「埋め込む」の違い。


■ 左に寄せる ■
<Div Align="left">文字・画像・テーブル</Div>

■ 中央に寄せる ■
<center>文字・画像・テーブル</center>

■ 右に寄せる ■
<Div Align="right">文字・画像・テーブル</Div>


寄せる為の、基本タグですね。



タグに埋め込む書き方もあります。

<TABLE Align="right"><TR><TD>★</TD></TR></TABLE>

<img src="アドレス" Align="right">

これでも、画像、テーブルを寄せられます。



この様に「埋め込む」と、ただ「寄る」だけではなく、

「回り込む」 という性質が生まれます。

特別な意図が無い限り、

<Div Align="left">文字・画像・テーブル</Div>

などのタグで、「挟む」ほうが無難です。




「テーブルの中にテーブルを入れる」

というのを使って、配置をしてみます。


・ 写真に額縁をつける。 これを右に寄せる。
・額縁の下 中央にコメントを入れる。
・寄り方は、調整出来る様にする。



■ 寄り具合を調整する為のテーブル ■
まず、テーブルを作り、これを中央に寄せます。
このテーブルは、％指定で、横幅を調整出来る様にします。
横幅を変える事で、左右の寄り具合を調整出来る仕組みです。
<center>
<TABLE width="90%">
<TR><TD>
★
</TD></TR>
</TABLE>
</center>
％の数字を変える事で、より具合を調整できます。
数字が大きい程、テーブルが横に伸び、寄りが大きくなります。



■ テーブルを右に寄せる ■
真ん中に寄せたテーブルの中に、またテーブルを作ります。
中のテーブルは、右に寄せます。
<Div Align="right">
<TABLE>
<TR><TD>
★
</TD></TR>
</TABLE>
</Div>


■ 「額縁」と「コメント」は、中央に寄せる ■
<center>
<table border="4" bordercolorlight="#f5e5ed" bgcolor="#ffaed6" bordercolordark="#e887b8">
<tr><td>
<IMG src="アドレス">
<tr><td>
</table>（改行）
花ハート
</center>


■ 結果 ■

テーブルは、見易く枠線を表示しています。

花ハート
タグは、次の様になっています。
<center>
<TABLE width="90%">
<TR><TD>

<Div Align="right">
<TABLE>
<TR><TD>

<center>
<table border="4" bordercolorlight="#f5e5ed" bgcolor="#ffaed6" bordercolordark="#e887b8">
<tr><td>
<IMG src="アドレス">
</td></tr>
</table>（改行）
花ハート
</center>

</TD></TR>
</TABLE>
</Div>

</TD></TR>
</TABLE>
</center>
見易く 改行しています。
ＴＯＰページ、フリーページの【自動改行なし＜ＢＲ＞】では、このままコピーして使えます。
【自動改行】、【日記】では、（改行）という所以外は、改行しないで、
<TABLE><TR><TD>★</TD></TR></TABLE>という様に、一気に並べて下さい。






【ブログランキング】
今日もクリック（投票）してニャ＾＾
クリックして投票してニャ＾＾
ここ





☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆

【写 真 集】 【中 華 街】

【楽天ブログ便利帳】
「色見本帳・カラーチャート」
「タグ帳」 「画像置き場」 「便利ソフト」
「楽天ブログQ&A　よくある質問」 「ホームページ スペース」

☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆






お気に入りの記事を「いいね！」で応援しよう

Last updated  2005.11.15 01:14:42
コメント(10) | コメントを書く

もっと見る



【毎日開催】
15記事にいいね！で1ポイント
10秒滞在
いいね! -- / --
次の日記を探す
おめでとうございます！
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

×

Profile

spiky09

spiky09

フォローする
© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: