スペースの数でインデントを表現したいとき
- coding > css
- 2007.04.14 Sat 23:57
- permalink
項目と内容を、左右に分けてhtmlで書きたいとき、テーブルを使う人も多いですが、簡単に書きたいときはスペースをいくつか入れて、インデントや左余白をつけて書くことがよくあります。
しかし、そこでこんな感じにつまづくこと、ないですか？
たとえば、ソースは↓こんな具合にスペースを文字数分入れて書いて、
それは、通常webサイトやブログなどが、「ＭＳ Ｐゴシック」などといった、プロポーショナルフォントで書かれているからです。
全角・半角でスペースをいくら書き込んでも、文字によって幅が異なるので、思ったよりスペースが細く表示され、たくさん入れたとしても、同じ幅のスペースを入れることができないのです。
なので、こういうときは、等幅フォントを指定してあげることをオススメします。
しかし、そこでこんな感じにつまづくこと、ないですか？
たとえば、ソースは↓こんな具合にスペースを文字数分入れて書いて、
<p>
場所 インクローバーカフェ<br />
時間 4月14日 午後2時<br />
15日 午後4時
</p>
場所 インクローバーカフェ
時間 4月14日 午後2時
15日 午後4時
場所 インクローバーカフェ
時間 4月14日 午後2時
15日 午後4時
それは、通常webサイトやブログなどが、「ＭＳ Ｐゴシック」などといった、プロポーショナルフォントで書かれているからです。
全角・半角でスペースをいくら書き込んでも、文字によって幅が異なるので、思ったよりスペースが細く表示され、たくさん入れたとしても、同じ幅のスペースを入れることができないのです。
なので、こういうときは、等幅フォントを指定してあげることをオススメします。
■ソース
<p style="font-family: ＭＳ ゴシック, Osaka-等幅">
場所 インクローバーカフェ<br />
時間 4月14日 午後2時<br />
15日 午後4時
</p>
■サンプル
場所 インクローバーカフェ
時間 4月14日 午後2時
15日 午後4時
windowsユーザーのために、ＭＳ ゴシック,
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時
登録
RSSリーダーで購読する
Comments
<a href="http://computersoftwarelist.com/?p=125">grub boot page is not shown</a>
a1syaaqqa
<a href="http://mexicopharm.org/?p=444">generic 9 trojan horses</a>
a1syaaqqa
<a href="http://vigaplus.ws/?p=740">Lucky Lockie:Herbalremedies</a>
yrsaawwsw2
それからMS ゴシックの様に間に空白が入る場合は""で括った方が言いようです。
質問ですが、単にmonospaceと指定するのとどう違うのでしょうか。