プロが教える店舗＆オフィスのセキュリティ対策術

全角半角含めて等幅で表示したい

解決済

  • 質問者：spinach-chicken
  • 質問日時：
  • 回答数：10件

文字の等幅表示で困っています。

例えば次のような文で、右端の「｜」が揃うようにしたいのですが、うまくいきません。

1234567812345678｜
llllMMMMIIIIAAAA｜
MMMMMMMM漢字AAAA｜
ＩＩＩＩＩＩＩＩ｜
MMM<B>MM</B>MMM漢字AAAA｜
MMM<a href="">MM</a>MMM漢字AAAA｜

<tt>、<pre>、font-familyで等幅のフォントやmonospaceを選択しても、全角文字が半角文字より少し小さくなったりします。
IE6だけでも良いので揃えたいのですが、有効な方法をご存じの方がいらっしゃいましたら教えて下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (10件)

No.6ベストアンサー

  • 回答者： flowermaze
  • 回答日時：

Win2000+IE6、解像度1280*1024です。


興味深いので実験してみましたら、面白いことを発見しました。

<pre style="font-size:12pt;">
void main
{
printf("hello\n"); /* この３行のコメントと */
printf("こんちわ\n"); /* このコメントが　 */
/* ずれないようにしたい */
}
</pre>
のように書いて（上ではインデントは消えていると思いますが、半角スペースでprintfの頭とコメントの始端終端を揃えています）、font-sizeの値をいろいろ変えて、それぞれ試してみました。

その結果、このような事実が判明しました。
・サイズをemで指定……1emだと揃う。それ以外（0.9emとか1.2emとか）だとずれる。
・サイズをpxで指定……偶数値なら揃う。奇数値はずれる。
・サイズをptで指定……12ptなら揃う。
・サイズを%で指定……揃わない。

※em、%に関しては、ブラウザの文字サイズ指定を最小～大まで変えて確認しています。

どうしてこうなるのか全くわからないのですが、ご参考になれば。解像度を変えるとまた違ってくるかもしれませんが……
    • good
    • 2
    • 件
通報する
この回答へのお礼

わざわざ調べて頂いてありがとうございます。
すごく参考になりました。

通報する
お礼日時：2004/11/01 12:01

No.10

  • 回答者： yayopix
  • 回答日時：

No.9のyayopixです。



よく読んでみるとぜんぜん意味が違いましたね。

失礼しました・・・。

とんちんかんついでに・・
次のも、無視して下さい・・。
途中からこれも意味が違うことに気づいたのですが・・

<body>
<p>void main<BR>
{<BR>
printf("hello\n");<span style="margin-left:50px;">/* この３行のコメントと */</span><BR>
printf("こんちわ\n");<span style="margin-left:21px;">/* このコメントが　*/</span><br>
<span style="margin-left:159px;">/* ずれないようにしたい */</span><BR>
}
</p>
</body>

これで終わりにします・・
最後まで失礼しました・・・m(_ _)m
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： yayopix
  • 回答日時：

こんにちは！



回答のやり取りを読んでいるとどちらのことか解らなくなってしまったので、両方書いておきます。

<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の５～６のみの対応です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

質問の仕方が悪くて申し訳ありませんでした。
ご返答ありがとうございました。

通報する
お礼日時：2004/11/01 12:14

No.8

  • 回答者： UKY
  • 回答日時：

なぜ固定幅フォントを使っているのにずれるのか? ということに関しては、こちら



http://support.microsoft.com/default.aspx?scid=k …


もっとも確実な解決策は、
<pre style="font-size:16px;">
のようにフォントサイズに偶数のピクセル数値を指定することです。
奇数のピクセル数は2で割り切れないので縦横の比がちょうど2:1になりません。

参考URL：http://support.microsoft.com/default.aspx?scid=k …
    • good
    • 1
    • 件
通報する
この回答へのお礼

自分で探してみたときは見つけることができませんでしたが、やはりマイクロソフトのサポートにありましたか…
dpiが関係しているんですね。
情報ありがとうございます。

通報する
お礼日時：2004/11/01 12:02

No.7

  • 回答者： flowermaze
  • 回答日時：

#6の補足です。



さらにfont-weight:boldの指定も加えて試してみましたが、太字のでもずれないフォントサイズはさすがに見つかりませんでした。
    • good
    • 0
    • 件
通報する

No.5

「｜」を全部頭につけておいて left で移動させる


のは邪道ですか？

<STYLE type="text/css"><!--
.left
{left: 400px; position: relative; }
--></STYLE>

「400px」の部分は適当に変えて下さい。

<SPAN class="left">｜</SPAN>1234567812345678
<SPAN class="left">｜</SPAN>llllMMMMIIIIAAAA
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません。例が悪かったです。
やりたい事は「｜」を揃える事ではなく、
全角半角の混じった文章を、全角１文字＝半角２文字となるよう、
等幅で綺麗に表示する事でした。

現状、WinXPなら、太字を除けばpreタグで綺麗に揃うという所まで教えて頂きました。

お手数をお掛けしました。ありがとうございます。

通報する
お礼日時：2004/10/29 13:21

No.4

  • 回答者： JaritenCat
  • 回答日時：

完全にそろえるのは無理な気がします。


そろえたい部分を画像データにしてしまえば確実なのですが、hrefの部分をクリッカブルマップにするとか面倒ですね。
いいやり方を僕も知りたいです。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

> 完全にそろえるのは無理な気がします。
そのようです。
もし他で情報などありましたら是非お教え下さい。
よろしくお願いします。

通報する
お礼日時：2004/10/29 12:38

No.3

  • 回答者： vitadai
  • 回答日時：

WinXP SP2 IE6+Opera7+NN7.1+Firefoxで試してみましたがズレはありませんでした。

フォントサイズ小～大でも変わらず。
ただ、太字にすると文字の大きさ自体が大きくなるので、ずれるのは仕方がないと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

知り合いはWinXPなのですが、XPなら大丈夫でした…
Win2000だとフォントサイズによってずれるようですね。

太字に関してはletter-spacingでがんばってみます。
ありがとうございました。

通報する
お礼日時：2004/10/29 12:37

No.2

  • 回答者： vitadai
  • 回答日時：

テキストエディタ等で、半角スペースを使って整えて、<per>できちんと表示されませんか？フォントを指定しなくても、デフォルトスタイルシートでは<pre>は等幅フォントになっていると思います。


それとも、コメントの前には半角スペースを1つしか入れないのかな？

この回答への補足

（nakachie様への返答の例は半角スペースを入れていたのですが、消えてしまったようです。ちゃんと確認すれば良かった…すみません。）

テキストエディタ上ではちゃんと整えているのですが、
preタグを使うと、MSゴシック、monospaceの場合、
全角文字がほんの数ドット小さくなってしまいます。
特にボールドを使うとぐっとずれます。
さらに面白いことに私の環境（Win2K+IE6）だと、ブラウザの文字のサイズを大または小にするとずれませんが、それ以外（最小、中、最大）にするとずれます…

もしかして他の環境なら大丈夫なんでしょうか？（汗）
ちょっと知り合いに送って試して貰ってみます。

補足日時：2004/10/29 12:05
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： nakachie
  • 回答日時：

<table>タグで各セルに埋め込むのはやってみましたか？


例で行けば、２列６行の表を作り、１列目を文字、２列目を｜にするのはダメでしょうか。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

やりたいことは、「｜」を揃える事ではなく、全角半角混じった分を等幅で出すことです。
具体的にはソースコードなどインデントとコメントが付いた文章をHTML化する事です。

【例】
void main
{
printf("hello\n"); /* この３行のコメントと */
printf("こんちわ\n"); /* このコメントが　*/
/* ずれないようにしたい */
}

ですので位置合わせしたい部分を全てtableタグで書くのはちょっと難しいです…

質問の仕方が悪かったですね。すみません。

通報する
お礼日時：2004/10/29 11:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報