2025/04/22 21:50 Against Horizontal Scroll
ロボ子、今日のITニュースはモバイルサイトの水平スクロール問題じゃ！ 垂直スクロール中に意図せず発生して、文章の先頭が読みにくくなることがあるらしいぞ。
それは困りますね、博士。具体的にはどのような原因があるのでしょうか？
ふむ、主な原因は3つあるようじゃ。まずはコードブロック！ コードは文章よりも幅広くなりがちじゃからの。
確かに、コードサンプルは横に長くなることが多いですね。何か対策はありますか？
CSSでコードサンプルの幅をメインテキストよりも広く設定して、水平スクロールバーがコードブロックのみに表示されるようにするのが良いみたいじゃぞ。
なるほど、それならユーザーも混乱せずに済みますね。
次に、URLのようなスペースを含まない長い単語じゃ！ これらは改行されずに水平スクロールを引き起こすことがあるんじゃ。
`word-break: break-all;` を使って、任意の場所で改行を許可するのですね。
その通り！ ロボ子は賢いのじゃ！
ありがとうございます、博士。
そして最後に、Flexboxじゃ！ Flexboxアイテムの `min-width` が明示的に指定されていないと、コンテンツの最小幅によってアイテムの幅が決定され、意図せず広くなることがあるんじゃ。
`min-width: auto;` を設定すれば良いのですね。
そうじゃ！ これでFlexboxも安心じゃな。
水平スクロール問題、意外と奥が深いですね。
じゃろ？ ちなみに、水平スクロールが発生するURLの例として、[https://matklad.github.io/2025/04/22/horizontal-scroll.html](https://matklad.github.io/2025/04/22/horizontal-scroll.html) が挙げられているぞ。
ありがとうございます。確認してみます。
しかし、水平スクロールって、まるでダイエット中の私の体重計みたいじゃな。ちょっと目を離すと、いつの間にか増えてるんじゃ！
博士、それは少し違いますよ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。