解決済
本文記述部分に縦スクロールバーが出ないようにしたい
ブログのデザインを変更する作業をしています。ブログ本文(.main,.mainmore)中の記述で、各段落ごとにインデントを入れたいと思いsite.sccの最後に加筆し、管理画面での投稿の際には<p class="">段落単位の記述</>というふうにしました。ボックス：.mainや.mainmoreにおけるオーバーフローについてはautoにしているので、「一部のブラウザでは、.main,.mainmoreの指定幅よりも長い半角英数文字の連続が折り返されずボックスを突き破る」ことのかわりに横スクロールバーが表示されるようになっているはずです。
しかし、WindowsのIE7やLinuxのMizilla(他にもあるかもしれない)で横スクロールバーの出現と同時に縦スクロールバーも出てしまうことが解かりました。この理由と解決策がありましたらご教示よろしくお願います。
記事URL：
CSS-URL:http://blog.livedoor.jp/i_fishing/site.css
回答(1)
1.
スクロールバーですが、多分独自に追加された
overflow:auto;の指定をしなければ出ないと思います。
記事中にあるアスタリスクの連続が枠からはみ出すのを気にしてのことだと思いますが、
その場合は
overflow:hidden;として、はみ出した部分を消してしまう手はあります。
あと余談になりますが、
日本語で
text-align:justify;を指定すると、見た目がかえって不自然になるので
やめた方がいいかもしれないです。
たいへん御世話になりました。
コメント(6)
>>1.
imqさん、有難うございました。
text-align:justify;
は確かにおっしゃる通りで日本語フォントの場合は「なんか変?」ですね。当該ブログの例文では綺麗に整形してくれるブラウザはMac/Safariくらいでした。
text-align:left;
に直しました。
overflow:hidden;
は隠れた部分をマウスで選択すれば引っ張り出せるのですね!先ほど試してみて解かりました。
overflow:auto;
については、ブラウザによって挙動が随分違うようですね。あまり使わない方がよいのでしょうか?
(質問の補足)
<div style="overflow:auto;"><p>長～い半角英数文字連続を含む本文</p></div>
と記述された時に縦スクロールバーも出ました。
<div style="overflow:auto;">長～い半角英数文字連続を含む本文</div>
という記述の場合は横スクロールバーのみでした。
CSSの記述については文法的には問題なかったようですが、数値の設定に不具合があったのでしょうか?
autoはブラウザ依存なので何とも言えませんが、
ある程度挙動を予測した使い方をすれば問題ないと思います。
基本的には
・height指定のあるボックスに対して要素が縦にはみ出した場合は縦スクロールを出す
・width指定のあるボックスに対して要素が横にはみ出した場合は横スクロールを出す
ということを踏まえておけばいいと思います。
あと、記事全体に縦横を問わずスクロールを出すと非常に読みにくいので、
はみ出す行のみをpやdivで囲ってスクロールさせる手もあります。
<p> ～本文～ <div style="overflow:auto;">長い半角英数文字連続</div> ～本文の続き～ </p>
補足の方は
<p style="overflow:auto;">長い半角英数文字連続を含む本文</p>とする方法はあります。
divの中にpがいくつも入るような大規模なボックスでは無理ですが、
そういうケースではあまりスクロールを使うのは好ましくないような気がします。
imqさん、懇切な御回答ありがとうございました。
>>2.
私の場合は「height指定」をしていなかったのに、幅を指定したボックスの幅よりも長い半角英数文字の連続で何故ブラウザが縦方向へもオーバーフローしたと解釈したのかが解かりませんでした。
しかし、スクロールバーが出るというのは確かに読み難いですのでオーバーフロー分は隠すことにいたします。
語や段落単位の記述処理につきましては、どうしてもという場合、お教え戴いたことを参考にしてみます。
>>3.
覚えておくようにします。
望み通りにならなかったにもかかわらず
ベストありがとうございました。
ブロック要素か高さ指定のあるインライン要素が
外枠の上下の内部に接していると縦スクロールが出るようですね。
回避する工夫はできるかもしれませんが、
個人的にはあまりスマートではないのでやりたくはないです。
ただ単に「問題を解決したい」というよりも「何故なのか知りたい」というのが望みです。解かれば自然と解決への筋道も見えてくるし、問題を分析しなおすことや回避する手段についての考え方も変わっきて当然だと思っています。
CSSは結構勉強してきたつもりですが、まだまだ初心者の域を抜けられません。また、よろしくお願いします。
