みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

HTMLで○や■などをテキストの代用とした時

HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか?
教えてください。
よろしくお願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
text-align: center;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-color: #ADB96E;
}
.content {
text-align: left;
padding: 10px 0;
}
.footer {
padding: 10px 0;
background-color: #CCC49F;
}
-->
</style></head>
<body>
<div class="container">
<div class="header">
</div>
<div class="main">
<p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>

投稿日時 - 2013-05-24 16:03:15

QNo.8102894

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

レイアウトが崩れるって、○等の記号で、枠を囲ったりしているのがズレたりするということでしょうか?
であれば、プロポーショナルフォントを指定しているからでは?
> font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS P Gothic", sans-serif;

以下、メルマガでの例ですが、同じようなことでは?
http://help.mag2.com/000045.html

投稿日時 - 2013-05-24 18:22:43

お礼

回答ありがとうございました。

どうやらブラウザが○等の記号の連続を1つの単語として捕らえるために改行されない様で、css3のword-break,word-wrapなんかを用いると症状が改善されました。

投稿日時 - 2013-06-04 13:57:30

ANo.1

文字コードが違ってるというオチでは?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

上記タグで「このHTMLは文字コードがUTF-8です」と宣言しているので、保存する時には「UTF-8」で保存しなければいけません。
Windowsなどでは、標準ではテキストファイルの文字コードが「シフトJIS」になっているので、そのまま保存したのでは文字コードが食い違います。

ファイルをUTF-8で保存しなおすか、上記タグを

<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />

に直せば、きちんと表示されるのではないかと。

投稿日時 - 2013-05-24 16:33:21

お礼

回答いただきありがとうございました。

UTF-8の設定されたDreamWeaver上の話だったので、文字コードの違いでは無いようです。
(環境説明不足でした。すいません。)
その後自分で調べて行く内に、css3のword-break又はword-wrapを指定すれば良いのではと思い実行してみた所、IE9ではOKで、firefoxでは改行自体はOKだったのですが、floatさせている画像に文章が廻り込まないという新しい問題にぶち当たってしまいました。

投稿日時 - 2013-06-04 13:52:09

あなたにオススメの質問