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

2021/07/30 13:16
LINE

今回は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行記述するだけで白背景を透過させることが出来ます。

CSS編集前画像
矢印
CSS編集後画像
  
    <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で実装

detailssummaryを使用するとよくある質問の実装ができます。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);にすることでテキスト表示範囲内が透明になり、背景の写真が表示されるようになります。

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

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

まとめ

今回はIE非対応でモダンブラウザで使えるイケてるCSSを紹介させていただきました。

今回紹介させていただいたCSSを組み込むことでデザイン性が高いWebサイト制作の参考になれば幸いです。

今後も便利なCSSを紹介していくので楽しみにお待ちください。

この記事を書いた人

SEOタイムズ 編集部

SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。

"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。

ランキング

  • 週間
  • 月間
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
重ね言葉、知らないうちに使っていませんか?
2022/11/22 12:00
web
#ライティング
3
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
4
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
5
Swiperを使用した基本的なスライダー実装から応用まで!実用的な6つのサンプル
2022/11/25 12:00
web
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
3
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
4
重ね言葉、知らないうちに使っていませんか?
2022/11/22 12:00
web
#ライティング
5
CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」
2021/11/15 13:46
web

SEOタイムズとは?

SEOタイムズとは?

SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。

"初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
20,000社以上の幅広い業種の集客支援実績から得られた経験とノウハウをベースに最新の情報をお届けします!

今すぐ出来るSEO対策情報も満載。あなたのWebマーケティング戦略を成功に導きます。