ブラウザの問題:半角スペース、全角スペース、改行コード、整形処理 

Nvu/KompoZer で始めるHTMLスタイルシート/Nvu系の使い方
       ( 実際の整形処理方法は、整形処理のページへ )

HTMLソースの 半角スペース、全角スペース、改行コードは、ブラウザの表示において、次のような傾向がある。実際のところはブラウザごとの状況により異なるので、必ず各ブラウザで確認する必要がある。
(テストはIEを対象としたが、Firefox 2 では表示が異なる。)(Firefox 3 は日本語表示方法が異なる。)

HTMLをテキストエディターで整形する場合や、Nvu/KompoZer でソース画面をいじる場合は、注意が必要。

対策:基本的に、IE, と Firefox 3, のブラウザで必ず表示を確認することである。ブラウザで見た場合に、半角スペース、改行がおかしい(意図するところと違う)現象となったら、下記の規則を参考にして、整形処理などの対策をするとよい。

半角スペース、全角スペース、改行コードの規則や問題は単純ではない。かなり複雑である。

【文字列間の半角スペースと改行コードの規則】

  1. 基本的に半角文字間の半角スーペースは、ブラウザでは半角スーペースが1個表示される。
    この場合、半角スペースがいくつあっても、半角スーペースが1個表示される。
  2. 全角文字間の改行コード1個は、ブラウザでは半角スーペースが表示されない。
  3. Firefox 3 問題 Firefoxは、Firefox 3 になってから、全角文字間の改行コードを、半角スーペースで表示するようになった。
    対策としては、作成したファイルをアップロードする前に、何らかの対策が必要である。→整形処理を参照
  4. 全角文字間の改行コード2個以上は、ブラウザでは半角スーペースが1個表示される。
    この場合、改行コードの前・後に、改行コードや半角スペースがいくつあっても、半角スーペースが1個表示される。
  5. 半角文字間、又は、半角文字と全角文字の間、又は、全角文字と半角文字の間、の改行コードは、ブラウザでは半角スーペースが1個表示される。
    この場合、改行コードの前・後に、改行コードや半角スペースがいくつあっても、半角スーペースが1個表示される。

  例1 それぞれの文字セットの間に半角スペースを1個だけ挟んだ例
    あああああ いいいいい aaaaa bbbbb えええええ

  例2 それぞれの文字セットの間に半角スペースを3個づつ挟んだ例
    あああああ いいいいい aaaaa bbbbb えええええ

  例3 それぞれの文字セットの間に改行コードを1個だけ挟んだ例
    あああああいいいいいううううう aaaaa bbbbb えええええおおおおお ccccc かかかかかききききき

  例4 文字セットの間に4個の半角スペース+改行コード+4個の半角スペース+改行コード2個+4個の半角スペースをはさんだ例
    あああああ いいいいい aaaaa bbbbb ううううう 12345 えええええ おおおおお
     (全ての文字セットの間に半角が1個表示される。)

【左寄せ文頭の半角スペースと改行コードの規則】
左寄せ文頭の半角スペースと改行コードはいくつあっても全て無視される。
(但し、右側には、直接改行タグが来ない限り半角スペースが2個表示される。)
aaaa
ああああ

【中央寄せ左右の半角スペースと改行コードの規則】
中央寄せ左の半角スペースと改行コードはいくつあっても全て無視される。
(但し、右側には、直接改行タグが来ない限り半角スペースが2個表示される。)
aaaaa
あああ

【右寄せ左右の半角スペースと改行コードの規則】
右寄せ左右の半角スペースと改行コードはいくつあっても全て無視される。
(右側でも、半角スペースは一つも表示されない。)
aaaaa
あああ

注意 表の中では、この通りにならない場合がある。

【全角スペースの問題】
全角スペース: 文中、文頭では無視されないが、右寄せの文末では、無視される場合とされない場合がある。
          特に表の外と中で違う場合がある。
 
【1単語折り返し問題】
半角アルファベットが続く場合は、ひとつの単語とみなされて、単語単位で次の行に行く。
次の行に行った単語が200桁とか異常に長いと、1単語の中での折り返しはせずに今度はプラウザが横に伸びていく。
CSSの設定で、ブラウザや表の幅を設定しても、無視して延ばしてしまう。
但し全角の場合には、1単語の規則は適用されず、設定した幅で折り返して表示される。
Nvuでは打ち込んだ段階で折り返し問題の異常に気づくが、テキストエディターだとブラウザで表示するまで気が付かない。

インライン・タグ+改行コード または 改行コード+インライン・タグの問題
テキストエディターで<span>タグや<a>タグや<img>の直前又は直後に改行コードを入れると、
ブラウザでは見かけ上半角スペースを1個入れて表示する。
この場合、テーブルなどでは、上の方にスペースが開いてしまう場合がある。
非推奨タグのFONT, BIG, EM, SMALL タグも同様である。

  (1) 改行コード無しの場合は、次のようにベタにつながって表示される。
       あああああいいいいいうううううえええええおおおおおかかかかかききききき

  (2) タグの前又は後に改行コード有りの場合は、次のように半角スペースが表示される。
     (タグの前後にいくつ改行コードがあっても同じ)
       ああ ああ あいい いい いうう うう うええ ええ えおお おお おかか かか かききき きき

br p h1〜h6 div table タグ+改行コードの規則
文字の後を、<br>又は</上記タグ>で閉じる直前に改行コードを入れると、ブラウザでは(IEの場合)、行末に、見かけ上、半角スペースを2個入れて表示する。(Firefoxの場合は表示しない)

文字の後を、<br>又は</上記タグ>で閉じた直後に改行コードを入れると、ブラウザでは(IEの場合)、行末に、見かけ上、半角スペースを1個入れて表示する。(Firefoxの場合は表示しない)

<br>又は</上記タグ>で閉じた後に、改行コードを入れると、ブラウザでは、改行コードの後に、半角スペースがいくつ入っても、
次の行では「全てのタグ」又は「文字」が来るまで、半角スペースは全部無視される。
(この規則を使えば、ソースコードを見やすくするために、先頭に半角スペースをいくつか入れて、インデントが出来る。)


下の例は、<br><p><h3><h4>のタグを使った例である。「あ〜し」の各文字列の前にはいずれの場合も半角スペースが4個入っている。
IEでは「あえかくこさ」の行の後に、半角スペースが2個見え、「いうおきけし」の行の後に、半角スペースが1個見える。
Firefoxでは各行の後に、半角スペースは見えない。

あああ
いいい
ううう

えええ

おおお

かかか

ききき

くくく

けけけ

こここ

さささ

ししし


文字の後を、<br>又は</・・・>タグで閉じないと、テーブルなどでは、上の方にスペースが開いてしまう場合がある。


IMG  の折り返し問題
IE/FirefoxのブラウザとDTDの組み合わせによって異なる。このページはURL付きTransitionalのDTDを使っているので主として IE の対策になる。

ブラウザ上でIMG(画像)1を折り返して、次の行にIMG(画像)2を表示させる場合、
IMGタグ1の後に(手入力で)改行コードを入れると、上下の画像の間に隙間が空いてしまう。
注意:Firefoxの場合は、DTDに左右されて
    
Strict系では下のどの場合も隙間が空いてしまう。
    
Transitional系では下のどの場合も隙間が空かなくなる。
    これがStrict系のDTDはすすめられない理由でもある。

対策、改行コードの前に<br>タグを入れれば、上下の画像の間に隙間が空かないで、ぴったりつく。

例1 <img>タグの後に改行コードを入れて<div>タグで折り返すと隙間が空く。
  
   <img>タグの後に<br>タグを入れてから改行コードを入れて<div>タグで折り返せば隙間が空かない。

 
例2 <img>タグの後に改行コードを入れてテーブルのセルのタグで折り返すと隙間が空く。
 
   <img>タグの後に<br>タグを入れてからテーブルのセルのタグで折り返せば隙間が空かない。

 

半角スペースの強制表示
ブラウザで文末などに半角スペースが表示されない場合は、ソース画面で"&nbsp;"を打ち込めば、ブラウザで半角表示される。

Nvu での"&nbsp;"の処理
Nveでは、半角スペースを"&nbsp;"に変換するので、ブラウザでも表示される。
改行コードの次に"&nbsp;"がくると、Nvuでは、&文字化けが起きる場合がある。
"&nbsp;"の&の次に、改行コードがくると、Nvuでは、&文字化けが起きる場合がある。

Nvuの改行コード処理

Nvuは、長い文章の途中に改行コードを入れる。(おおむね70桁くらいだが、1000桁くらいになる時もある。)

1 日本語の場合は、どこでも改行コードを入れる。

2 英語の場合は、単語単位で改行コードを入れて、単語間のスペースは削除する

3 手入力で、テキストエディターで、半角の前後の、改行コードを外すと英語の単語がべたにつながってしまう
  
ので注意が必要。半角の前後が全角の場合も同じ。
  その場合は、半角スペースを入れてやる。

タグの中の改行コードとスペースの問題
”<” や ” </” の次に半角スペースや改行コードを入れると、タグとみなされなくなる。
”>” の前に半角スペースや改行コードをいくつ入れても、ブラウザはそれを無視するので問題ない。
この場合、Nvu は、自動的に ”>” の前の半角スペースや改行コードを取り除くので問題はない。

Nvuは、Javascript の中で、HTMLタグの中の記述の区切りに改行コードを入れる場合がかなりある。
記述の区切りに入れる場合は、あまり問題にならないようだ。
 



Nvu で作成されるタグの種類
 
【タグ作成とspan style のNvu の処理について】
ツールバーから、a h1〜h6 big small b <ul>-<li> <ol>-<li> <dl>-<dt>-<dd>のHTMLタグが作成される。

カラーイタリック、アンダーライン、フォント、CSSのクラスは、style= class= などのスタイルシートで作成される。

< span>範囲の中で太字指定(b)すると スタイルシートで作成される。例 <span style="font-weight: bold;">
カラーイタリック アンダーライン フォント CSSのクラス、も親のタグ内に埋め込まれる。
a big small は独立する。

<ul>-<li> <ol>-<li> <dl>-<dt>-<dd> はformat/List/Numbered, bulleted, term, definition, で作成できる。

Insert/Comment でコメントボックスを開き、その中に書き込むと、<!--あああああああ-->のようにコメントを入れられる。

<span>は、一塊として仕様を定義する。(インライン要素)
<div>は、ブロック範囲を示す。(ブロック要素)
span の場合は、改行しないで続いていくのに対して、 div は改行して次の行の頭にいく。

参照 とほほのWWW入門ホームページ入門
 



-2007.10.16-2007.11.22-