素人珈琲

素人珈琲

January 1, 2006
XML
今日のテーマは、前回発言したように

一度「スクロール機能の応用」から離れます

そして今日のテーマは「 画像やテキストの上下関係の配置指定方法 」です

まぁ簡単に言うと文字(テキスト)を自分の思うように配置しよう!

と言うことです

簡単な例から行ってみます!

HTML <p align="left" >左に寄せる</p>
<p align="center" >中央に寄せる</p>
<p align="right" >右に寄せる</p>
表示

左に寄せる

中央に寄せる

右に寄せる


今使った <p align="○○"> というタグ

<p> というタグの意味は「テキストに段落を設定」します

「段落を設定する」というのは、日本語の文章での「段落を設定する」と同じ意味です!

だから <p align="○○"> というタグは、Microsoft Wordなどの文章の「 左寄せ 」「 中央寄せ 」「 右寄せ 」という作業を行うのです

例を見れば分かるように
"left" は左寄せ
"center" は中央寄せ
"right" は右寄せ




そして、今回のテーマの縦方向、上下方向の配置の指定も同じ要領で出来るのです

実際にやってみますが、まずは一般的に位置配置を指定しなければ…

HTML
<table border="1" bordercolor="#000000" cellspacing="0" width="300" height="70" align="center" ><tr><td width="100">1</td><td width="100">2</td><td width="100">3</td></table>
表示
1 2 3


位置配置は指定しないと言ったんですが、上の例で赤くなっている部分は位置配置を指定する <align="center"> というタグを使っていますね?

今までも、何食わぬ顔で使っていたんですが、これは何を示しているか分かりますか?

<table border="1" … align="center"> とありますよね?

そうです!

この <table border="1" … align="center"> は「 表の横方向の位置を指定 」しています!

つまり、この場合は表が「 中央 」にくるようになっています

なってますよね!b


そして今回の本テーマである「上下方向の配置指定」をやってみます


そのときに使うタグは< valign="○○"> です!

"○○"に入るのは例で見てみましょう!

えっと、どうせなので左右と上下の両方向を同時に考えてみます

つまり、先ほどの例の
1を左上
2を中央
3を右下
に指定します

HTML
<table border="1" bordercolor="#000000" cellspacing="0" width="300" height="70" align="center"><tr>
<td width="100" align="left" valign="top" >1</td>
<td width="100" align="center" valign="middle" >2</td>
<td width="100" align="right" valign="bottom" >3</td></table>
表示
1 2 3


こんな感じになります

つまり、<align>で左右配置を指定し 、<valign> で上下配置を指定します

例を見て分かるように
"top" は上寄せ
"middle" は中央寄せ
"bottom" は下寄せ
します

今回はココまでです

おつかれ!





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

Last updated  January 1, 2006 11:30:03 PM
コメント(0) | コメントを書く
[ホームページ作成教室] カテゴリの最新記事


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

PR

×

Profile

HANMANI

HANMANI


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