☆ Sanctuary ☆  Smile for you

TABLEタグ(8)

テーブルタグ <table> の使い方を覚えよう!!(8)
table タグはページの作成に欠かせないものです。
table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう!!
● 日記の文章を縦書きにするには?
文章を縦書きにするには、 style="writing-mode:tb-rl;" という記述を使います。
ここでは行間を半行分あけてみましょう。 line-height:150%;
高さも適当に調節してみましょう。 height="220"
TABLEの枠からの隙間を適当にあけてみます。 cellpadding="10"
そして文章を左寄せにしてみます。 valign="bottom"

(注意!)
 ( ・o・)b 通常 bottom は下寄せですが、縦書きにした場合には align と valign が
 見かけ上、逆の扱いになるので注意しましょう!


また縦書き部分を align="left" にすることが大切です。(これは上寄せになります)
わかりやすくテーブルの枠を出しておきましょう。 border="1"

<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="220" ><td align="left" valign="bottom" style="writing-mode:tb-rl;line-height:150%;" >
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか
</td></tr></table>


こんな感じになります。↓↓

いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか

( ・o・)b 文章を右寄せにしてみましょう! valign="top"

<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="220"><td align="left" valign="top" style="writing-mode:tb-rl;line-height:150%;">
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか
</td></tr></table>


こんな感じになります。↓↓
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか

( ・o・)b 文章を中央寄せにしてみましょう! valign="middle"

<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="220"><td align="left" valign="middle" style="writing-mode:tb-rl;line-height:150%;">
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか
</td></tr></table>


こんな感じになります。↓↓

いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか

( ・o・)b 画像を文章の下に入れてみましょう!
<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="220"><td align="left" valign="middle" style="writing-mode:tb-rl;line-height:150%;">
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/83.jpg" width="400" height="220">
</td></tr></table>


こんな感じになります。↓↓

いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています

(・・∂) アレ?下に表示するつもりが左側に出てしまいました!
そうなんです!上下逆転しているので、下位置が左位置になってしまっているんです!
・・・ということは、テーブルを2行にして2行目に画像を表示するようにすればうまくいきそうです。
( ・o・)b テーブルを2行にして2行目に画像を入れて見ましょう!
2行目の画像は中央に配置してみます。 align="center"

<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="220"><td align="left" valign="middle" style="writing-mode:tb-rl;line-height:150%;">
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか
</td></tr><tr><td align="center" > <img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/83.jpg" width="400" height="220"> </td></tr></table>


こんな感じになります。↓↓

いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか

( ^o^)b これでうまくいきましたね!!

( ・o・)b 最後に枠を取ってしまいましょうか。

<table border="0" cellpadding="10" cellspacing="0" width="550"><tr height="220"><td align="left" valign="middle" style="writing-mode:tb-rl;line-height:150%;">
いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか
</td></tr><tr><td align="center"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/83.jpg" width="400" height="220"></td></tr></table>


こんな感じになります。↓↓

いくつになっても
みずみずしい心を
持って生きていきたいものです
みずみずしい心で人を愛し
柔軟な心で
自分を変えていきたいものです
この世の中には
移り変わらないものは
何もありません
すべてのものが
新しく生まれ変わっています
移ろいゆく世界だからこそ
悲しみもあり
よろこびもあり
私たちの心のひだが
深まってゆくのです
日々に変化していく
私たちだからこそ
味わえる楽しさが
あるのではないでしょうか


( ・o・)b もう一つおまけに文章の一部分に色をつけて線を引いてみましょう!
下線指定は、 style="text-decoration:underline;" です。
また上側に線を引く場合は text-underline-position:above; ですが、
これは縦書きの文章では実際は右側になります。
また下側に線を引く場合は text-underline-position:below; ですが、
これは縦書きの文章では実際は左側になります。
ここでは、 緑色の文字と右線 濃いピンク色の文字と左線 の2つをやってみます。

<table border="1" cellpadding="10" cellspacing="0" width="550"><tr height="250"><td align="left" valign="middle" style="writing-mode:tb-rl;line-height:150%;" >
新しい力 導いてくれた
<span style="text-decoration:underline;text-underline-position:above;color:forestgreen;"> あの日の涙を きっと忘れない </span>
大切にしてた夢
いつかは失くしてしまうのかな
何度もつまづくたび
しぼんだ気持ちを 握りしめて
<span style="text-decoration:underline;text-underline-position:below;color:deeppink;"> 言葉にできない 熱い情熱を </span>
胸の奥で 確かめてる
叶わない夢と あきらめるよりも
わずかな奇跡を 信じ続けたい
</td></tr></table>


こんな感じになります。↓↓

新しい力 導いてくれた
あの日の涙を きっと忘れない
大切にしてた夢
いつかは失くしてしまうのかな
何度もつまづくたび
しぼんだ気持ちを 握りしめて
言葉にできない 熱い情熱を
胸の奥で 確かめてる
叶わない夢と あきらめるよりも
わずかな奇跡を 信じ続けたい

( ^o^)b どうだったでしょうか?
ここで注意しなければいけないのは縦書きにしたときは、align と valign  の扱いが逆になることですね!

他にもPタグを使ってももちろん同じことはできます。
ただ、Pタグは日記の中ではうまく高さ調節ができないようです。(2004年11月時点)
なのでここではTABLEタグを使ってみました。
みなさんも縦書き日記を試してみるとよいでしょう!
このタグをそのまま真似して使えます。
ただ高さ、その他の属性についてはお好みで変えてください。
それでは、く( ̄Д ̄)ノガンバローーー♪

(注意)ここでのタグはIE5.5以上に対応しています。

table tag (8)


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