最新CSSで実装の幅がアップ！”今”使えるCSS！

こんにちは、社員Tです！

いきなりですが、HTML,CSSをはじめとしたWebコーディングの世界って進化が早いですよね。

新機能のリリースやデザイントレンドの移り変わりがあって、これまでスタンダードだと思っていた実装方法がいつの間にか過去のものに…なんて経験がある方も少なくないはずです！

そんなWebコーディングの”ちょっと前”と”今”を比較して、どれだけ便利になったのかをご紹介したいと思います！

CSSの実装比較

早速、最新のコーディング技術をご紹介！といきたいところですが、まず前提として

• CSSの新機能を紹介
• 記事更新時点で主要ブラウザにて動作が確認できる

上記に記載の条件に沿って、5つを従来の方法と合わせて比較、ご紹介していきます！

グラデーションテキストを作る

ちょっと前：illustratorなどで画像書き出し

テキストにグラデーションを設定した画像を作成し、<img>要素で読み込むことで表示させる必要がありました。

今：background-clip: text を使って実装

background-clip: text;

を使用することで、指定したテキストの形に背景を切り取ることができます。

また、背景の指定をグラデーションから画像にすることで画像をテキスト型に切り取ることも可能です。

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

イメージするグラデーションは、backgroundで指定すればOK！

要素の固定

ちょっと前：position: fixed を使用

単純な要素の固定であれば、特定の要素にposition: fixed を指定することで実装可能ですが、任意の場所で固定を解除したい場合などはjsからpositionの値を変える必要があります。

今：position: sticky を使用

IEサポート終了によって使いやすくなったposition: sticky は、要素を任意の位置に固定/解除ができるプロパティです。

ページ内に複数実装するのも簡単ですが、親要素に高さを持たせるのを忘れがちなので、注意が必要です。

See the Pen
Untitled by 鶴田佳佑 (@hjvzvsbh-the-builder)
on CodePen.

スムーススクロールの実装

ちょっと前：JavaScriptで実装

スムーススクロールを実装する方法はいくつかありましたが、いずれもプラグインを読み込んだりJavaScriptやjQueryを使用する必要がありました。

細かいカスタマイズができる利点はありますが、やっぱり少し手間に感じます。

今：scroll-behavior: smooth を使用

CSSでhtml要素にscroll-behavior: smoothを指定するだけで、ページ内アンカーリンクの移動がスムーススクロールになります。

html {
    scroll-behavior: smooth;
}

ホバースタイルの出し分け

ちょっと前：画面幅によってホバースタイルを出し分け

メディアクエリで画面幅からPC/SPを分けることで、それぞれホバースタイルを出し分ける方法ですが、デバイスサイズが多様化したりユーザー環境により期待通り動作しない場合があります。

a {
    color: #000;
}

// PC画面幅を指定
@media screen (min-width:1024px){
    a:hover {
        background-color: #555;
        color: #fff;
    }
}

今：ホバー対応デバイスかで出し分け

メディアクエリのany-hover を使うことで、そのデバイスがホバーアクションに対応しているかどうかによってスタイルを出し分けることができます。

// ホバー対応デバイス
@media (any-hover: hover) {
  a:hover{
     background-color: #555;
     color: #fff;
  }
}

// ホバー非対応デバイス
@media (any-hover: none) {
  a{
     color: #000;
  }
}

ブレイクポイントの指定

ちょっと前：min-width,max-widthで指定

画面幅の最大値、最小値などの組み合わせでブレイクポイントを指定します。

@media (max-width: 767px) {
    // SP用スタイル
}

@media (min-width: 768px) and (max-width: 1024px) {
    // TB用スタイル
}

@media (min-width: 1024px) {
    // PC用スタイル
}

今：画面幅を比較演算子で指定

メディアクエリで比較演算子「 < , <= , => , > 」が使用可能になったことで、より直感的にブレイクポイントが指定できるようになりました。

@media (width < 767px) {
    // SP用スタイル
}

@media (768px <= width < 1024px) {
    // TB用スタイル
}

@media (1024px <= width) {
    // PC用スタイル
}

まとめ

今回はCSSに焦点を当てて、新機能の紹介や従来の実装方法を比較しました。

体感的にはCSS（＋HTML）だけで完結できるような機能や表現がだいぶ増えた印象です。

もちろん従来の方法が適している状況だったり、今回例として出していない他の実装方法の方が良い場面なんかも多々あると思いますが、ひとまず「CSSだけこんなこともできるようになったんだ」くらいに感じていただければと思います。

まだまだ主要ブラウザの対応が待ち遠しい新機能もありますので、情報を待って技術のアップデートしてきたいですね！