バカネコ日記

フリーページ

2005年07月22日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
バカネコ講座を始める。

本日の講義は、自動改行の補習。
楽天日記に限らず、掲示板やブログでも、よく使われる自動改行であるが、
うっかりすると、原因不明のトラブルに見舞われる。
HTMLを使える場合は、特に注意が必要だ。

このテーマについては、これまでも何度か、解説したが、
今日は別の角度から、原因を観察してみよう。

次の3行からなる文章を見ていただきたい。

  例文1
  こんにちは。
  バカネコ日記です。
  さようなら。


何もしなくても、ちゃんと3行になっている。
だが、HTMLの規則では、このような書き方をすると、以下のように
1行になってしまう。 すなわち、

  例文2
  こんにちは。バカネコ日記です。さようなら。

HTMLでは改行する場合は、<br>タグで、その改行位置を
指定しなければならない。
だから、HTML的に正しく書くと、

  例文3
  こんにちは。<br>
  バカネコ日記です。<br>
  さようなら。<br>


または、

  例文4
  こんにちは。<br>バカネコ日記です。<br>さようなら。<br>

となる。

楽天日記も、れっきとしたホームページであり、HTMLで構成されているから
このルールに従わなくてはならない。
そうしないと、インターネットエクスプローラなどで、まともに表示されない。
全部、金魚のウンコになってしまう。

だが、ただの文章を書くのに、毎回、行末に<br>を付け加えるのは
あまりにも面倒だ。
だから、自動的に行末を検出して、<br>を追加するようにしたのが
自動改行システムなのである。



さて、テーブルレイアウトを使ったテンプレートなどを、
そのまま使うと、間延びしてしまうことは、何度も指摘してきた。
なぜそうなるのか、見てみよう。

自動改行されるページでは、上記の例文1のような文章を入力すると
自動的に、行末に改行タグ<br>が追加される。
つまり、実際にサーバにアップロードされる文章は、例文3なのだ。
勝手に書き換えられるのである。

ここで、以下のようなテーブルの場合を、考えてみる。
  <table border="1">
  <tr>
  <td>
  こんにちは
  </td>
  </tr>
  </table>

意図した表示
こんにちは

これは、1行1列しかない、単純な枠のようなテーブルである。
だが、自動改行が設定されていると、これをアップした場合、
次のように自動的に書き換えられる。
  <table border="1"><br>
  <tr><br>
  <td><br>
  こんにちは<br>
  </td><br>
  </tr><br>
  </table><br>


各行に改行タグ<br>が追加されたため、中身の「こんにちは」に
たどり着くまでに3回、テーブルが終了するまでに4回、改行されてしまう。
そのため、以下のように、極端に間延びしてしまう。
自動改行での表示↓





こんにちは


これが、自動改行による「テーブル間延び現象」の原因なのだ。
HTMLは、どこも間違ってないのに...と
面食らった方も、多いのではあるまいか。



これを防ぐためには、以下のように、1行に繋げて書けば良い。
<table border="1"><tr><td>こんにちは</td></tr></table>

これなら自動改行されても、以下のように、改行タグは1個しか付かない。
<table border="1"><tr><td>こんにちは</td></tr></table><br>

その改行さえも、いやだと言うなら、最後の</table>タグの後ろに続けて
次の文章を書けばいい。



テーブルの間延びだけなら、以上のように解決できる。
だが、HTMLを使っていると、自動改行は他にも問題を起こすことがある。
次回は、自動改行でおかしくなった、めずらしい例を紹介しよう。


【本日のポイント】
1.自動改行では、文の行末に改行タグが、無条件で付加される。
2.テーブルなどが間延びするのは、各タグの末尾に、改行タグが
  自動で追加されるため。
3.テーブルの間延びを防ぐには、1行につなげて書き、
  改行タグを自動付加させないようにする。


【参考ページ】
 自動改行とは何か
 改行コードの解説


【次回の講義予告】
 どこも間違ってないのに、なぜ?

【トド短信】
 近所をうろついていた猫を見つけた。
 草をむしり、猫じゃらしにして、誘ったのだが、逃げられた。



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

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


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


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


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


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







最終更新日  2005年07月23日 17時31分58秒
コメント(16) | コメントを書く

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.