IEサポート終了したのでIE非対応の便利なCSSを6選紹介します。

INDEX

こんにちは、ミズノです。

2022年6月16日でInternet Explorer 11(Windows10)のサポート終了に伴い、(一部を除き)すべてのInternet Explorerが過去のものとなりました。

今回はこれから使う機会が増えそうなIE非対応の便利なCSSを6選紹介していきたいと思います。

1.line-clamp

要素に行数制限を指定できます。行数を超えたテキストは「…」となります。-webkit-line-clampの値を変更することで行数の制限範囲を変更できます。

CSS

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

デモ


2.scroll-behavior

1行追加するだけでページ内リンクのスクロールをスムーススクロールにできます。また、アンカーリンク付きURLでアクセスしたときもスムーススクロールでスクロールされます。

スピード・イージングは調整できず、ブラウザ依存となっています。

ヘッダーを上部に固定した際にページ内リンクでスクロールするとヘッダーとコンテンツが重なりますが、scroll-marginを使うことでスクロール後のヘッダー位置を調整できます。

CSS

html {
  scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 58px; // ヘッダーの高さ分
}

デモ


3.display:contents

display:contentsを使用された要素は開始タグと終了タグがマークアップから省略されたようになります。

下記はイメージです。

<div class="wrapper">
  <p>text</p>
</div>
 ↓ // .wrapperにdisplay:contentsを使用

  <p>text</p>
  

使用する場面としては

display:griddisplay:flexを適用したいがHTMLの構造上<article><section>を入れておきたい、グループ化したいといった場合に使用します。

例1

隣合った2つのコンテンツのタイトル・テキストを同じ高さにしたい。

display:gridを使用してレイアウトを実装することは可能ですが、下記のようなHTML構造になるかと思います。

<div class="display-contents">
    <h2 class="display-contents__heading">title</h2>
    <p class="display-contents__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div class="display-contents__img"></div>
    <a href="" class="display-contents__link">BUTTON</a>
    <h2 class="display-contents__heading">Lorem, ipsum dolor sit amet consectetur</h2>
    <p class="display-contents__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id atque officia aut facere quidem necessitatibus natus corrupti, quo quas nesciunt facilis, ex, beatae.</p>
    <div class="display-contents__img"></div>
    <a href="" class="display-contents__link">BUTTON</a>
</div>

次にdisplay:contentsを使用する場合は各コンテンツを<section>でグループ化し、.display-contents__sectiondisplay:contentsを使用することでセマンティックなHTMLを実現できます。

<div class="display-contents">
  <section class="display-contents__section">
    <h2 class="display-contents__heading">title</h2>
    <p class="display-contents__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    <div class="display-contents__img"></div>
    <a href="" class="display-contents__link">BUTTON</a>
  </section>
  <section class="display-contents__section">
    <h2 class="display-contents__heading">Lorem, ipsum dolor sit amet consectetur</h2>
    <p class="display-contents__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id atque officia aut facere quidem necessitatibus natus corrupti, quo quas nesciunt facilis, ex, beatae.</p>
    <div class="display-contents__img"></div>
    <a href="" class="display-contents__link">BUTTON</a>
  </section>
</div>

デモ


例2

PCレイアウトでは画像とテキストエリアが分かれており、SPレイアウトでは画像がテキストエリアの中に入ってくる。

display:flexを使用して上記のPCレイアウトを組むときは画像とテキストエリアでグループ化することが多いかと思います。この場合SPレイアウトのとき.display-content__contentdisplay:contentsを使用します。あとはorderで順番を変更して対応できます。

  <div class="display-content__wrapper">
    <div class="display-content__img"></div>
    <div class="display-content__content">
                ⋮
    </div>
  </div>

デモ


4.overscroll-behavior: contain

スクロール領域の境界に達したときにスクロールチェーンを抑止できます。

スクロールチェーンとはoverflow: autooverflow: scrollなど使用されてスクロールできるコンテンツがあるとき、そのコンテンツがスクロール領域の境界に達したあとメインのコンテンツまでスクロールされる現象のことです。


デモ


ハンバーガーメニュー内で後ろのコンテンツがスクロールしてしまう問題でもoverscroll-behavior: containを使用すれば固定することができます。ただし、メニュー内の長さが短い場合は後ろのコンテンツがスクロールされてしまうのでご注意ください。

デモ(ハンバーガーメニュー内でスクロールを固定)


5.inset

insettop, right, bottom, left に対応する一括指定プロパティです。marginの一括指定における複数値の場合と同じ構文で使用できます。

css

.position {
 inset: 0; // 上下左右
  inset: 10px 20px; // 上下 / 左右
 inset: 10px 20px 30px 40px; // 上 右 下 左
 }

fixedの要素などをセンター合わせにする際の記述量が減りますね。

.fixed {
  position: fixed;
 inset: 0;
  margin: auto
 }

デモ


6.place-items: center

insetpositionを使いましたが、place-itemsgridでのセンター合わせを簡単にできます。place-itemsalign-itemsjustify-itemsに対応する一括指定プロパティです。

CSS

2行でセンター合わせにできます。

.items {
 display: grid;
 place-items: center;
 }

デモ


補足としてdisplay:gridではなくdispay:flexではできないのか?についてですが、dispay:flexではjustify-itemsがないためできません。主軸の配置決めにはjustify-contentがありますよね。

dispay:flexjustify-itemsがない理由として、

  • フレックスボックスでは主軸上アイテムは一つのグループとして扱われる
  • アイテム毎にmarginを使用すれば位置合わせは可能

そのためにjustify-itemsjustify-selfに相当するものはないようです。

終わりに

以上、IE非対応の便利なCSS6選でした。参考になれば幸いです。!

それではまた。

参考サイト

PREV

BLOG一覧

NEXT

最新記事 Latest