![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JnCI-blrkXhY_fIDTXk7iHjgYqchHodhQSb2n7bNBM5s4XB_DvmXAVuytGWvfrzD0mXwsBo9vyjkOHZ0WYl1Hr6NN_IbR3bxNcys3Xx54gzAeS13uj_JNmGx2oCXoWn-jbzB8ma8KVeQjFj9V9EN8PtvefM2BpHd5aKiYK_bIlH-EHp_70Oxck8m/s1600-rw/1660168926_0.jpg)
インターネット・テクノロジー(略して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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCWo8etjkXB_MnfGI4flc72wi6ugwnTK6M7th8kygVMa3pGr8Xchls0S8vBdCxlZhw48talya3LKJ0R51dyGQs6K2T2EDH4ZIVIW5ZQzzZeK_m4jxbJer2iSeMQ3iaXxbBZn2W5xt9eTRk7y4vUz32twzerms9CmGHk5Bj5FJv_J7Kn5ZE6k8F97kL/s1600-rw/1660168028_0.png)
赤枠の中にワザとはみ出るように要素を置いてみました。
overflow:hidden
これを、外枠にoverflow:hiddenを設定すると、
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABptjSO6v8W0NS7zpE2BhaSSP4yNRhe-SR21EA0uBBXIRS2DD6Wpe74kc8clX4mh6O74H72jQYIOKtsBVmcktIzfkpWp2nN5YAJroJTyn5f09XVxz-OJ5wPEtl8AldmhIXrDrKjfcrt6HNHfg2wywQw7_RsGexH0rO6NkSbqRWdlab8a254FfF2Xy/s1600-rw/1660168113_0.png)
はみ出していた部分が非表示になります。
デフォルトは、overflow:visibleなんですね。
overflow-visible、overflow-y:hidden
そしてこのoverflowには、xとyの設定があり、yをhiddenにしてxをvisibleにすると、
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBN_FaNMSeokeKuHXBEvbGkKdwxYny0b2pH2puwwgBNtlozXuSBVovRw54u0bAw8rp6wC_wj4FJF4Ka7Ej8Bd0MhrVhQFwhmyOVaGUUNyFZJIVFtBbR9HPw7JI6HfGpV5JFLmz3iajfF1oFuRuQhKJU3e7tdmQ-IJDaV9q4GXE8M83cib0bmEBki3/s1600-rw/1660168189_0.png)
x方向ははみ出て表示するのかと思ったら、スクロール対応になってしまいました。
スクロール指定していないのに・・・orz
回避方法
これをx軸だけをはみ出して表示する方法がありました。
次のように設定してみましょう。
.outside{
overflow-x:visible;
overflow-y:clip;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnojzUiPg-rnBPWZmUf8ki3h48xhvS_I8HN6SR6DITKRj0ImKvyp8TcBnD9qh8MC5e1LVYj4Ea6qUFK5vuetWqV-_xRMjyvfabONOIISEbuc-G2cli8gcCNaHSkwYX9e1mVpFIBP_eJq4I6BeJlVJ0KsxMlZeFpkfCbKu8DWQtdo07qcW8zYVvuxKq/s1600-rw/1660168411_0.png)
う〜ん、見事に想定通りの動きをするようになりました。
x軸、y軸のどちらかにhiddenが入ると強制的にscrollになってしまうんですね。
なのでclipという切り取り設定にすることで、軸単位での非表示が可能になったという事です。
そもそもこれまでhiddenを使っていたんですが、非表示にはclipを使ったほうがいいのかもしれないな〜と、
意外とみんなが知らない、基本的な使い方を学んだ、ユゲタでした。
0 件のコメント:
コメントを投稿