IE非対応！モダンブラウザで使えるCSS

2021/07/30 13:16

web

今回はIEサポート終了に伴う、IE未対応ですぐに実践で使えるイケてるCSSを紹介させていただきます！

背景として、マイクロソフト社が正式にInternet Explorer 11 デスクトップアプリケーションのサポートを2022年6月15日に終了することを発表。

それに伴い、WordPressも2021年7月のアップデートからIE非対応を表明しました。

これまでは、IE対応のために使用出来なかったCSSをサイト内で利用出来るチャンスです。2022年6月以降のために今から知識を蓄えておいてはいかがでしょうか。

写真フィルターを実装する

ぼかし

    
      .bf01 h3 {
        background-color: rgba(255 255 255 / .2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

グレースケール

    
      .bf02 h3 {
        color: #111;
        backdrop-filter: grayscale(100%);
        -webkit-backdrop-filter: grayscale(100%);
      }

セピア

    
      .bf03 h3 {
        color: #111;
        backdrop-filter: sepia(100%);
        -webkit-backdrop-filter: sepia(100%);
      }

輝度

    
      .bf05 h3 {
        backdrop-filter: brightness(160%);
        -webkit-backdrop-filter: brightness(160%);
      }

コントラスト

    
      .bf06 h3 {
        backdrop-filter: contrast(230%);
        -webkit-backdrop-filter: contrast(230%);
      }

反転

    
      .bf07 h3 {
        backdrop-filter: invert(70%);
        -webkit-backdrop-filter: invert(70%);
      }

まとめて複数の値を設定

bacdrop-filter,cotrast,blurを掛け合わせることでできます。

    
      .bf04 h3 {
        color: #111;
        backdrop-filter: sepia(70%) contrast(230%) blur(5px);
        -webkit-backdrop-filter: sepia(70%) contrast(230%) blur(5px);
      }

背景を透過させるCSS

ロゴに白背景が入っていた際、これまではPhotoshopで加工して使用していたと思いますが、CSSで非表示にできるmix-blend-mode: multiply;が便利です。

画像ファイルに1行記述するだけで白背景を透過させることが出来ます。

  
    <div class="blend">
    <img src=" 画像URL " alt="logo">
    </div>

  
    .blend {
      display: grid;
      place-items: center;
      height: 100vh;
      background: url( 画像URL ) no-repeat center/cover;
    }
    
    .blend img {
      mix-blend-mode: multiply;
      max-width: 300px;
      height: auto;
    }

CSSのみでpng画像に影をつける

背景が透過したpng画像の被写体をターゲットにして影を落とすことができます。

    
      .image_shadow img {
        filter: drop-shadow(10px 10px 0 #c3a400);
      }

影までを画像としてデザインすることが多いと思いますが、CSSで実装すると新たな表現ができると思うので知識としてストックしておくことをおすすめします。

よくある質問をdetailsで実装

detailsとsummaryを使用するとよくある質問の実装ができます。javaScriptなしで実装可能です。

    
      <details>
      <summary>よくある質問はdetailsタグで実装しています。ここをクリックすると回答文が表示されます。</summary>
      <div class="answer">
      <p>summaryタグをクリックするとここが表示されます。JavaScriptは不要です。作業量がかなり減るので提案しやすいですね。</p>
      </div>
      </details>

追従する見出し

position: sticky;を使うことで見出しをセクション毎に追従させることができます。

    
      h2 {
        position: sticky;
        top: 0;
        padding: 30px 0;
        background-color: #fff;
      }

position: sticky;を指定した要素を包含するブロック要素や直近の要素を基準に追従してくれるようになります。top: 0;で位置を指定しています。

right,bottom,leftで自由に配置することができます。

枠線を引いてすすっとズラしたテキストを実装する

text-strokeでテキストの縁を指定することができます。現状どのブラウザでもベンダープレフィックスが必要なので、-webkit-で記述します。

    
      .stroke {
        -webkit-text-stroke: 2px #777;
        text-shadow: 3px 4px 0 #d8be39;
        color: rgba(0 0 0 / 0);
              display: grid;
      
        font-size: 100px;
              font-weight: bold;
        text-align: center;
      }

-webkit-text-stroke: 2px #777;の線の太さと線の色を指定。これを分解すると以下のようになります。

    
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: #777;

color: rgba(0 0 0 / 0);でテキストカラーを透明にし、text-shadow: 3px 4px 0 #d8be39;で黄色のテキストを実装。

本来テキストのように見える部分（黄色）をテキストシャドウで表現しています。

背景の写真をテキストの形でクリッピングする

background-clip: text;は、Photoshopでよく使うクリッピングマスクをCSSのみで実装するコードです。

Firefox以外はベンダープレフィックスが必要なので-webkit-も記述します。

    
      .backgroundclip p {
        background-clip: text;
        -webkit-background-clip: text;
        background-image: url(pic.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        color: rgba(0 0 0 / 0);
        font-size: 200px;
        font-weight: 700;
        text-transform: uppercase;
      }

テキストの背景に写真を指定し、クリッピングの対象をbackground-clip: text;とテキストにします。

この状態でテキストカラーを透明color: rgba(0 0 0 / 0);にすることでテキスト表示範囲内が透明になり、背景の写真が表示されるようになります。

このデザインはフォントのサイズが大きく太いものを選んだ方がいいと思います。

また、背景の画像もカラフルなものにすると見た目がよくなるのでおすすめです。