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

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

タブを使っているように見せる

 HTML 4.01では

の中にタブを記述しないことが推奨されている。表示に利用するフォントなどが変わることで、タブストップの位置が変わり、レイアウトが崩れる可能性があるためだ。

 フォントの種類や大きさを固定すれば崩れるのを回避することもできるが、タブを使わずにレイアウトを再現することもできる。たとえば、次のサンプルはテキストを

でマークアップして、CSSで揃えてレイアウトしたものだ。また、テーブルでレイアウトするという方法もある。

<dl>でマークアップしたもの(画像をクリックすると拡大します)
でマークアップしたもの(画像をクリックすると拡大します)
dt{
float: left;
width: 4em;
}
催し物
春の行楽フェア
期間
2009年4月1日〜4月10日
場所
公園広場
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]