制作・見積り依頼(無料)

Blogブログ

ブログのイメージ

IEのサポート終了で、ちょっとCSSが楽に。vol.2

Coding2022.07.19 : Yamamoto Naoki

前回の続きです。

IEを除外することができれば、いろいろCSSが便利になります。

1.overscroll-behavior

スクロールチェーンを防止することができます。

ハンバーガーメニューでスクロールが行き着くとバックにあるコンテンツ部分がスクロールするアレを抑制できます。

メニュー部分がスクロールしないと、効果がないのが残念です。

2.line-clamp

記事の一覧表示なので、文章の表示の行数制限が可能になります。

3.object-fit

coverは画像の表示領域に関係なく比率をたもったまま描画してくれるので便利です。

4.place-items

いままではflexで3行でしたが、gridと上記のcenterを合わせると2行でいけます。

5.details & summary

これは、よくある質問などクリックで回答を表示させるようなものをjsを使わずに実装できます。

他にもいろいろありますので、よく使うものを紹介していきたいと思います。

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)