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

2022年8月27日

テクノロジー

eyecatch インターネット・テクノロジー(略して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を使ったほうがいいのかもしれないな〜と、 意外とみんなが知らない、基本的な使い方を学んだ、ユゲタでした。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。