スペースの数でインデントを表現したいとき

項目と内容を、左右に分けてhtmlで書きたいとき、テーブルを使う人も多いですが、簡単に書きたいときはスペースをいくつか入れて、インデントや左余白をつけて書くことがよくあります。

しかし、そこでこんな感じにつまづくこと、ないですか?

たとえば、ソースは↓こんな具合にスペースを文字数分入れて書いて、

<p>
場所 インクローバーカフェ<br />
時間 4月14日 午後2時<br />
     15日 午後4時
</p>

場所 インクローバーカフェ
時間 4月14日 午後2時
     15日 午後4時

本当は↑のように書きたいのに、

場所 インクローバーカフェ 時間 4月14日 午後2時      15日 午後4時

↑のように、日付の部分などが、ずれてしまったり。

それは、通常webサイトやブログなどが、「MS Pゴシック」などといった、プロポーショナルフォントで書かれているからです。

全角・半角でスペースをいくら書き込んでも、文字によって幅が異なるので、思ったよりスペースが細く表示され、たくさん入れたとしても、同じ幅のスペースを入れることができないのです。

なので、こういうときは、等幅フォントを指定してあげることをオススメします。

■ソース
<p style="font-family: MS ゴシック, Osaka-等幅"> 場所 インクローバーカフェ<br /> 時間 4月14日 午後2時<br />      15日 午後4時 </p>

■サンプル

場所 インクローバーカフェ
時間 4月14日 午後2時
     15日 午後4時


windowsユーザーのために、MS ゴシック,
macユーザーのために、Osaka-等幅
の両方を入れてあげると、より、アクセシビリティを考えてることになるので、オススメです。

--------------------------------

【追記】

topoさんのご指摘で、「monospace」フォントを指定する方が、自然だということに気付きました。ありがとうございます。Linuxの方でうまくいかないのは確認漏れでした、また調べておきます。

スペースを含むフォント名には、" "でくくる方が好ましいのですが、style=""で既に使っているため、重複してしまうし、' 'を駆使することも考えましたが、それよりも、monospaceを使うことで(フォント名にスペースないし)解決するので、monospaceにするのが、winもmacも通用するので、こっちがよりいいのではないかと思います。

■ソース

<p style="font-family: monospace">場所 インクローバーカフェ<br />
時間 4月14日 午後2時<br />
     15日 午後4時</p>

■サンプル

場所 インクローバーカフェ
時間 4月14日 午後2時
     15日 午後4時

Comments:1

topo 2007年4月15日 13:11

linuxでは完全にずれてます。
それからMS ゴシックの様に間に空白が入る場合は""で括った方が言いようです。

質問ですが、単にmonospaceと指定するのとどう違うのでしょうか。

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/103
Listed below are links to weblogs that reference
スペースの数でインデントを表現したいとき from px*blog