css調査隊「overflowを深堀りする」

インターネット・テクノロジー（略してIT）が手取り足取り動かせる、ユゲタです。 ツール開発をしている時に、cssが思ったとおり動いてくれない時ってありますよね？ 今回のターゲットは、CSSの「overflow」機能について、想定した動きをしてくれなかったので、深堀り調査してみたいと思います。

overflowは、はみ出した部分をどうするか設定

overflowについてよく知らないという人は、基本的な仕様を、リファレンスサイトを見て理解しますよう。 https://developer.mozilla.org/ja/docs/Web/CSS/overflow サンプル <div class='outside'> <div class='inside'>□□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□ □□□□□□□□□□</div> </div> <style> .outside{ border:4px solid red; width:100px; height:100px; } .inside{ width:200px; height:200px; border:1px solid black; font-size:20px; } </style> 赤枠の中にワザとはみ出るように要素を置いてみました。

overflow:hidden

これを、外枠にoverflow:hiddenを設定すると、 はみ出していた部分が非表示になります。 デフォルトは、overflow:visibleなんですね。

overflow-visible、overflow-y:hidden

そしてこのoverflowには、xとyの設定があり、yをhiddenにしてxをvisibleにすると、 x方向ははみ出て表示するのかと思ったら、スクロール対応になってしまいました。 スクロール指定していないのに・・・orz

回避方法

これをx軸だけをはみ出して表示する方法がありました。 次のように設定してみましょう。 .outside{ overflow-x:visible; overflow-y:clip; } う〜ん、見事に想定通りの動きをするようになりました。 x軸、y軸のどちらかにhiddenが入ると強制的にscrollになってしまうんですね。 なのでclipという切り取り設定にすることで、軸単位での非表示が可能になったという事です。 そもそもこれまでhiddenを使っていたんですが、非表示にはclipを使ったほうがいいのかもしれないな〜と、 意外とみんなが知らない、基本的な使い方を学んだ、ユゲタでした。