項目と内容を、左右に分けて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時