バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類バカネコＰＣ講座 | バカネコのお話

2005年07月26日

本日の講義は、うまくいかないテーブルタグの添削指導。

今回はやたら長いソースが出てくるが、細かく見る必要はない。
HTMLソースの行末だけ、注意していただければよろしい。

楽天日記の自動改行システムを使うと、文章を書くには便利な反面、
HTMLのタグを使う時は、注意が必要である。

楽天日記といえどHTMLで構成されているから、改行するには タグが必要。
毎回、入力するのは大変だから、初心者向けと称して自動改行するシステムがある。
しかし、ここで注意すべき点がある。

自動改行というのは、自動的に書き換えるシステム、でもあるのだ。
入力したとおりに、アップロードするわけではない。
各行の行末に、必ず、 タグを、自動で追加しているのである。

あなたが入力したとおりに、アップされるなら、間延び現象など起こらない。
無条件で、書き換えられてアップされる、ということに、気づかねば、
いつまでたっても、問題は解決しないのである。

それでは、自称「美しき乙女」の悩みにお応えして、添削実習に入ろう。
彼女が作った、テーブルは以下のようなものある。

このHTMLソースを、ざっと検討しよう。
本人は、
<table border="3"><td><center>7/26 午後15時現在</center></td>
<tr><td> 1位　小梅さん(63票)</td>
<tr><th>何かひと癖ありそうな所が好みです。</td>
<tr><td> 2位　ミルノ(61票）</td>
<tr><th>顔に似合わぬ性格のよさに一票（＾＾</td>
<tr><td> 3位　むう(33票)</td>
<tr><th>まるで、妖怪ですね(笑)</td>
<tr><td> 4位　銀次郎さん(23票)</td>
<tr><th>迫力満点(ノ´▽｀)ノオオオオッ♪</td>
<tr><td> 5位　ティオさん(15票)</td>
<tr><th>トンガってまんな～</td>
<tr><td> 5位　ひなのすけさん(13票）</td>
<tr><th>こわい・・・！！</td>
<tr><td>7位　sissiさん(11票)</td>
<tr><th>極悪というには可愛すぎます♪</td>
<tr><td> 7位　槍万アケミさん(11票）</td>
<tr><th>可愛いので、1票！！</td>
<tr><td> 7位そのこさん(11票)</td>
<tr><th>カンロクがありますねぇ。</td>
<tr><td> 7位　うりさん(11票）</td>
<tr><th>目が離せません</td>
</table>

と、入力したはずだ。
しかし、実際に表示されている、画面のソースを拾ってみると、
次のようになっている。

これを見ると、すべての行末に、改行タグが、律儀なまでに
くっついているではないか。
ここでは、 というのは、 と同じものと考えていただきたい。

それぞれが、行を変えて書かれているので、１行の終点を見つけては
わざわざ、改行タグを追加してくれたわけだ。
これが、自動改行システムの「お仕事」である
こういう、余計な改行タグを入れてくれるので、どんどん間延びするのだ。

だが、しかーし！
今回ばかりは、自動改行システムのせいではない。
テーブルの書き方が、根本から間違っているのだ。

まず、それぞれの、タグの対応が取れていない。
<th> で開始したのなら、 </th> タグで閉じるのが、基本なのだが、
</td> タグで閉じている。
こういう、ちぐはぐな書き方をしているのに、まともに表示できること自体、
不思議と言わねばなるまい。
本来なら、以下のように表示されても、おかしくないのだ。

対策としては、これはもう、添削より、書き直した方が早い。
とりあえず、以下のように書けば、矛盾はなくなる。

[途中経過発表]<table border="3"><td><center>7/26 午後15時現在</center>
<tr><td> 1位　小梅さん(63票)</td></tr>
<tr><td>何かひと癖ありそうな所が好みです。</td></tr>
<tr><td> 2位　ミルノ(61票）</td></tr>
<tr><td>顔に似合わぬ性格のよさに一票（＾＾</td></tr>
<tr><td> 3位　むう(33票)</td></tr>
<tr><td>まるで、妖怪ですね(笑)</td></tr>
<tr><td> 4位　銀次郎さん(23票)</td></tr>
<tr><td>迫力満点(ノ´▽｀)ノオオオオッ♪</td></tr>
<tr><td> 5位　ティオさん(15票)</td></tr>
<tr><td>トンガってまんな～</td></tr>
<tr><td> 5位　ひなのすけさん(13票）</td></tr>
<tr><td>こわい・・・！！</td></tr>
<tr><td>7位　sissiさん(11票)</td></tr>
<tr><td>極悪というには可愛すぎます♪</td></tr>
<tr><td> 7位　槍万アケミさん(11票）</td></tr>
<tr><td>可愛いので、1票！！</td></tr>
<tr><td> 7位そのこさん(11票)</td> </tr>
<tr><td>カンロクがありますねぇ。</td></tr>
<tr><td> 7位　うりさん(11票）</td></tr>
<tr><td>目が離せません</td> </tr>
</table>

間延び防止策としては、これを１行に繋げてしまえばいい。
すなわち、以下のように書く。

[途中経過発表]
<table border="3"><td><center>7/26 午後15時現在</center></td><tr><td> 1位　小梅さん(63票)</td></tr><tr><td>何かひと癖ありそうな所が好みです。</td></tr><tr><td> 2位　ミルノ(61票）</td></tr><tr><td>顔に似合わぬ性格のよさに一票（＾＾</td></tr><tr><td> 3位　むう(33票)</td></tr><tr><td>まるで、妖怪ですね(笑)</td></tr><tr><td> 4位　銀次郎さん(23票)</td></tr><tr><td>迫力満点(ノ´▽｀)ノオオオオッ♪</td></tr><tr><td> 5位　ティオさん(15票)</td></tr><tr><td>トンガってまんな～</td></tr><tr><td> 5位　ひなのすけさん(13票）</td></tr><tr><td>こわい・・・！！</td></tr><tr><td>7位　sissiさん(11票)</td></tr><tr><td>極悪というには可愛すぎます♪</td></tr><tr><td> 7位　槍万アケミさん(11票）</td></tr><tr><td>可愛いので、1票！！</td></tr><tr><td> 7位そのこさん(11票)</td> </tr><tr><td>カンロクがありますねぇ。</td></tr><tr><td> 7位　うりさん(11票）</td></tr><tr><td>目が離せません</td> </tr></table>

これで、ちゃんと表示できるはずである。

ちなみに、<th>タグは、表の見出しに使うものであって、
太字にするのが目的ではない。　太字にするには、タグが順当だ。

【本日のポイント】
１．自動改行の設定されたページでは、入力したものと
　　サーバにアップされるものは、同じではない。
２．各行の行末に、改行タグが自動追加されるのが、間延びの原因。
３．間延びを防ぐには、行を変えずに、１行につなげて書く。
４．テーブルの、書き方そのものを、間違えないこと。

【関連ページ】
自動改行のワナ　前編
自動改行のワナ　後編
自動改行とは何か
レイアウトの方法　１

【トド短信】
テーブルの、改行つぶしソフトを公開した方が、いいかな。
めんどくさいけど、ほっておくと、また自分だけ使ってずるい～！
なんて言われるかなぁ。

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

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

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

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

悲惨なキャンセル事情バカネコ講座バカネコソフトバカネコ村爆笑ガイドページを読みやすくする方法バーニャン・ミニ楽天日記のバックアップ

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

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