記事本文を飾り付けてみよう「（その２５）Wiki超入門１５」

前回はテーブルの色やサイズの変更をしましたが、今回はそのテーブル内での文字の位置を変えてみたいと思います。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、工夫次第でもしかしたら凄いレイアウトが出来るかもしれません。是非試してみてくださいね。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ align=横の揃え方 valign=縦の揃え方 ``表の文

[align属性]
左揃え => left
中央揃え => center
右揃え => right

[valign属性]
上寄せ => top
中央揃え => middle
下寄せ => bottom

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

基本の位置は、横＝左揃え・縦＝中央揃えになっています。それ以外に変更したい時は以下の様に設定してください。

■テーブルの文字の横の位置を変える（align属性）

文法）
||||
||<#ccffff' width=100 height=100 align=left ``左揃え
||<#ccffff' width=100 height=100 align=center ``中央揃え
||<#ccffff' width=100 height=100 align=right ``右揃え

結果）

左揃え	中央揃え	右揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の縦の位置を変える（valign属性）

文法）
||||
||<#ccffff' width=100 height=100 valign=top ``上寄せ
||<#ccffff' width=100 height=100 valign=middle ``中央揃え
||<#ccffff' width=100 height=100 valign=bottom ``下寄せ

結果）

上寄せ	中央揃え	下寄せ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の位置を変える（いろいろ組み合わせてみる）

文法）
||||
||<#ccffff' width=100 height=100 align=left valign=top ``左・上揃え
||<#ccffff' width=100 height=100 align=left valign=middle ``左・中央揃え
||<#ccffff' width=100 height=100 align=left valign=bottom ``左・下揃え
||||
||<#ccffff' width=100 height=100 align=center valign=top ``中央・上揃え
||<#ccffff' width=100 height=100 align=center valign=middle ``中央・中央揃え
||<#ccffff' width=100 height=100 align=center valign=bottom ``中央・下揃え
||||
||<#ccffff' width=100 height=100 align=right valign=top ``右・上揃え
||<#ccffff' width=100 height=100 align=right valign=middle ``右・中央揃え
||<#ccffff' width=100 height=100 align=right valign=bottom ``右・下揃え

結果）

左・上揃え	左・中央揃え	左・下揃え
中央・上揃え	中央・中央揃え	中央・下揃え
右・上揃え	右・中央揃え	右・下揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？
ますます細かい設定が出てきてしまいましたが、少しずつやっていけばそんなに難しいことではありません。一つ一つやってみてくださいね。

※ここでは、例として色や大きさを設定していますが、ご利用の際にはお好きな色と大きさを指定してください。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

初めまして！お気に入り登録させていただきました(*´∇｀*) これから参考にさせていただきます♡

はじめまして、MAYAさん。お気に入り登録ありがとうございました。こちらこそ、今後もよろしくお願いしますね。

[-]

こんにちはっす。表で中央揃えができればいいのにと思っていました。どうもありがとうございます。非公開書庫にですが、転載させていただきました。(-人-)

miyaさん、お久しぶりです。転載ありがとうございますね。最近、連続で紹介しているCSSですが、miyaさんの所に合うかもしれません。良かったら読んでみてくださいね。いつも、ありがとうございます。

はじめまして！ブログを始めて約10日ですが、こんな素晴らしいブログにめぐり合えて、超・感動しています。 ところで、表のセルの中で、改行するとか、一部分だけ太字にすることは、可能なのでしょうか？

はじめまして♪やってみたかったことが丁寧・簡単に説明してあり、ＰＣ音痴の私にもなんとかできました。ありがとうございましたヽ(*^^*)ノ

[-]

はじめまして。こちらの記事が、 Excel の表を Wiki 文法の形に書き換えるマクロを書くのにとても役に立ちました。特に数値データの入ったセルを、後揃えすることが、こちらの align=right を使用してできました。ありがとうございます。そのときの僕のブログの記事をトラックバックいたします。

転載させてください

[看護学校受験生]

転載とポチっとしていきますね＾＾

[中将]

初めまして、中将と申します。
いきなりですが、コマンドなどを使わせてもらいます。
本当にありがとうございます。