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

Question

お世話になります。

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

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

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

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

ORUKA1951 · Accepted Answer

なら、
＞etter-spacing:0.1em;
　をetter-spacing:0em;にしたら？？？
　半角だと文字数が増えるので、当然etter-spacingを合計した値は大きくなる。

　ですが、できれば、そんなことに影響されないようページ作りをしてください。

ORUKA1951 · Answer

＞とある業務でいままで自前で描画していた画面を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で表示する】ためのものではないのです。

uriboar#1 · Answer

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

参考URL：http://www.htmq.com/style/font-family.shtml

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

なら、

＞とある業務でいままで自前で描画していた画面をHTMLで表示することになりました。

この回答への補足

CSSにて等幅フォントを指定すればOKです。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング