【解説】写真を左右に文章は写真の真ん中 | 中華街に住まうネコ

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

【フォローする】【ログイン】

Freepage List

タグのテスト

< 新しい記事

新着記事一覧(全345件)

過去の記事 >

2005.10.21

コピペで使えます。もうスペースで位置調整をしなくてもOK

「写真」と「文章」の位置

●写真：左右交互にズラす

●文章：写真の中央

スペースを入れて、プレビューで位置を確認して・・・・。

大変ですよね。

そこで、

『テーブル』

のタグを使って、位置を調整してみます。

--------------------ここから------------------------------

ネコ発見

服の中に入って来る

ピタッとくっついて放れない

--------------------ここまで------------------------------

『テーブル』というのは、表や枠を作る為のタグです。

一つの枠

二つの枠

複数の枠	複数の枠
複数の枠	複数の枠

この『テーブル』の枠を見えない様にすると、

「写真」や「文章」の配置をデザインする事が出来ます。

今回は、この枠を、左右に寄せる事で、位置を調整してみました。

仕組み

では、上の写真は、どんなタグになっているか、見てみましょう。

『テーブル』は、枠を見える様にしてあります。

--------------------ここから------------------------------
<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ネコ発見</center> </TD></TR></TABLE> </Div>

<IMG src="画像のアドレス">
ネコ発見

<Div Align="right"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
服の中に入って来る</center> </Div>

<IMG src="画像のアドレス">
服の中に入って来る

<Div Align="left"> <TABLE width="60%"><TR><TD> <center> <IMG src="画像のアドレス">
ピタッとくっついて放れない</center> </TD></TR></TABLE> </Div>

<IMG src="画像のアドレス">
ピタッとくっついて放れない

--------------------ここまで------------------------------

まず、『テーブル』を、左右に寄せます。

■左に寄せる■
<Div Align="left"> ○ </Div>

■右に寄せる■
<Div Align="right"> ○ </Div>

『テーブル』の中に、写真・文章を入れます。

写真・文章は、『テーブル』の中では、中央に寄っています。

■『テーブル』■
<TABLE width="60%"><TR><TD> ○ </TD></TR></TABLE>

■中央に寄せる■
<center>画像・文章</center>

調整の仕方

■『テーブル』■
<TABLE width=" 60% "><TR><TD> ○ </TD></TR></TABLE>

赤い数字（ここでは60%）を変える事で、左右のズレを調整します。

width=" 60% " →幅（ワイド）の広さを指定するタグ。

左に寄せる場合を例にすると、

少ない数ほど→枠が狭くなり→左に寄ります。

実際に数字を変えて見みます。

５０％
この場合、枠より写真の方が大きい為、一番左に寄ってしまいました。
（０％でも、枠が写真より小さくなる事はありません）
これでは意味がないので、もっと数字を大きくしてみます。
(０％にして、左右に寄せて、画像の下の中央に文章、という使い方も出来ますね)

ネコ発見

７５％
かなり真ん中に寄ってしまいました。
もっと左にあった方が変化を感じます。
やはり最初の６０％位が調度良いでしょうか。

服の中に入って来る

極端に１００％にしてみました。
ど真ん中になります。
枠は、最大の幅になります。
その枠の中で、写真が中央にある訳ですから、ど真ん中に来てしまいます。
これは意味がありませんね。
単に中央に寄せるだけなら、テーブル（表・枠）のタグは必要ありません。
■中央に寄せる■
<center> <IMG src="画像のアドレス"> </center>

ピタッとくっついて放れない

数字を変えると、位置を調整できる、という例。

好みですので、納得できる位置に来るように、数字を変えてみて下さい。

下のタグを「コピー」＆「貼り付け」で使って下さい。

■左に寄せる■

<Div Align="left"> <TABLE width="60%"><TR><TD> <center> 画像のタグ
コメント</center> </TD></TR></TABLE> </Div>

■右に寄せる■

<Div Align="right"> <TABLE width="60%"><TR><TD> <center> 画像のタグ
コメント</center> </TD></TR></TABLE> </Div>