文字揃えはmonospace でできる



フォームなどで文字をそろえるのには一般的にテーブルを使いますが、
テーブルはタグが多く可読性があまりよくありません。

Macなどの固定ピッチフォントの機種は簡単に文字そろえができますが、
Windowsのプロポーショナルフォントではどうしてもテーブルを使って、
文字をそろえようとしますが、もっと簡単な方法があります。
cssでfont-family:monospace;と指定すれば、
テーブルを使わずに簡単に文字やボックスの位置を揃えられます。

これが文字揃えの見本

ご芳名

漢  字: *
ふりがな:

ご住所

郵便番号: (半角数字 999-9999)
都道府県: *


上のブロックは
<style type="text/css">
<!--
.BorderMono {
width:auto;
height:auto;
padding:10px;
border: 1px solid #876047;
margin:10px 0px 10px 0px;
font-size:12px;
font-family:monospace;
overflow: hidden;
}
-->
</style>

としているだけです。

記事id:199 / 2137PV

関連記事