分数が正常に表示されない。

Question

今まで、正常に表示されていた分数が、編集中突然、分数の横棒がブラウザの画面いっぱいに伸びてしまいました。
PCを再起動かけても、PCを変えても、ブラウザを変えても、編集アプリをVSCodeからBracketsに変えても、ブラウザのキャッシュもクリヤしても症状は改善されませんでした。画像は添付してあります。よろしくお願いします。htmlとcssはコピペして使っています。

html

&nbsp1&nbsp
&nbsp2&nbsp


css
.fraction{
display: inline-block;
vertical-align: middle;
text-align: center;
}
.fraction_n{
display: block;
}
.fraction_d{
display: block;
}
.fraction_n{
border-bottom: 1px solid #333;
}

fujillin · Accepted Answer

No4です。＞＞inline-blockが取り消し線で消されてはいませんか？＞消されてはいませんでした。消されるどころか、直下のCSSは適用すらされていないことがわかるはずです。（開発ツールの使い方も覚えましょう）＞何故かわかりませんが、この行を削除してみたところ目的とする表示に＞戻りました。重ねて、何故なんでしょう。 CSS内でコメントを行う場合は、/*　～　*/ を用いてください。最初にご提示の状態ではCSSが無視されているはずです。（その結果、上記の「適用すらされていない」となります） https://developer.mozilla.org/ja/docs/Web/CSS/Comments ついでに、No4の最後に書いた、HTMLを簡略化する例を以下に記しておきます。（margin、padding はお好み合わせて、調整・削除などご自由に） Sample

あいうえお 12 かきくけこ 112222 さしすせそ

cametan_42 · Answer

余談:

https://www.eng.niigata-u.ac.jp/~nomoto/download/mathjax.pdf

fujillin · Answer

No2です。＞「F12の開発ツール」こんなのあったんですね。「あった」でお終いではなく、ちゃんと利用しましょう。そちらでご覧になれば、問題となっているfractionの要素のCSSを確認してみると、inline-blockが取り消し線で消されてはいませんか？その代わりに、blockが有効になっていると想像しますけれど、それはどこで設定されていますか？それがわかれば、原因となっている箇所がわかるはずと思いますけれど？？＞左右のスペースはいらないなと思い、削除したら症状が起きてしまったのです。＞慌てて元に復帰しましたが、事既に遅しでした。「事既に遅し」なんてことはありません。元に戻せば戻るはずです。そもそも、その設定を消したのが原因ではないはずですけれど・・どうやら、CSSの意味をきちんと理解なさった方が宜しいように思われます。以下は、微妙な違いなので分かりにくいかもしれませんが、比較をしてみました。（数値等を大きくしてみれば、効果の意味がわかりやすくなると思います）「」は文字実態参照でスペース一つ分を意味します。分数の横線を数字よりも少し伸ばして表示したいという意味と推測します。スペースを省いてみたものが（2）です。（（2）以降のソースは全ては無しにしてあります） marginは分数とその前後の文字との間に少しだけスペースをとりたいとして付与しているものと推測します。 marginを与えたものが（3）です。（補足の説明通りにspanにそれぞれmarginを設定していますが、親のfractionに設定する方がわかりやすいと思います）スペースやではなく、paddingで同様の効果を得る例が（4）です。（3）（4）を同時に設定したものが（5）です。 Sample

（1）ご提示のソース：あいうえお 1 2 かきくけこ 11 2222 さしすせそ

（2）スペースなし：あいうえお 1 2 かきくけこ 11 2222 さしすせそ

（3）marginあり：あいうえお 1 2 かきくけこ 11 2222 さしすせそ

（4）paddingに代える：あいうえお 1 2 かきくけこ 11 2222 さしすせそ

（5）padding,marginあり：あいうえお 1 2 かきくけこ 11 2222 さしすせそ

※ class="fraction_n" や class="fraction_ｄ" の設定がソース上うるさいので、このクラス設定は無くしてしまい、CSS側で選別するようにした方が全体にスッキリするものと思います。　　　12 　のような記述にすることが可能ですし、視認性も上がるのではと思います。（いろいろ書くとわからなくなると思い、こちらは省略しますが・・）

gura_ · Answer

nebokken さん　･････ブラウザの画面いっぱいに伸びてしまいました･･･････直接確認は出来ませんが、少なくとも、はの間違いではないですか。ご参考に↓ https://www.tohoho-web.com/html/char.htm 1 2

fujillin · Answer

No1です。

＞打ち消すような指定はしていないのですが…。
ブラウザで表示した状態で、開発ツール（大抵のブラウザではF12キー）で見てみると、どのように指定が反映されて、どのように打ち消されているかがわかると思います。

あるいは、
＞編集中突然、分数の横棒がブラウザの画面いっぱいに伸びてしまいました。
とのことですので、最後の方に行った部分から順に元に戻してみれば、どこで影響が出ているのかがわかると思います。

fujillin · Answer

こんばんは

想像するところ、ご提示のCSS以外のどこかで、

＞.fraction{ display: inline-block; }
を打ち消すような指定を付け加えていませんか？

そちらを削除することで、元に戻るのではないかと思いますが・・

分数が正常に表示されない。

No4です。

余談:

No2です。

nebokken さん

No1です。

こんばんは

似たような質問が見つかりました

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

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

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