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

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

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

 タブ区切りのテキストをCSSできれいに表示したい場合、CSSのwhite-spaceプロパティを利用する方法もある。たとえば、

の代わりに
でマークアップして「white-space:pre」と指定すると、次のような表示になる。

white-space:preを適用したテキスト(画像をクリックすると拡大します) white-space:preを適用したテキスト(画像をクリックすると拡大します)
div{
white-space: pre
}
催し物春の行楽フェア 期間2009年4月1日〜4月10日 場所公園広場
ブラウザで表示を確認する

 

でマークアップした場合と表示が異なるのは、等幅フォントではなく、文字ごとに幅の異なるプロポーショナルフォントで表示されているためだ。Windows環境の多くのブラウザで標準フォントとなっている「MS Pゴシック」の場合、半角スペースの幅が小さく、タブストップの位置が次のようになっている。

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

 そのため、「期間」と「場所」の後ろにタブを2つ入れるようにすれば、タブで区切ったテキストの左端を揃えて表示することができる。

タブを追加してテキストを揃えたもの(画像をクリックすると拡大します) タブを追加してテキストを揃えたもの(画像をクリックすると拡大します)
催し物春の行楽フェア 期間2009年4月1日〜4月10日 場所公園広場
ブラウザで表示を確認する

 また、タブを追加せず、「font-family:monospace」と指定して、等幅フォントで表示すれば

でマークアップしたときと同じように表示することが可能だ。

等幅フォントで表示したもの(画像をクリックすると拡大します) 等幅フォントで表示したもの(画像をクリックすると拡大します)
div{
white-space: pre;
font-family: monospace;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]