バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

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

2005年07月22日

バカネコ講座を始める。

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

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

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

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

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

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

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

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

または、

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

となる。

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

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

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

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

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

こんにちは

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

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

こんにちは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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