初心者必見！お小遣い稼ぎ完全マニュアル

【お小遣い稼ぎ完全マニュアル】では、インターネットを使ってお小遣い・副収入を稼ぐ方法を紹介します。もちろん無料で始められるので初心者でも安心！みんなでお小遣い・副収入をGETしましょう！

TOP > > 表を作る！応用編④　テキストの位置を指定するTOP > HP(ブログ)をカスタマイズする！ > 表を作る！応用編④　テキストの位置を指定する

表を作る！応用編④　テキストの位置を指定する

2006/10/24(火)

前回はテーブル（表）に色を付ける方法を説明しました。

前回の記事を確認する方はコチラ　→　「表を作る！応用編③　テーブルに色を付ける」

今回は、セル内のテキスト等の位置を設定する方法について説明します。

まずは、前回の記事の最後に載せた表を確認してください。
確認したら戻ってきてくださいね。

この表だけ少し大きくて、セル内のテキスト「1.1、1.2、･･」が四方に寄っていますね？
これは、セル内のテキストの位置を指定しているためです。

では実際に、セル内のテキストの位置を指定する方法について説明します。

セル内のテキストの位置を指定する方法は、大きく別けて2つあります。

1つは、テキストの横の位置を指定する方法。
もう1つは、テキストの縦の位置を指定する方法。

この2つを覚えておけば、セル内の好きな位置にテキストや画像を入れることができますよ。

---------------------------
①セル内の横の位置を指定する

セルを示すタグは覚えていますか？

そうですね。<td>ですね。
この<td>タグの中に、align="横位置"を入れてあげます。

<td align="横位置">

となりますよ。
横位置に入るのは、

・left（左）　・center（中央）　・right（右）

です。
実際に上の3種類の横位置にするとどうなるかを例に示しますね。

left

center

right

---------------------------
②セル内の縦の位置を指定する

縦の位置を指定するタグは、valign="縦位置"です。

<td valign="縦位置">

となります。
縦位置に入るのは、

・top（上）　・middle（中央）　・bottom（下）

です。
実際に上の3種類の縦位置にするとどうなるかを例に示しますね。

top

middle

bottom

ここまでは大丈夫ですか？
<td>タグの中に、横か縦を指定するタグを入れるだけなので、簡単ですよね。
では、これを応用して、横と縦の位置を同時に指定してあげましょう。

---------------------------
③セル内の位置を指定する

考え方は簡単です。
<td>タグの中に、①と②を入れてあげれば良いだけです。

<td　align="横位置" valign="縦位置">

これだけです。
では実際に例を示します。

left + top	center + top	right + top
left + middle	center + middle	right + middle
left + bottom	center + bottom	right + bottom

※横位置を指定しなければ左に、縦位置を指定しなければ中央に、自動的に表示されますよ。
---------------------------
今回は、「セル内のテキスト等の位置」としましたが、もちろん<tr>タグに指定すれば、行全体に適用されます。

ココで、このタグを使う時の注意。
<table>タグに何も指定しなければ、テキストのサイズに合わせてセルの大きさが変わると思います。

つまり、表の大きさを指定してあげなければ、上に示した位置を指定するタグは使えません。
例えばこんな感じ。

top

middle

bottom

縦の位置を指定しているのですが、横1列に並んでいますよね？
valignタグにしてみれば、身動きがとれないところで上に行けって言われても･･･
という感じです。

このように、「セル内のテキスト等の位置」を指定する場合は、表の大きさを変える必要があります。

ということで、次回は、「表の大きさを変える」です。