最近よく使っているcss Tips

2024.10.07

こんにちは。
WebチームのSです。

最近はITパスポートの勉強をしています。

恥ずかしながら授業では集中するのに夏休みは終盤で課題に追われるタイプの悪癖があり、今回の資格勉強も例に漏れずかなり遅れての着手となってしまいました。しかしいざ教材を読み始めてみると意外に面白く、我ながら意外にも1日50ページのペースでそこそこ覚えつつ読み進められています。高校でどこか他人事に感じながらも授業で教わった簿記の授業や、デザイン基礎で教わった権利関係の知識やマーケティングのさわり、更にはレタリング検定・色彩検定の体験ですら感覚的に近いものがあり、勉強の楽しさを思い出しています。何だったら「漫画で見たやつ」が具体的に解説されていて興味深い、そもそも読書が好きなのにここ数年できていなかったため脳が趣味としての読書だと思っている可能性すらあります。脳が可哀想なので、無事合格できたら好きな本を読ませてあげようと思います。
本題に入ります、、

最近よく使っているCSS TIPS

子要素をhovrしたら親要素を黒くしたい

.parent {
  pointer-events : none;
}
.parent:hover {
  background : black;
}
.child {
  pointer-events : auto;
}

stickyで画面下位置に追従させたい

ただbottom: 0;に設定すると、top: 0;を挙動ごと上下反転させたような追従になる
＝規定の位置にスクロールする前から画面にあり、規定位置に達するとそこに固定されスクロールされていってしまう。
```
.sticky_bottom {
 position: sticky;
 bottom: 10px;
}
↓
.sticky_top100 {
 position: sticky;
 top: 100%;　←10px余白が欲しかったらcalc(100% - 10px)
 transform: translate(0, -100%);
}
```

body幅に関係なく要素ごとに背景を画面幅いっぱいに広げたい

擬似要素::before/::afterで要素の横幅に関係なく画面幅の背景を設定します。

.background {
 position: relative;
}
.background::after {
 content: "";
 width: 100vw;
 height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 display: block;
 z-index: -1;
 background: white;
}
.background_red::after {
 background: red;
}

今後のcss tips？

またの機会がありましたら書くかもしれない内容です。

scssで小数点第三位まで丸める処理
round/ceil/floorなど、用意されている関数は小数点以下を処理し整数に丸めるもの。
table要素のstyle設定
アコーディオンのアニメーション　高さをpxで指定せずgridで開閉？

読んでいただきありがとうございました！

Blogブログ

最近よく使っているcss Tips

最近よく使っているCSS TIPS

今後のcss tips？