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