IEのサポート終了後、実際に使える便利なCSSプロパティ5選！

IEのサポートが終了してからはや3カ月が経ちました。
デザイナーの中でも一躍話題となったこの一件が過ぎ、皆さんの業務はどのように変わりましたでしょうか？
使えるCSSの幅が広がる！ということで、一時期は「こんなことまでできるんだ！」と驚くような面白いCSSも多く紹介されていましたが、実際に使用しているものもあれば、あまり使う機会がないものもありますよね。

そこで今回はIE終了後から実際に私が業務で活用するようになったCSSや、便利だと感じた実用性の高いCSSを5点、まとめてご紹介いたします！

gap … フレックスボックスやグリッドレイアウトの余白指定

「gap」はグリッドレイアウトやフレックスボックスにおいて、ボックス同士の間の余白を簡単に指定することができるプロパティです。
今までフレックスボックスの余白指定にはlast-childなどの疑似クラスを使用していましたが、このgapプロパティはボックス同士の間の余白を指定しつつも、フレックスボックス全体の外枠に接する面には余白がつかないので、複数行カラムのレイアウトでボックス間以外に余白をつけたくないときに重宝します。

IEの対応が終了してから私が実際に業務で使用し始めたプロパティのなかでも、群を抜いて使用率が高いプロパティです。

object-fit … アスペクト比を固定した画像の拡大・縮小

object-fitは画像のアスペクト比（縦横比）を維持した状態で、画像の拡大縮小やトリミングがCSS上でおこなえるプロパティです。近い指定ができるbackgroundと比べても、object-fitの方が直感的に指定ができる上に指定方法も多く、使いやすいプロパティとなっています。

object-fitの指定セレクタ

• fill（初期値）
  縦横比の比率は考慮されず、ボックスの大きさに合わせて画像表示。




• cover
  画像の縦横比を維持した状態で、余白が出ないようにボックス内中央に配置。
  ボックスからはみ出る部分はトリミングされる。




• contain
  画像の縦横比を維持したままボックス内の中央に配置。
  縦横の長い方に合わせて、ボックス内に自動で画像を配置してくれる。




• none
  画像の大きさは変更せず、そのままのサイズで中央に配置。




• scale-down
  ボックスより画像が大きい場合は「contain」を、小さい場合は「none」で配置。

主に私はcontainとcoverを使用します。画像サイズがバラバラな商品パッケージ画像などをCSSで同じサイズに一括でトリミングしたり、配置したいときに便利です。

また、コンテンツのアスペクト比を指定した比率に固定する「aspect-ratio」プロパティと合わせて使うことで、どんな縦横比の画像を投稿しても見栄えが悪くならずにレスポンシブに対応できたりと、CSS上で画像を表示させる際にとても便利なプロパティです。

grid … グリッドを使用した方眼状で組み替えるレイアウト

グリッドレイアウトは、指定したコンテンツを縦横で格子状に分割し、方眼状になったコンテンツのブロックを組み替えたり組み合わせることでコンテンツを作り上げていく、Webデザインの定番ともいえるレイアウトをおこなうプロパティです。
指定したコンテンツ内であればコンテンツ同士の順番も自由に入れ替えることができるため、flex-boxでは難しいレスポンシブのレイアウトもおこなうことができます。

▼グリッドレイアウトついて詳しく知りたい方はこちらの記事から！▼
IE終了後に使いたい！グリッドレイアウトについて

scroll-behavior … Javascript不要でできるスムーススクロール

ここからは、今まではJavascriptやPHPを使用してしていたものがCSSだけで指定できるようになったプロパティを紹介します。まずは、アンカーリンクなどのリンククリックで画面内移動をする際の動きをスムーズにすることができるプロパティ「scroll-behavior」です。

何行ものJavascriptを記述する必要もなくたったの1行で実装できてしまうため、Javascriptがつかえない環境でスムーススクロールをしたいときは勿論、それ以外でも作業の効率化につながります。

しかし、1行でスムーススクロールの設定ができてしまうので、細かい調整をすることはできません。
そのため、使用する状況に合わせて今までどおりJavascriptを使用するべきか、CSS上で指定するかを使い分ける必要があります。

line-clamp … Javascript不要でできる文書の表示量指定

「line-clamp」は、指定したコンテンツ内のテキストを一定の行から三点リーダーで表示したいというときに活躍するプロパティです。今まではjavascriptやPHPを使用するほかありませんでしたが、このline-clampプロパティを使用すればCSSだけでテキストの省略ができるようになります。

まとめ

いかがでしょうか。
実際に使っているものもあれば、使っていない新しいプロパティもあったかと思います。
このように、便利な技術を実際に業務に取り入れていくことで、今まで難しかった作業や手間がかかった作業をもっと簡単に、効率よくおこなうことができます。


今回紹介したもの以外にも使えるようになったプロパティはたくさんあります。
皆さんも便利なプロパティを探して活用してみましょう！

弊社では常に新しい情報を活用してWeb制作の構築や運営をおこなっています。ECサイト制作・運用や、店舗の新規立ち上げから、繁忙期の制作など、ぜひお気軽にお問い合わせください。

新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by matsubayashi