- ベストアンサー
全角半角含めて等幅で表示したい
文字の等幅表示で困っています。 例えば次のような文で、右端の「｜」が揃うようにしたいのですが、うまくいきません。 1234567812345678｜ llllMMMMIIIIAAAA｜ MMMMMMMM漢字AAAA｜ ＩＩＩＩＩＩＩＩ｜ MMM<B>MM</B>MMM漢字AAAA｜ MMM<a href="">MM</a>MMM漢字AAAA｜ <tt>、<pre>、font-familyで等幅のフォントやmonospaceを選択しても、全角文字が半角文字より少し小さくなったりします。 IE6だけでも良いので揃えたいのですが、有効な方法をご存じの方がいらっしゃいましたら教えて下さい。
- spinach-chicken
- お礼率69% (9/13)
- HTML
- 回答数10
- ありがとう数9
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (9)
こんにちは！ 回答のやり取りを読んでいるとどちらのことか解らなくなってしまったので、両方書いておきます。 <head> <style type="text/css"> <!-- .haba25 { text-align:justify; text-justify:distribute-all-lines; width:25em; --> </style></head> <body> <p class="haba25">Windows版IEの５～６のみの対応です。</p> <p class="haba25">Mac版のIEにも対応していません。</p> <p class="haba25">1234567812345678</p> <p class="haba25">llllMMMMIIIIAAAA </p> <p class="haba25">MMM<b>MMMMM</b>漢字AAAA</p> <p class="haba25">MMM<a href="untitled4.htm">MMK</a>MMM漢字AAAA</p> <p style="text-align:justify; text-justify:distribute-all-lines; width:16em;">1234567812345678</p> <p style="text-align:justify; text-justify:distribute-all-lines; width:16em;">llllMMMMIIIIAAAA</p> <p style="text-align:justify; text-justify:distribute-all-lines; width:8em;">ＩＩＩＩＩＩＩＩ</p> <p style="text-align:justify; text-justify:distribute-all-lines; width:15em;">MMM<b>MMK</b>MMM漢字AAAA</p> <p style="text-align:justify; text-justify:distribute-all-lines; width:14em;">MMM<a href="#">MM</a>MMM漢字AAAA</p> </body> 上6行がすべて同じ幅になります。 <head>内のCSSで制御しています。 幅の広さは width:25em の数字で決めます。 下5行が等幅？です。 それぞれの<p>タグ内にCSSを入れています。 それぞれの行のwidth:**em の数字に文字数を入れています。 どちらも違うかな～・・ いずれもWinIEの５～６のみの対応です。
お礼
質問の仕方が悪くて申し訳ありませんでした。 ご返答ありがとうございました。
- UKY
- ベストアンサー率50% (604/1207)
なぜ固定幅フォントを使っているのにずれるのか? ということに関しては、こちら http://support.microsoft.com/default.aspx?scid=kb;ja;417434 もっとも確実な解決策は、 <pre style="font-size:16px;"> のようにフォントサイズに偶数のピクセル数値を指定することです。 奇数のピクセル数は2で割り切れないので縦横の比がちょうど2:1になりません。
お礼
自分で探してみたときは見つけることができませんでしたが、やはりマイクロソフトのサポートにありましたか… dpiが関係しているんですね。 情報ありがとうございます。
- flowermaze
- ベストアンサー率56% (159/282)
「｜」を全部頭につけておいて left で移動させる のは邪道ですか？ <STYLE type="text/css"><!-- .left {left: 400px; position: relative; } --></STYLE> 「400px」の部分は適当に変えて下さい。 <SPAN class="left">｜</SPAN>1234567812345678 <SPAN class="left">｜</SPAN>llllMMMMIIIIAAAA
お礼
すみません。例が悪かったです。 やりたい事は「｜」を揃える事ではなく、 全角半角の混じった文章を、全角１文字＝半角２文字となるよう、 等幅で綺麗に表示する事でした。 現状、WinXPなら、太字を除けばpreタグで綺麗に揃うという所まで教えて頂きました。 お手数をお掛けしました。ありがとうございます。
- JaritenCat
- ベストアンサー率37% (122/322)
完全にそろえるのは無理な気がします。 そろえたい部分を画像データにしてしまえば確実なのですが、hrefの部分をクリッカブルマップにするとか面倒ですね。 いいやり方を僕も知りたいです。。
お礼
> 完全にそろえるのは無理な気がします。 そのようです。 もし他で情報などありましたら是非お教え下さい。 よろしくお願いします。
- vitadai
- ベストアンサー率75% (6/8)
WinXP SP2 IE6+Opera7+NN7.1+Firefoxで試してみましたがズレはありませんでした。フォントサイズ小～大でも変わらず。 ただ、太字にすると文字の大きさ自体が大きくなるので、ずれるのは仕方がないと思います。
お礼
知り合いはWinXPなのですが、XPなら大丈夫でした… Win2000だとフォントサイズによってずれるようですね。 太字に関してはletter-spacingでがんばってみます。 ありがとうございました。
- vitadai
- ベストアンサー率75% (6/8)
テキストエディタ等で、半角スペースを使って整えて、<per>できちんと表示されませんか？フォントを指定しなくても、デフォルトスタイルシートでは<pre>は等幅フォントになっていると思います。 それとも、コメントの前には半角スペースを1つしか入れないのかな？
補足
（nakachie様への返答の例は半角スペースを入れていたのですが、消えてしまったようです。ちゃんと確認すれば良かった…すみません。） テキストエディタ上ではちゃんと整えているのですが、 preタグを使うと、MSゴシック、monospaceの場合、 全角文字がほんの数ドット小さくなってしまいます。 特にボールドを使うとぐっとずれます。 さらに面白いことに私の環境（Win2K+IE6）だと、ブラウザの文字のサイズを大または小にするとずれませんが、それ以外（最小、中、最大）にするとずれます… もしかして他の環境なら大丈夫なんでしょうか？（汗） ちょっと知り合いに送って試して貰ってみます。
- nakachie
- ベストアンサー率33% (12/36)
<table>タグで各セルに埋め込むのはやってみましたか？ 例で行けば、２列６行の表を作り、１列目を文字、２列目を｜にするのはダメでしょうか。。
お礼
やりたいことは、「｜」を揃える事ではなく、全角半角混じった分を等幅で出すことです。 具体的にはソースコードなどインデントとコメントが付いた文章をHTML化する事です。 【例】 void main { printf("hello\n"); /* この３行のコメントと */ printf("こんちわ\n"); /* このコメントが */ /* ずれないようにしたい */ } ですので位置合わせしたい部分を全てtableタグで書くのはちょっと難しいです… 質問の仕方が悪かったですね。すみません。
お礼
わざわざ調べて頂いてありがとうございます。 すごく参考になりました。