HTMLで全角文字と半角文字を２：１で表示させる方法について。

質問

HTMLで全角文字と半角文字を２：１で表示させる方法について。

お世話になります。

とある業務でいままで自前で描画していた画面をHTMLで表示することになりました。
この際実際に表示すると半角文字が全角の1/2より大きいため画面にズレが出てしまいます。

HTMLの記述（CSSを利用しても可）で全角文字と半角文字を2:1にすることはできますでしょうか？

出来るのであればサンプルを提示いただけると助かります。

以上、よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

なら、
＞etter-spacing:0.1em;
　をetter-spacing:0em;にしたら？？？
　半角だと文字数が増えるので、当然etter-spacingを合計した値は大きくなる。

　ですが、できれば、そんなことに影響されないようページ作りをしてください。

お礼

letter-spacingに目がいっていませんでした。
詳しいご説明ありがとうございます。

仕様上なぜletter-spacingが入っていたのかを確認しないといけませんが、確かにズレはなくなりました。

つまらない質問に詳しく答えていただきありがとうございました。

回答No.2

ORUKA1951

＞とある業務でいままで自前で描画していた画面をHTMLで表示することになりました。
　ということは、その時点でフォントには関わらず情報が伝えられることを意図しているのですよ。
　スタイルシートで、font^family:"ＭＳ明朝","細明朝体",monospace;の様に指定すると、等幅フォンドで表示されます。
　しかし、スタイルシートと言えどもユーザー優先です
ユーザ定義の最重要宣言＞文書作成者の最重要宣言＞文書作成者の通常宣言＞ユーザの通常宣言＞デフォルトの通常宣言
値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascading-order )

　また、ユーザーが視覚障害がある場合、Ctrl + ＋などでフォントのサイズは自由に変更されます。

　なぜ、そうなっているかというと、最大のHTMLの目的が
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　だからです。
　もし、作者の期待したイメージどおりに表示させたいのなら、HTMLではなくPDFなど他の手段を考えるべきです。
　HTMLは、利用者がどのようなフォントを使おうが、どの大きさの文字で見ようが、そもそも表示させずに機械(読み上げブラウザ)に読ませようが、情報を伝えるために【HTMLで作成する】のです。そのための物であって、【自前で描画していた画面をHTMLで表示する】ためのものではないのです。

補足

HTMLに関する詳しい説明ありがとうございます。

今回の業務ではユーザーサイドでの強制的なCSS変更等は行わないことが前提であるということを書いておりませんでした。
（もともとの業務では独自のUIを使っており、今回その定義ファイルからHTMLを作成し、表示させるというものです。フィールド入力もあります。）

今回、以下の様にフォントを指定してHTML出力しているのですが、期待に反して半角文字の方が少々横幅が大きく取られてしまっています。（全てMSゴシックにて作っているのでズレ自体は一定です）
－－－－
<font style="position:absolute; top:75px; left:280px; z-index:24; letter-spacing:0.1em; font-size:medium; font-family:'ＭＳ ゴシック';">1:あああああ　2:あいうえコード</font>
－－－－
上記と縦方向だけをずらして同じフォントで全角のみを出力すると半角二文字の方が全角一文字より横幅が大きくなっております。

何か誤った点でもありますでしょうか？

回答No.1

uriboar

CSSにて等幅フォントを指定すればOKです。
ただし、大抵のブラウザには、サイト指定のスタイルを無視して、ユーザが指定したものを優先させる設定があるので、結局のところ、ユーザの設定次第ということになります。

参考URL：

http://www.htmq.com/style/font-family.shtml