CSSでタブ区切りのテキストをきれいに表示する

エ・ビスコム・テック・ラボ
2009-02-25 12:48:01
  • このエントリーをはてなブックマークに追加

タブ区切りのテキストの表示

 ワープロソフトやテキストエディタでは、キーボードのTabキーでタブを入力してテキストを区切ると、一定間隔でテキストの左端を揃えて表示することができる。

 たとえば、次の画面はワープロソフトでタブ区切りのテキストを記述したものだ。「催し物」などのテキストの後にはタブを入力してある。

ワープロソフトでタブ区切りのテキストを記述したもの(画像をクリックすると拡大します) ワープロソフトでタブ区切りのテキストを記述したもの(画像をクリックすると拡大します)

 これに対して、HTMLおよびXHTMLソースにタブ区切りのテキストを記述すると、タブはブラウザ画面の表示には反映されないことがわかる。また、改行も表示に反映されないので、全体が1行のテキストとして表示されてしまう。

Firefox 3での表示(画像をクリックすると拡大します) Firefox 3での表示(画像をクリックすると拡大します)
催し物春の行楽フェア 期間2009年4月1日〜4月10日 場所公園広場
ブラウザで表示を確認する

タブや改行をブラウザの表示に反映させるには?

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]