更新日: 2020年07月10日
公開日: 2020年05月13日

教科書にはのっていないCSSテクニック5選

CSS、参考書や講座で登場してくるセレクタやプロパティ以外にも、たくさん便利そうなモノがあるってご存知でしょうか？

今回は特に最近各種ブラウザーが対応はじめたセレクタやプロパティをご紹介させて頂きます。

「おっ、それやったら JavaScript を組まなくても良さそうやな」というところもあると思いますので、参考にしてみてください。

【ご紹介するセレクタ】

scroll-snap
sticky
filter
prefers-color-scheme
grid

教科書にはのっていないCSSテクニック5選
見せたいところで合わせてくれる「scroll-snap」
画面上部で次々にコンテンツを固定したいときは「sticky」
ポスターみたいなデザインを可能にする「backdrop-filter」
ダークモード＆ライトモードを自動で切り替える「prefers-color-scheme」
Webデザインには欠かせない「Grid」
まとめ

教科書にはのっていないCSSテクニック5選

見せたいところで合わせてくれる「scroll-snap」

上図のコードを確認する


---- HTML CODE ----
<!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <main>
    <figure id="one"><div class="top-left"><h2>Audi</h2></div><figcaption>A7 ?<br>2020<br>800万円<br><a href="">詳細</a></figcaption></figure>
    <figure id="two"><div class="top-left"><h2>BMW</h2></div><figcaption>8シリーズ<br>2020<br>800万円<br><a href="">詳細</a></figcaption></figure>
    <figure id="three"><div class="top-left"><h2>アメ車</h2></div><figcaption>型不明<br>1950<br>200万円<br><a href="">詳細</a></figcaption></figure>
    <figure id="four"><div class="top-left"><h2>Audi</h2></div><figcaption>Q7 ?<br>2020<br>800万円<br><a href="">詳細</a></figcaption></figure>
    <figure id="five"><div class="top-left"><h2>アメ車</h2></div><figcaption>型不明<br>1955<br>220万円<br><a href="">詳細</a></figcaption></figure>
    <figure id="six"><div class="top-left"><h2>BMW</h2></div><figcaption>?<br>2020<br>500万円<br><a href="">詳細</a></figcaption></figure>
  </main>
</body>
</html>

---- CSS CODE ----
* {
  box-sizing: border-box;
}

body {
  background-color: #150e64;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  -webkit-box-align: center;
          align-items: center;
  padding: 0 10vw;
  box-shadow: inset 0 0 5vw 10vw rgba(21, 14, 100, 0.34);
}

main {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

figure {
  scroll-snap-align: start;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-size: cover;
  background-position: center;
  display: -webkit-box;
  display: flex;
  position: relative;
  -webkit-box-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
          align-items: flex-end;

}

figure figcaption {
  color: #fff;
  position: relative;
  padding: 1em 0.5em;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top-left {
  position: absolute;
  top: 0rem;
  left: 2rem;
  color:#fff;
}

a:link {
  text-decoration: none;
}

 #one {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c6.jpg);
}
 #two {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c1.jpg);
}

 # three {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c2.jpg);
}

 #four {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c3.jpg);
}

 #five {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c4.jpg);
}

 #six {
  background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c5.jpg);
}

カタログ系の Web サイトで使えそうな scroll-snap。今表示されているコンテンツが画面の上と下、もしくは左と右、どちらより・・かを自動で判断してコンテンツを自動で画面に合わせてくれます。

従来こうした画面とコンテンツの位置関係、 JavaScript を使って調整することが多くありましたが、端末毎に画面幅が違ってなかなか制御しにくい部分もありました。こうした問題を scroll-snap が解いてくれます。

実際の利用にあたっては、 scroll-snap-type で縦制御か横制御かを決めて、scroll-snap-align: start; で画面に合わせたいポイントを指定。このほかにも scroll-margin-〇〇 や scroll-padding-〇〇 細かい設定を合わせると 20以上のプロパティが。

また同じ画面位置で複数の画像をユーザーに見せようと思うと、 JavaScript を活用したスライドショーが使われていると思います。パソコンで見る分には何の不便も感じない JavaScript ベースの画像送りも、スマホだと若干見にくくて、任意の画像を選択するボタンも押し難かったりするというストレスが。この問題、 scroll-snap が解決策になるかもしれません。

オリバーさんの scroll-snap を使った例

たくさんある国旗を良い感じに表示してくれますね、実際に横スクロールして試してみてください。

このように縦・横スクロールした時に "ピシッ" と画像を見せたい時は、 scroll-snap を参考にしたいですね。ただ無闇に使うとこの画面が勝手に動く感覚、慣れていないユーザーが多いと思いますので、要注意かもしれません。

画面上部で次々にコンテンツを固定したいときは「sticky」

上記動画のサイト　https://pythonchannel.com/twitter_search_bot/

こんな経験ございませんか？スマホなどでスクロールしていったけど、あれっ、何をみていたんだっけ... もしくはあれっ、なんのサイトを見ていたんだっけ... こうしたユーザーの不安や小さいストレスはコンバーションに悪影響。

従来こうしたトップにサイト名やメニューを表示したままにする方法は、 JavaScript を用いて解決していたと思います。 W3School などでも JavaScript を用いてメニューをトップに固定する方法を紹介していますね（リンク）。

確かに JavaScript を使って解く方法もありますし、 CSS の position: sticky; で解く方法もあります。 CSS の sticky を使った場合は、要素の固定に加えて、あとの要素をラップできるという特徴もあります。使い方は色々あると思いますが、縦スクロールが長くなりがちな商品カタログや仕様書、それから目次など用途はあなた次第と言えるでしょう。

ただし、縦スクロールで sticky の部分を次々に重複させる場合は、固定要素の縦の高さを揃える、もしくはあとのコンテンツの方が高い必要があります。そうでないとはみ出しちゃうんですね。

また sticky のサンプルコードの中には <table> の <thead> <tr> で組み込んでいるケースもありますが、ブラウザ：safari では ❌ かもしれません。 Can I use（リンク）では問題なさそうですが、 -webkit をセットしても私はうまくいきませんでした。

尚、 position: fix; と position: sticky: は "固定" という点で似ていますが、fix の方は view ポイントもしくはブラウザ画面に対して作用。それに対して sticky はスクロール位置に基づいて配置されます。ちょっと文字だけではイメージしにくいと思いますので、実際に CSS を打ち込んで試してみて下さい。

ポスターみたいなデザインを可能にする「backdrop-filter」

上図のコードを確認する


<!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <style>
      .box {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        text-align: center;
        line-height: 1;
       -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        width: 30vw;
        height: 30vh;
        margin-left:50vw;
        padding: 1rem ;
      }

      html,
      body {
        height: 100%;
        width: 100%;
      }

      body {
        background-image: url(https://pythonchannel.com/static/images/codecamp/img/car/c1.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .container {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
      }
      p{
          font-size: 1.5rem;
      }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <h1>BMW 5 Series</h1>
      <p>超キレッキレで早いよ</p>
      <p>見た目もビューティー</p>
      <p>次の一台にどうかな</p>
    </div>
  </div>
</body>
</html>

従来画像内にコンテンツを重ねようと思うと position:relative; や position:absolute; を使って要素を重ね、下画像を透過したい時は "透明度"　を調整して設定していたと思います。そうした処理に backdrop-filter を加えると、「透過＋ぼかし」「透過＋セピア」など表現方法に幅が広がるというわけです。

backdrop-filter の使い方としては、上図のようなテキスト表現やモーダル・ポップアップの表示にも良い感じに使えます。あと制御方法によっては、ダークモードを考慮した画像プロパティにも使えるでしょう。例えばブラウザ（端末）がダークモードを採用していれば、少し画像の輝度を落とすなど。

backdrop-filter で制御できるプロパティは、ぼかしや輝度意外にも合計 10種類ほどあります。

backdrop-filter: blur(5px);　（ぼかし）
backdrop-filter: brightness(80%);　（輝度）
backdrop-filter: contrast(40%);　（コントラスト）
backdrop-filter: drop-shadow(4px 4px 10px blue);　（影）
backdrop-filter: grayscale(30%);　（グレースケール）
backdrop-filter: hue-rotate(120deg);　（色相回転）
backdrop-filter: invert(70%);　（反転）
backdrop-filter: opacity(20%);　(透過)
backdrop-filter: sepia(90%);　（セピア）
backdrop-filter: saturate(80%);　（飽和率）

これらの backdrop-filter の違い、アンディーさんが作成したサンプルが分かりやすいと思いますので、以下にご紹介。

CodePenアクセス後、横にスクロールしてみて下さい。

実際の使用にあたっては CSS がわかっていないと ❌ ですが、こうした CSS 機能も柔軟に使えるといいですね。

ダークモード＆ライトモードを自動で切り替える「prefers-color-scheme」

上図のコードを確認する


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

@media (prefers-color-scheme: dark) {
  body   { background:  #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body  { background: white; color:  #555; }
}
</style>
</head>
<body>
    <h1>Dark Mode & Light Mode</h1>
</body>
</html>

1年ほど前から普及してきている端末のダークモード。目に優しい黒画面で見たいのに、 Webページにアクセスすると白背景の明るい画面、これが多くの Web サイトの現状です。

この結果、Webサイトを運営する側の都合とは別に、ユーザーは無意識の内にストレスを感じてしまう。これは Webサイトに長く滞在して欲しいと考えるサイト運営者とは相反する結果に。

こうした端末の環境の多様化に対応できる CSS が prefers-color-scheme 。 CSS で @media (prefers-color-scheme: dark) {} と宣言すればダークモードのレイアウトを記述でき、 @media (prefers-color-scheme: light) {} とすればライトモードの CSS を記述可能。端末の画面幅によって CSS を振り分ける @media と同じような使い方をしますね。

ちょと不思議な感じもしますが、 prefers-color-scheme と宣言するだけで、端末の環境を自動で読み込み、ダークモードだったら dark、ライトモードだったら light と自動で処理。複雑な CSS 制御でカラーデザインを豊富にしているサイトには手間がかかるので向かない機能かもしれませんが、ブログなど比較的シンプルな CSS サイトには良いかもしれませんね。

Webデザインには欠かせない「Grid」

画面を規則正しく分割でき、レスポンシブ・デザインにも溶け込みやすいグリッドデザイン、 CSS の grid 系セレクタや display:grid で OK です。

ステファニーさんのサンプル（CodePen）

上図のように画像ギャラリーや商品ギャラリーに使えるグリッド・デザインですが、こうしたデザイン Bootstrap のグリッド・システムを思い浮かべる方も多いと思います。

一昔前までは Bootstrap を使う方法が一般的だったかもしれませんが、 2017年ぐらいから普及した CSS の grid で間に合うケースもあるでしょう。また grid は、レイアウトを規則正しく保つだけでなく、 @media を使わなくてもレスポンシブ・デザインに対応可能。 CSS の記述量を減らせ、メンテナンスしやすい、管理しやすい Webサイトになりますね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら