 |
2008年07月02日 |
[HTML] 半角文字の注意点
投稿者 : mamoru tanaka
こんにちは。PMの田中です。
半角と全角の文字において、基本的なことですがあまり知られていないことがあります。
それはテーブル（表組み）内で起こる現象です。横幅をきちっと指定しているのに
ずれて表示される場合、以下のことが原因かもしれません。
半角英数文字で一続きの文章がある場合、半角文字は一つの単語として扱われてしまいます。
実際にどういうことか、以下のテーブルをご参照ください。
半角と全角の文字において、基本的なことですがあまり知られていないことがあります。
それはテーブル（表組み）内で起こる現象です。横幅をきちっと指定しているのに
ずれて表示される場合、以下のことが原因かもしれません。
半角英数文字で一続きの文章がある場合、半角文字は一つの単語として扱われてしまいます。
実際にどういうことか、以下のテーブルをご参照ください。
|
横幅300pxのテーブルです。 （以下、すべて横幅300pxに指定しています。） |
テーブル内に全角文字を入力すると文章は折り返します。
| あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ |
しかし、半角文字は一つの単語してと扱われるので折り返しません。その結果、テーブルの横幅が広がってしまいます。
| ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789abcdefghijklmn |
半角文字と全角文字がある場合、全角文字の位置で折り返します。
| ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789あいうえおかきくけこ |
半角文字列内に「-」（半角ハイフン）があると折り返されるかはブラウザによって異なります。
| ABCDEFGHIJKLMNOPQRSTUVWXYZ-123456789-abcdefghijklmnopqrstuvwxyz |
「 」（半角スペース）があると折り返します。
| ABCDEFGHIJKLMNOPQRSTUVWXYZ 123456789 bcdefghijklmnopqrstuvwxyz |
しかし、全角英数字のみの場合、折り返されるかはブラウザによって異なります。
| ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ１２３４５６７８９０ |
IE：○ FireFox：× Netscape：× Opera：○ Safari：○
テーブルのレイアウトが崩れているがどうしても解決できない場合はこの半角文字が原因かもしれません。
ECサイトの値段表示部分など半角文字だけの表組みは意外とあるので、注意すべき問題です。
