東京都新宿区のWeb制作会社 - ウェブラボ株式会社

スタッフブログ

[HTML] 半角文字の注意点

2008.07.02 Posted by

こんにちは。PMの田中です。

半角と全角の文字において、基本的なことですがあまり知られていないことがあります。
それはテーブル(表組み)内で起こる現象です。横幅をきちっと指定しているのに
ずれて表示される場合、以下のことが原因かもしれません。

半角英数文字で一続きの文章がある場合、半角文字は一つの単語として扱われてしまいます。

実際にどういうことか、以下のテーブルをご参照ください。

横幅300pxのテーブルです。(以下、すべて横幅300pxに指定しています。)

テーブル内に全角文字を入力すると文章は折り返します。

あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ

しかし、半角文字は一つの単語してと扱われるので折り返しません。その結果、テーブルの横幅が広がってしまいます。

ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789abcdefghijklmn

半角文字と全角文字がある場合、全角文字の位置で折り返します。

ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789あいうえおかきくけこ

半角文字列内に「-」(半角ハイフン)があると折り返されるかはブラウザによって異なります。

ABCDEFGHIJKLMNOPQRSTUVWXYZ-123456789-abcdefghijklmnopqrstuvwxyz

IE:○ FireFox:× Netscape:× Opera:○ Safari:○

「 」(半角スペース)があると折り返します。

ABCDEFGHIJKLMNOPQRSTUVWXYZ 123456789 bcdefghijklmnopqrstuvwxyz

しかし、全角英数字のみの場合、折り返されるかはブラウザによって異なります。

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890

IE:○ FireFox:× Netscape:× Opera:○ Safari:○

テーブルのレイアウトが崩れているがどうしても解決できない場合はこの半角文字が原因かもしれません。
ECサイトの値段表示部分など半角文字だけの表組みは意外とあるので、注意すべき問題です。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278