i-8jo.com(Yahoo!blog入門)

八丈島発!初心者の為のヤフーブログ入門です。

過去の投稿日別表示

[ リスト | 詳細 ]

全1ページ

[1]

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


※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 ``右・下揃え

結果)
左・上揃え 左・中央揃え 左・下揃え
中央・上揃え 中央・中央揃え 中央・下揃え
右・上揃え 右・中央揃え 右・下揃え

====================================


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

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


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

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




[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、https://blogs.yahoo.co.jp/IMG/ybi/1/58/7d/i_8jo/folder/79519/img_79519_153844_4?1109001531ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝!!

[☆歓迎☆]
コメント・トラックバック大歓迎!
転載をご希望の方は右下のhttps://blogs.yahoo.co.jp/IMG/ybi/1/58/7d/i_8jo/folder/79519/img_79519_153844_5?1109001571を押してください。

開く トラックバック(4)

全1ページ

[1]


よしもとブログランキング

もっと見る

[PR]お得情報

いまならもらえる!ウィスパーWガード
薄いしモレを防ぐパンティライナー
話題の新製品を10,000名様にプレゼント
ふるさと納税サイト『さとふる』
実質2000円で特産品がお手元に
11/30までキャンペーン実施中!
いまならもらえる!ウィスパーうすさら
薄いしモレを防ぐ尿ケアパッド
話題の新製品を10,000名様にプレゼント

その他のキャンペーン


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事