ＴＡＢＬＥタグ（８） | ☆ Sanctuary ☆ Smile for you

テーブルタグ　<table>　の使い方を覚えよう！！（８）

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>

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

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

(・・∂) アレ？下に表示するつもりが左側に出てしまいました！
そうなんです！上下逆転しているので、下位置が左位置になってしまっているんです！
・・・ということは、テーブルを２行にして２行目に画像を表示するようにすればうまくいきそうです。
( ・o・)b テーブルを２行にして２行目に画像を入れて見ましょう！
２行目の画像は中央に配置してみます。 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; ですが、
これは縦書きの文章では実際は左側になります。
ここでは、緑色の文字と右線、濃いピンク色の文字と左線の２つをやってみます。

<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 　の扱いが逆になることですね！

他にもＰタグを使ってももちろん同じことはできます。
ただ、Ｐタグは日記の中ではうまく高さ調節ができないようです。(2004年11月時点)
なのでここではＴＡＢＬＥタグを使ってみました。
みなさんも縦書き日記を試してみるとよいでしょう！
このタグをそのまま真似して使えます。
ただ高さ、その他の属性についてはお好みで変えてください。
それでは、く(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪

(注意)ここでのタグはＩＥ５．５以上に対応しています。