|
カテゴリ:バカネコ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号 にゃんタグ・フルバージョン 【楽天トラベル】 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。
[バカネコPC講座] カテゴリの最新記事
|
|