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

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

 タブや改行をブラウザ画面の表示に反映させるには、テキストを

でマークアップして記述する。
はマークアップした部分がPreformatted Text(整形済みテキスト)であることを示すためのタグで、等幅フォントで表示を行う。

 このとき、Firefox 2ではタブ区切りのテキストを揃えて表示することができなかったが、Firefox 3からはCSS 2.1の標準規格に従って、左端をきれいに揃えて表示できるようになっている。

 なお、Safari、Google Chrome、Opera、Internet ExplorerはFirefox 3と同じように表示することが可能だ。

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

 CSS 2.1では、Preformatted Text(整形済みテキスト)内にタブがある場合、タブで区切られたテキストの左端はタブストップに揃えて表示するように定義されている。また、タブストップは半角スペース8文字単位で挿入すると定義されており、上のサンプルにおけるタブストップの位置は次のようになる。

タブストップの位置(赤矢印)(画像をクリックすると拡大します) タブストップの位置(赤矢印)(画像をクリックすると拡大します)

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

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