「overflow」が変な扱われ方になった？
ブログのHTML編集枠に下の枠内のHTMLを記述すると、「■■」のある文字列を折り返しをしない1行で、背景が灰色のブロック内に表示するという事になります。（実際のHTMLは改行無しの数珠繋がりです。
<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
このHTMLで、囲みの<div>は400pxの幅で、それより幅の短い文字列ではスクロールバーが表示される事はないはずです。
■■■■■■■ これはサンプル ■■■■■■
ところが実際は縦スクロールバーが出る事があります。 もしChromeをお使いでしたら、ブラウザの拡大率を125%等の倍率にして、このページを見てください。
文字列をもっと長くしたものが下です。
横スクロールバーはHTMLの指定通りですが、これも縦スクロールバーが出たり、出なかったり。 なんじゃこれは ..... Chromeで拡大設定をしている場合の話で、他の人は何を騒いでるのか判らないと思いますが。
■■■■■■■ これはサンプル ■■■■■■■■■■■■■■■■
横スクロールバーはHTMLの指定通りですが、これも縦スクロールバーが出たり、出なかったり。 なんじゃこれは ..... Chromeで拡大設定をしている場合の話で、他の人は何を騒いでるのか判らないと思いますが。
ブラウザによる見え方の違い
上の表示はブラウザによって異なる様です。「スクロールバーの表示の仕方」がブラウザによって異なる仕様なのは、昔から皆を悩ませて来た問題ですね。 今回はそれは別件なんですが、これを見ている人が何を言ってるのか判らなくならない様に、まずハードコピーで上の2つのブロックの見え方を示します。
マイクロソフトのEdgeは相変わらず独自路線でIEと同じ、スクロールバーを出してくれず折り返されます。 ChromeとFirefoxは同じ表示になりました。 で、今回の縦スクロールバーの表示はChromeだけの問題の様です。
「overflow: auto;」の指定で、文字列が右端に達しておらず、また本来は縦スクロールバーは出ないはずです。 しかし、縦スクロールバーが出たり出なかったりするという事です。
〔padding: 0 20px〕を削除
〔background: #ddd〕を削除
〔border: 1px solid #aaa〕を削除
400pxを越える長い内容の場合
異常表示はまばらに出る
現象は、このコードを複数並べると気付き易いのですが、110%以上の拡大率で見ると、いくつか置きに縦スクロールバーが出たり出なかったりします。 ブロックは全く同じコードですが、拡大率により異常表示が出るブロックが変わります。 これは、編集画面上でもブログ誌面上でも同じです。
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
「overflow: auto;」の指定で、文字列が右端に達しておらず、また本来は縦スクロールバーは出ないはずです。 しかし、縦スクロールバーが出たり出なかったりするという事です。
横スクロールバーを意図的に表示させるこういったブロックは、コード掲載などで昔から利用して来ました。 ブロックの書き方を定型化して同じ形なのに、縦スクロールバーのこんな出方は気付かなかったのです。 最近にこの様なことが生じた様に思えますが、確証がありません。
原因を調べる
問題の切り分けのために、インラインの指定を部分的に外して行きました。
<div style="overflow: auto; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
〔padding: 0 20px〕を削除
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
〔background: #ddd〕を削除
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
〔border: 1px solid #aaa〕を削除
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
■■■■■■■ これはサンプル ■■■■■■
なんとなく予想していた「border」が関係しているらしい。 実際に私のページで生じている事は、こういう縦幅が極小のブロックではなく、縦に数十行以上のブロックでも、同様に不規則にスクロールバーが表示されてしまいます。
当然、「overflow-x:auto; overflow-y: hidden」等で逃げる事は出来そうですが、理屈の不明な表示の放置は、という気がします。 実は、この定型でHTMLのインラインでブロックのスクロール表示の仕方を指定しているのは、スマホでのコード表記枠の見え方を念頭にしているからです。 スマホ表示は、HTMLでスタイルを指定するインライン記述でしか修飾出来ません。 この様なブログシステムは多いのですが、スマホ向けのデザインは、ユーザーが細かいアレンジを指定できないため苦労します。
改善策
とりあえずの改善策で、「overflow-x:auto; overflow-y: hidden」としてみます。
<div style="overflow-x:auto; overflow-y: hidden; width:400px; padding: 0 20px;background: #ddd; border: 1px solid #aaa;">
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
<span style="white-space: nowrap;">
■■■■■■■ これはサンプル ■■■■■■
</span>
</div>
上のコードのサンプル
400pxを越える長い内容の場合
まあ、あたり前ですが、これで意図した通りの表示になる様です。 その後に書き方を煮詰めたところ、「overflow-x:auto;」は省いても構わない様です。 インライン指定なのでゴチャゴチャ書いてしまうと、後で全部書き換えなんてことも考えていて、苦労する部分です。
他の解決策を探して、「height」「line-height」「上下padding」など闇雲に試しましたがどうも妙薬は見つかりません。
〔追記〕2018.03.21
コード掲載枠を表示するスクリプトを利用する事は、アメブロのプラグイン規制で不可能になったので、他の方はどうしているのでしょう。 このページのChromeの問題は、Chrome 64.0.3282.186 で、ブログ誌面上では改善されていました。 しかし、編集画面では縦スクロールバーが以前の様に出ています。 プラグインを使えない環境は少々しんどいですが、今後もこのコード記載枠の方法をやりくりする必要があります。