ブログ

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

2022.07.19 : Yamamoto Naoki
Coding

前回の続きです。

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

1.overscroll-behavior

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

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

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

2.line-clamp

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

3.object-fit

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

4.place-items

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

5.details & summary

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

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

アーカイブ

新しいサイト制作や、既存サイトの運用に関するお困りごとなどございましたらご依頼、ご相談ください。

ビジネスやサービスに最適なウェブ制作、デザインをおこなっている株式会社ナナサンの会社案内をダウンロードいただけます。

制作依頼・ご相談 資料ダウンロード
イメージ:制作依頼・ご相談
イメージ:制作依頼・ご相談