DHEAボディークリーム

初心者必見!ネットで稼ぐお小遣い稼ぎ完全マニュアル

【ネットで稼ぐお小遣い稼ぎ完全マニュアル】では、インターネットを使ってお小遣い・副収入を稼ぐ方法を紹介します。 もちろん無料で始められるので初心者でも安心! みんなでお小遣い・副収入をGETしましょう!
約130万サイトが利用しているA8.net このブログからも多くの方が登録されています!
A8.netの紹介記事はコチラ→アフィリエイトはA8.net

Powered By 画RSS

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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

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

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

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

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

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

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

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

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


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

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

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

<td align="横位置">

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

・left(左) ・center(中央) ・right(右)

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

leftcenterright

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

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

<td valign="縦位置">

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

・top(上) ・middle(中央) ・bottom(下)

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

topmiddlebottom

ここまでは大丈夫ですか?
<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>タグに何も指定しなければ、テキストのサイズに合わせてセルの大きさが変わると思います。

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

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

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

ということで、次回は、「表の大きさを変える」です。
関連記事
はじめまして^^
テニスコーチをしながらお小遣い稼ぎに挑戦中のつかチ~です。
とても分かりやすく楽しいブログですね^^
僕もいろいろ参考にさせていただきます。
また遊びに来ますね~
応援ポチッ!させていただきます。
[ 2006/10/24 13:54 ] [ 編集 ]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2006/10/24 15:20 ] [ 編集 ]
こんばんは
う~ん、分かりやすい・・・
お気に入りに登録だな、こりゃw
では★★
[ 2006/10/24 18:23 ] [ 編集 ]
こんばんは!
リンクありがとうございました。
私も早速、貼らせてもらいましたよ♪
これからも宜しくお願いします。
また、遊びに来ます~
[ 2006/10/24 21:04 ] [ 編集 ]
こんばんわ
テーブルはどうも好きになれないんですけど、
わかりやすい説明ですね^^
その道の仕事されてるとかですか?

一括ランキングは一歩間違えばブラクラですね(^^;

ぽちぃ
[ 2006/10/24 23:12 ] [ 編集 ]
こんばんは
いつ見ても分かりやすいですね!!
ブログでここまで丁寧に作成するのは時間がかかるのではないですか??
私も見習わなくては…。

応援ぽち
[ 2006/10/24 23:24 ] [ 編集 ]
こんばんは~
今日もわかりやすくて勉強になります。
先日、表をがんばってつくりましたが、また表を作ってみたくなります(^^)
次回も楽しみにしています♪
応援ぽち
[ 2006/10/24 23:27 ] [ 編集 ]
こんばんは
元気っ子のつかチ~です^^v
訪問&コメントありがとうございます。
とても分かりやすいブログなのでリンクを貼らせていただきました。
また何かあればご連絡ください。
それではまた来ますね~^^
[ 2006/10/25 00:28 ] [ 編集 ]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2006/10/25 01:04 ] [ 編集 ]
こんばんは♪
わぁ、いつもながら、とっても分かりやすいですね。
次回も期待してます。

視力悪いんですかぁ。 
私は、視力検査の一番上は1m弱からでも裸眼じゃ見えないです。
視力回復とかよく聞きますけど、効果あるのかなぁ。。

んじゃ、またきますねぇ。
[ 2006/10/25 01:38 ] [ 編集 ]
ちわ
いもながら、わかりやすいですね~
なんとなく使ってたTABLEの構造が判ってきましたよ^^;
ではでは☆
[ 2006/10/25 13:08 ] [ 編集 ]
こんにちは。
懇切丁寧な説明。
毎度感心させられます。
次の更新も楽しみにしてますね♪
[ 2006/10/25 14:40 ] [ 編集 ]
こうやって、順を追って説明されると分かりやすいですね。
また来ます♪
[ 2006/10/25 15:05 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。