こんにちわ、かずです。
ちょっと前までJSをつかったり計算がややこしかったりしたものが便利になったものです。
そんなこんなでまたまた便利なCSSをご紹介！
▼過去に紹介したもの
aspect-ratio
使っている方も多くなってきましたかね！
padding-top:66.666%とかって書いて縦横比率を維持していたものが、とっても簡単になりました！
「横 ÷ 縦」で簡単に計算出来るものならいいんですが、疑似要素に使う場合、親要素との兼ね合いとかで計算がややこしすぎて結局検証ツール使って見た目合わせしたり・・・
そんなときはこちら！
計算はCSSがやってくれますので維持したい比率の数字を書くだけ。
子要素が画像であれば「object-fit」使ったりでもう完成！
完成品がこちら。ブラウザの横幅ぐりぐりしてもらえると比率が維持されていることがわかります。スマホの方はすみません。
scroll-margin-top
続いてはこちら
アンカーリンクなんかで指定位置までスクロールさせたときに、ヘッダーがfixの状態だとヘッダーと要素が被ってしまいますよね。
そんなときに要素にこちらのCSSを書いていただくだけ！ヘッダーの高さを指定するのがオススメ。
#anchor{
scroll-margin-top: 100px;
}
すると、指定した要素から100px上でスクロールがとまります！便利！
今までJSでヘッダーの高さを取得してその分をマイナスして・・・としていましたが、これがあれば余計な記述を減らせますね。
アンカーとなるID名をある程度統一して
[id*="anchor-"]{
scroll-margin-top: 100px;
}
<div id="anchor-01"></div>
<div id="anchor-02"></div>
こんな感じでまとめて処理出来るのでちょっと便利です！
それでは。
この記事をシェアする
-
人気の記事
-
新着記事
-
濃厚生クリームソース×スパイス香る粗挽き肉。長野市青木島町の『tone cafe』に新ランチ「フレンチトースト」が登場！
POSTED | 2025.11.17
-
上田市・別所温泉の北向観音で御開帳へ！参拝後に立ち寄りたいおすすめカフェもご紹介
POSTED | 2025.10.28
-
一般社団法人あいのて様が会社見学に来てくださいました。
POSTED | 2025.10.24
-
長野市の複合施設 tone village 内の『tone cafe』で生まれる、おいしい出会いの空気
POSTED | 2025.10.22
-
在宅ワークで見守れた3年間。るなぱあくで感じた“働く時間と、家族の時間”
POSTED | 2025.10.20
-
-
カテゴリー
div{aspect-ratio: 16/9;
}