2005年05月17日
XML
カテゴリ: バカネコPC講座
バカネコ村の記事を検索する
本日のバカネコ講座は、文章の配置方法。

さて、予告した表の中の文章の配置であるが、本来、背景とは関係がない。
テーブルタグの書き方の問題である。
が、このような使い方は、よくあるので紹介しよう。

こんにちは


上の図を見ると、文字が左詰め、かつ中央付近に位置している。
このままでよければ、ほっておいてもよいのだが、
普通は、左詰め、上詰めの場合が多いと思われる。

無指定だと、サーバによっては配置が思うようにならないことがある。
ならば、キッチリ指定すればよい。
上詰めにするには、tdタグにvalign="top"という呪文を入れるだけだ。
こんにちは

こうすることで、そのtdタグに挟まれた文章は、強制的に上詰めで表示されるようになる。
すなわち以下のように書く。
<table border="3" background="画像のURL"><tr><td valign="top" >こんにちは</td></tr></table>
( 一部タグは省略してある )



あとは、ワンパターンである。
垂直方向に中央揃えなら、valign="top"の代わりに、 valign="middle"
下揃えなら、 valign="bottom" 、を放り込めばよい。

ついでに、水平方向の左詰め指定は align="left"、右詰は align="right"
中央揃えは align="center" を追加してやればよいことになる。
これらは、表中の文字に限らず、他の場面でも使うことがある。
こういうツブシのきくパターンは、きっちり暗記しておこう。
覚えるのに要した労力のモトは取れる。



なかなか、タグの中に書き込む属性(呪文)が覚えにくいと思うが、
もとは英語から来ているので、その意味が分かると多少はマシになるかもしれない。

align は整列するという意味で、left、right、centerは、左、右、中央である。
valignは、alignに「垂直」という意味の「vertical」の頭文字「v」を付けた、
と考えればよろしい。
これらを組み合わせて、tdタグの中にぶち込んでやれば、
表(正確にはセル)の中の配置は自由に設定できる。

例えば、垂直方向上詰め、水平方向は中央揃えにしたければ
tdタグは、
<td align="center" valign="top">こんにちは</td>
となる。
こんにちは



さて、ここで、注意事項。
トップページや、フリーページなら設定解除も出来るが、
日記ページは、無条件で自動改行されることをお忘れなく。
上記のタグは改行を入れずに1行で書かないと、間延びする。
なぜ、びろ~んと延びるかについては 「テンプレートが崩れた」
原因を説明している。

自動改行や改行コードについては、 バカネコ講座
「パソコン用語の基礎知識」の項に説明してある。
それも面倒だという方は、以下のリンクから直接飛べるので、
ご参照いただきたい。
・改行コードの解説
・自動改行とは何か
・改行コードとは



【本日のまとめ】
1.表内の文章配置は、tdタグ内に呪文を追加する。
2.横方向は align、縦方向は valign で指定。
3.左右中央指定は、left、right、center で。
4.縦方向の上中下は、top、middle、bottom で。

【トド短信】
 英語そのまんまやんけ。
 はぁ...ここは、中学生レベルの英語教室か?
 いちおう、社会人向けのつもりなのだが。


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

この記事が役に立ったと思う人は1票! クリック →おもしろかったらクリックしてね




 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。



ネコでもわかるPC講座はこちら →  バカネコ講座
秋葉原にもない楽天専用ツール  →  バカネコソフト



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


HTMLオンチでもOK! いきなり使える



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






お気に入りの記事を「いいね!」で応援しよう

最終更新日  2005年05月17日 16時05分05秒
コメント(22) | コメントを書く


■コメント

お名前
タイトル
メッセージ
画像認証
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


Re:表中の文章の配置方法(05/17)  
MIE@VP  さん
ある程度わかってても、自動改行の罠に・・・(T-T)
便利なんだか不便なんだか。
面倒だから、ついべたべた書くばっかりになります。 (2005年05月17日 16時15分04秒)

MIE@VPさんへ  
海獣トド  さん
>ある程度わかってても、自動改行の罠に・・・(T-T)
>便利なんだか不便なんだか。
>面倒だから、ついべたべた書くばっかりになります。

そうなんですよね~。
ベタ書きなら、自動改行は便利な機能なんですけどね。

(2005年05月17日 16時36分19秒)

あっ,なるほど・・・  
判った(つもり)と言っても,
やはりタグは呪文に見えてしまう・・・
ましてニャンタグを使ってしまうとなおさらです。
メモリが少なくて,補習×3くらい読まないと!
トド教授のPC講座は消えませんよね?

(2005年05月17日 17時27分25秒)

てっちゃわんさんへ  
海獣トド  さん
>判った(つもり)と言っても,
>やはりタグは呪文に見えてしまう・・・
>ましてニャンタグを使ってしまうとなおさらです。

あら、悪いモノを作ってしまったかしら(笑)
ズボラが出来るので、自分でも、つい使っちゃいます...

>トド教授のPC講座は消えませんよね?

自分では消さないつもりですが...。
楽天さんの御機嫌を損ねないようにしなくちゃ(笑)

(2005年05月17日 18時32分06秒)

Re:表中の文章の配置方法(05/17)  
muchocho  さん
お久しぶりです。
今頃ですが「テンプレートが崩れた」を見ました。
疑問が解決しました。そう、今までどうしていいか分からなかったのでございます。
ああ、すっきりしたワイ!
(2005年05月17日 20時17分44秒)

Re:表中の文章の配置方法(05/17)  
*みあな*  さん
_(^^;)ゞこんばんはトドさん
いいなぁ~かわいいよねぇ言葉が入るのって
(2005年05月17日 20時39分42秒)

Re:表中の文章の配置方法(05/17)  
うん、今日のもいろいろ応用できるね(^_^)
しっかりコピーしときました。
英語はなかなか覚えられないんだけどね、
アリグン、バリグン…ってよぶと、なんだか
覚えやす~い(^_^)。
(2005年05月17日 21時55分31秒)

Re:表中の文章の配置方法(05/17)  
nyanyagon  さん
なかなか呪文を覚えられないので
よく使うものは、TeraPadで単語帳作って使ってます。

バカネコ講座で、テンプレートの崩れを直す方法を知った時には
小躍りするくらい嬉しかったにゃ~♪

トドしゃんちでは、今更聞けない恥ずかしいような事でも
こっそり学べるから重宝してますにゃ(笑)
(2005年05月17日 21時59分02秒)

Re:表中の文章の配置方法(05/17)  
bashiまま  さん
以前ほどアレルギーではないけれど・・・
少しずつタグのことわかってきましたが、やっぱりまだまだですね。
前のことを忘れていたりしてますもん。使うほどでしょうね。 (2005年05月17日 22時16分17秒)

muchochoさんへ  
海獣トド  さん
>今頃ですが「テンプレートが崩れた」を見ました。
>疑問が解決しました。そう、今までどうしていいか分からなかったのでございます。
>ああ、すっきりしたワイ!

おお! アタマの便秘解消ですねっ!
って、たとえが悪いか...(笑)

(2005年05月17日 22時39分03秒)

*みあな*さんへ  
海獣トド  さん
>_(^^;)ゞこんばんはトドさん
>いいなぁ~かわいいよねぇ言葉が入るのって

使い方によっては、画像を加工せずに、使い回すことも出来ますから
便利ですよね。

(2005年05月17日 22時39分55秒)

ひまわり7272さんへ  
海獣トド  さん
>英語はなかなか覚えられないんだけどね、
>アリグン、バリグン…ってよぶと、なんだか
>覚えやす~い(^_^)。

にゃはは!
アラインって読むんですけどね、覚えにくいですわ(笑)

(2005年05月17日 22時40分59秒)

nyanyagonさんへ  
海獣トド  さん
>なかなか呪文を覚えられないので
>よく使うものは、TeraPadで単語帳作って使ってます。

おお! 懐かしの受験勉強!

>バカネコ講座で、テンプレートの崩れを直す方法を知った時には
>小躍りするくらい嬉しかったにゃ~♪

にゃは! 喋りすぎたかにゃ?

>トドしゃんちでは、今更聞けない恥ずかしいような事でも
>こっそり学べるから重宝してますにゃ(笑)

ありがとうございます。
バカネコ講座でよろしければ、ガンガンご利用下さいな。

(2005年05月17日 22時43分34秒)

Re:表中の文章の配置方法(05/17)  
alice liddell  さん
タグのベースは英語なのですね。ということは根性出せば呪文の解読もできるようになるかしらん・・・
(2005年05月17日 22時43分46秒)

bashiままさんへ  
海獣トド  さん
>前のことを忘れていたりしてますもん。使うほどでしょうね。

そうですね。
簡単なのを何度も反復して使えば、慣れは加速しますよん。

(2005年05月17日 22時44分29秒)

alice liddellさんへ  
海獣トド  さん
>タグのベースは英語なのですね。ということは根性出せば呪文の解読もできるようになるかしらん・・・

もちろん!
意味が分かると、なんて安直なルールかしら、と呆れますよん(笑)
ものすごく、ベタな書き方ですから。
ただ、ならべてあるだけ!

(2005年05月17日 22時46分29秒)

Re:表中の文章の配置方法(05/17)  
タグとか、ちゃんと覚えられるようになりた~い。

講座を読んでると 時折わかった気にもなるんだけど、
それが 自分にどうつながるのか・・・(^^;

何をやりたくて、どうしたいのかが明確でないから
質問すら出来ませんわ(^^ゞ

(2005年05月17日 22時52分11秒)

海獣トド先生へ  
もぐらのこ  さん
先生今日も何とか理解しました(>_<)これからも落ちこぼれ気味の私に救いの手を(*^。^*) (2005年05月17日 23時29分02秒)

ねこの肉球☆さんへ  
海獣トド  さん
>タグとか、ちゃんと覚えられるようになりた~い。
>講座を読んでると 時折わかった気にもなるんだけど、
>それが 自分にどうつながるのか・・・(^^;
>何をやりたくて、どうしたいのかが明確でないから
>質問すら出来ませんわ(^^ゞ

良いところに気がつきましたね。
目的が曖昧だと、取るべき手段がわからないのです。
狙いを定めましょうね!

(2005年05月18日 00時30分25秒)

もぐらのこさんへ  
海獣トド  さん
>先生今日も何とか理解しました(>_<)これからも落ちこぼれ気味の私に救いの手を(*^。^*)

おおー、来たか!
よしよし、キミはいい子だ。
なでなで...

(2005年05月18日 00時31分28秒)

Re:表中の文章の配置方法(05/17)  
archfelis  さん
英語・・・・。
数学とどちらを優先するかと言う、究極の教科ですね。
プログラム言語のほとんどが英語ベースなのは不公平だと思います。
・・・社会人、いまだ英語と数学の呪縛から抜けられません・・・・。


(2005年05月18日 23時02分12秒)

archfelisさんへ  
海獣トド  さん
>プログラム言語のほとんどが英語ベースなのは不公平だと思います。

日本語のもあるそうですが、かえって辛いそうですよ?

>・・・社会人、いまだ英語と数学の呪縛から抜けられません・・・・。

にゃはは! だから、子供の頃から学校で教えるんですね。

(2005年05月19日 00時00分54秒)

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X

PR

×

バックナンバー

2026年07月
2026年06月
2026年05月
2026年04月
2026年03月

プロフィール

海獣トド

海獣トド

コメント新着

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

© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: