January 1, 2006
テーマ： ホームページ作成の悩み(550)
カテゴリ： ホームページ作成教室
今日のテーマは、前回発言したように
一度「スクロール機能の応用」から離れます
そして今日のテーマは「 画像やテキストの上下関係の配置指定方法 」です
まぁ簡単に言うと文字（テキスト）を自分の思うように配置しよう！
と言うことです
簡単な例から行ってみます！
今使った <p align="○○"> というタグ
<p> というタグの意味は「テキストに段落を設定」します
「段落を設定する」というのは、日本語の文章での「段落を設定する」と同じ意味です！
だから <p align="○○"> というタグは、Microsoft Wordなどの文章の「 左寄せ 」「 中央寄せ 」「 右寄せ 」という作業を行うのです
例を見れば分かるように
"left" は左寄せ
"center" は中央寄せ
"right" は右寄せ
そして、今回のテーマの縦方向、上下方向の配置の指定も同じ要領で出来るのです
実際にやってみますが、まずは一般的に位置配置を指定しなければ…
位置配置は指定しないと言ったんですが、上の例で赤くなっている部分は位置配置を指定する <align="center"> というタグを使っていますね？
今までも、何食わぬ顔で使っていたんですが、これは何を示しているか分かりますか？
<table border="1" … align="center"> とありますよね？
そうです！
この <table border="1" … align="center"> は「 表の横方向の位置を指定 」しています！
つまり、この場合は表が「 中央 」にくるようになっています
なってますよね！ｂ
そして今回の本テーマである「上下方向の配置指定」をやってみます
そのときに使うタグは< valign="○○"> です！
"○○"に入るのは例で見てみましょう！
えっと、どうせなので左右と上下の両方向を同時に考えてみます
つまり、先ほどの例の
１を左上
２を中央
３を右下
に指定します
こんな感じになります
つまり、<align>で左右配置を指定し 、<valign> で上下配置を指定します
例を見て分かるように
"top" は上寄せ
"middle" は中央寄せ
"bottom" は下寄せ
します
今回はココまでです
おつかれ！
一度「スクロール機能の応用」から離れます
そして今日のテーマは「 画像やテキストの上下関係の配置指定方法 」です
まぁ簡単に言うと文字（テキスト）を自分の思うように配置しよう！
と言うことです
簡単な例から行ってみます！
| 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"> は「 表の横方向の位置を指定 」しています！
つまり、この場合は表が「 中央 」にくるようになっています
なってますよね！ｂ
そして今回の本テーマである「上下方向の配置指定」をやってみます
そのときに使うタグは< valign="○○"> です！
"○○"に入るのは例で見てみましょう！
えっと、どうせなので左右と上下の両方向を同時に考えてみます
つまり、先ほどの例の
１を左上
２を中央
３を右下
に指定します
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>
<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" は下寄せ
します
今回はココまでです
おつかれ！
お気に入りの記事を「いいね！」で応援しよう
[ホームページ作成教室] カテゴリの最新記事
-
HTML教えます その36 February 12, 2006 コメント(6)
-
HTML教えます その35 February 10, 2006
-
HTML教えます その34 February 7, 2006 コメント(1)
【毎日開催】
15記事にいいね！で1ポイント
PR
Freepage List
HANMANI
あくまでも趣味の範囲で、お家で美味しい珈琲を飲もうと頑張る人を応援するブログサイトです。
Category
© Rakuten Group, Inc.
