バカネコ日記

バカネコ講座、テーブルレイアウト編の第３回目。
前回までの内容を忘れた方、今回初めて読む方は、以下のリンクをたどって
予備知識を仕入れていただきたい。

　　レイアウトの方法　１　→　写真の横に説明文をつける
　　レイアウトの方法　２　→　レイアウトに使う英単語

テーブルは、いろいろと細かい設定をすることが可能だ。
しかし、初心者が最初から大きな、あるいは、複雑な形状をした表を
作ろうとすると、まず間違いなく挫折する。

必要なところだけ、ひとつずつ覚える、というのが正解である。
いっぺんに、暗記して詰め込んだところで、使いこなせなければ
全く意味はない。

カエルにゃんに変身

恋のキューピット☆

ティペット・ダルメシアン

まずは、「画像の横に複数行の説明文を入れる」という
簡単なところから始めよう。
その手順は「レイアウトの方法　１」で、説明した。
これが、基本的なテーブルの作り方である。

１行２列、すなわち、２マスしかない表を作って、
左のマスに写真を入れ、右のマスに解説文を流し込む。
これで、写真と文章の配置を振り分けることが出来る。

このネコはヒマラヤン種。

さて、上記の方法では、内部の位置までは決められない。
当たり前である。
何も指定していないのだから。

というわけで、今回は、予告通り、写真の横に説明文をつける際、
文章の位置を、写真の上辺、または下辺にそろえる呪文(パラメータ)
について解説する。

下記の例は見やすくするために、枠線を表示してあるが、
しかし、レイアウトに使う際には、枠線は消しておくことが多い。
したがって、以下の例では、枠線表示用のborderタグは省略してある。

何もしない場合

このネコはヒマラヤン種。

　　　↓
上に揃えた例

このネコはヒマラヤン種。

さっそく、右マスの中の文章を、写真の上辺に揃えてみよう。
この指示をする呪文は、valign="top"　である。

align とは「位置」という意味だ。
それに「垂直」を意味する「vertical」の頭文字「v」を
取ってつけたと思えばよい。
もちろん、HTML用の用語であって、まともに辞書を引いても
見つかるまいが、そんなことはこの際、気にしない、気にしない。

つまり、垂直方向の位置は「top」ですよ、という指示だ。
これを、文章用のマス、つまり２番目の tdタグの中に仕込んでやればよろしい。
タグは以下のようになる。
　　　<table>
　　　<tr>
　　　<td> src="MyURL"></td>
　　　<td valign="top">このネコはヒマラヤン種。</td>
　　　</tr>
　　　</table>

逆に、下に揃える時は、valign="bottom" を仕込んでやればよい。
差は、top か bottom かの違いだけだ。
　　　<table>
　　　<tr>
　　　<td> src="MyURL"></td>
　　　<td valign="bottom">このネコはヒマラヤン種。</td>
　　　</tr>
　　　</table>

これをブラウザに表示すると、以下のようになる。

このネコはヒマラヤン種。

同様に、意図的に上下の真ん中に位置させるには、
valign="middle" を使えばよい。( タグは省略 )

以上の意味が分かれば、水平方向に配置する時も応用が利く。
左右、あるいは中央に寄せるには、valign ではなく、align で指定する。
同じ要領で、tdタグの中に、align="left" などと指定すればよい。
いっぺんにやると覚えきれないので、本日はここまで。

【注意】
　読みやすくするために、上記のサンプルは複数行で示したが、
　日記ページでは、自動改行されるので、すべて１行になるよう、
　つなげて書かないと、意図に反して、極端に間延びする。
　これは、日記ページでテーブルを使う時の「お約束」である。

【次回のお話】
　テーブルとマスの大きさを指定するには？
　．．．と思ったけど、予定を変更。
　PCネタは、笑いが少ないせいか、コメントも反応も少ないのよ～。
　ぐすん。
　なので、明日はアホネタ！
　スズメの学校の替え歌をお届けします。

【トド短信】
　ま～た、真面目な解説書いてるにゃ～。
　もっとアホなネタを探さねば。
　また、バカネコ川柳でも企画するか？


【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン３号のサンプル版、
　「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

１日１票！　ブログランキング→


※バカネコ講座では、安全な方法を選んで紹介していますが、
　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。


ネコでもわかるＰＣ講座はこちら　→　バカネコ講座

悲惨なキャンセル事情　バカネコ講座　バカネコソフト　バカネコ村　爆笑ガイド　猫砂の研究　パソコン購入費用の削り方　現物の投下位置　ずぼらなアクセスアップ　ページを読みやすくする方法　バーニャン・ミニ　楽天日記のバックアップ　にゃんこのコスプレ　テキストリンク下線の消し方　楽しめるアフィリ　己を知れ　自分のＰＣを知る　バカネコ・ビューア　バーニャン３号　にゃんタグ・フルバージョン　【楽天トラベル】


画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。