バカネコ日記

フリーページ

2005年07月17日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
バカネコ講座、テーブルレイアウト編の第3回目。
前回までの内容を忘れた方、今回初めて読む方は、以下のリンクをたどって
予備知識を仕入れていただきたい。

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

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

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


カエルにゃんに変身

恋のキューピット☆

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


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

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

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


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

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

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

何もしない場合
このネコはヒマラヤン種。

   ↓
上に揃えた例
このネコはヒマラヤン種。


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

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

つまり、垂直方向の位置は「top」ですよ、という指示だ。
これを、文章用のマス、つまり2番目の 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" などと指定すればよい。
いっぺんにやると覚えきれないので、本日はここまで。

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

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

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


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

1日1票! ブログランキング→ぜひ、クリックしてね


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


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


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


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







最終更新日  2005年07月19日 13時13分31秒
コメント(18) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.