先日に引き続き今回もモダンブラウザで新たに使えるCSSプロパティをまとめていきたいと思います。前回記事「IEのサポート終了で積極的に取り入れたいCSSプロパティ＃1：実用編」では、実務でよく使うプロパティを中心に紹介していましたが、今回はデザイン表現やレイアウト制御など、あまり利用頻度は高くないもののとても便利なプロパティについて見ていきたいと思います。  

text-stroke

text-strokeプロパティはテキストに境界線を設定できるプロパティです。境界線の太さと色を設定することができます。ただ、全てのモダンブラウザで使えるものの「-webkit-」のベンダープレフィックスが必要となりますので注意が必要です。

h1 {
  -webkit-text-stroke: red 6px;
}

  最初の値には色を、2番目の値に太さを指定します。境界線はテキストの内側や外側でもなく中間に設定されるので、境界線を太くしすぎると文字が塗りつぶされてしまう点にも注意したいですね。文字色を透明にしてアウトライン文字にしたり、text-shadowなどを組み合わせたりすることで、テキスト周りのデザイン表現もかなり幅が広がりますね。    

background-clip

background-clipプロパティは、背景をマスクすることで背景画像や背景色の描画領域をコントロールすることができます。値には、「border-box」「padding-box」「content-box」などボックスモデルの範囲を指定するなどで、paddingの部分に背景を反映させないということも可能になります。

<p>テキスト...</p>

p {
  background: url(./photo.jpg) no-repeat center center/cover;
  background-clip: content-box;
  padding: 60px;
  border: 10px;
}

  また、値を「text」とすることで背景をテキストに合わせてマスクすることもできます。こちらについては過去記事「CSSでテキストの文字に合わせたマスクをかける」で詳しく紹介していますのでご参考まで。注意点として、textの値を使う際には対応していないブラウザもあるので、ベンダープレフィックスが必要になります。    

clip-path

clip-pathプロパティは先ほどのbackground-clipと似ていますが、背景だけでなく要素全体を任意の形でクリッピングすることができます。値には所定の関数を使い、ベクター図形を扱うような感じでクリップする領域を指定します。1つ目の値にはクリッピングの対象領域をボックスモデルに合わせて調整することもできます。

img {
  width: 500px;
  height: 500px;
  clip-path: content-box polygon(50% 0%, 0% 100%, 100% 100%); // content-boxの範囲を対象に三角形にクリッピングする
}

  くり抜く形は円形の「circle()」多角形の「polygon()」といった関数で指定できるため、かなり自由度が高くなります。また「url()」で指定したSVG図形の形でクリッピングすることも可能です。clip-pathにおいてはさまざまなジェネレーターもあるようですので、それを使って試してみるとわかりやすいですね。    

min(), max(), clamp()

min(), max(), clamp()といったこれらは比較関数と呼ばれ、引数に入れられた値を比較してそれぞれ条件に合わせて出力されるようになります。なかなか文面ではイメージが難しいのですが、実際に表示させて処理を行うとわかりやすいかと思います。値を比較するので、引数には必ず複数の値が入る形になります。「min()」では引数の中で最小となるものが、「max()」では引数の中で最大となるものが、「clamp()」では、下限と基準値と上限の3つを設定し、下限と上限の間の場合には基準値が選ばれるという、その時の条件に合わせてマッチする値がそれぞれ計算されます。

.sample-01 {
  // 要素のサイズは600px以上にならず、600pxに満たない場合には常に50%のサイズになる
  width: min(50%, 600px); 
}
.sample-02 {
  // 要素のサイズは200px以下にならず、それに満たない場合には常に50%のサイズになる
  width: max(50%, 200px); 
}
.sample-03 {
  // 要素のサイズは200pxを下限に、600pxを上限とし、その間は常に50%のサイズになる
  width: clamp(200px, 50%, 600px); 
}

  これらは特にレスポンシブのレイアウトなどで便利に使えそうですね、表示領域に合わせてメディアクエリなしにサイズを動的に変えることができるのはかなりコードの見通しも良くなりそうですね。    

scroll-snap-type

scroll-snap-typeは、スクロール量に合わせて要素の位置にスクロールをスナップさせるためのプロパティです。scroll-snap-typeプロパティでnoneの値以外を指定することで、その要素内でスクロールによるスナップが有効となり、スクロール量に合わせて子要素の位置にスナップされるようになります。スナップに対応させるスクロール方向は縦、または横、もしくは両方に対応させることができ、スナップの強さも調整できるようになっています。

<div class="container">
  <section></section>
  <section></section>
  <section></section>
  ....
</div>

.container {
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow: auto;
}
.container > section {
  width: 100%;
  height: 100%;
}

  上記の例では、全画面表示のコンテンツを縦方向のスクロールに合わせてスナップさせるサンプルになります。詳しくは過去記事「CSSのscroll-snap-typeプロパティで全画面表示のスクロールスナップを実装する」でもまとめていますので合わせてご参考ください。    

:focus-within

:focus-within擬似クラスは、設定した要素の子孫要素でフォーカスしているかどうかをチェックすることができます。主にフォーム周りで使うことが多いかと思いますが、インプット要素の入力中はフォーム全体のデザインを変えるというようなことが実現できるようになります。

<form action="index.html" method="post">
  <input type="text" value="">
  <input type="email" value="">
  <textarea></textarea>
  <input type="submit" value="SUBMIT">
</form>

form {
  background: white;
}
form:focus-within {
  background: red;
}

  上記では、inputやtextarea要素へフォーカスしている状態で、form要素全体の背景色を変えることができます。:focus擬似クラスと組み合わせることで、ユーザビリティを意識したデザインに役立ちそうですね。    

:is(), :where()

:is()もしくは:where()を使うと、複数のセレクタを一つにまとめることができます。Sassなどを使っている場合はネストで書くことでまとめることができますが、CSSだと必要なセレクタは全て指定する形になります。そのようなケースで、引数にセレクタをリストで指定入れる形で一括指定ができるようになます。

// before
header > h1,
footer > h1,
article > h1 {
  font-size: 4rem;
}

// after
:is(header, footer, article) > h1 {
  font-size: 4rem;
}

  :is()も:where()も基本的には同じようにセレクタをまとめるものとして使うのですが、まとめたセレクタの中で詳細度が異なるものが含まれる場合の結果が変わってくるというのが違いになります。

// :is()の場合、.sectionとsectionの詳細度は#sectionと同じ詳細度になる
:is(.section, #section, section) > h1

// :where()の場合、sectionと全て同じ詳細度になり、詳細度が無視される
:where(.section, #section, section) > h1

  慣れていないとこのような挙動の違いに混乱してしまいそうですね、、Sassなどのプリプロフェッサーの場合はあまり使う場面が見られないかもしれませんが、CSSがかなり見やすくなるので積極的に活用してみたいですね。  

---

  今回も、IEのサポート終了に伴って使えるモダンブラウザ対応のCSSプロパティについてまとめてみました。CSSは近年大幅に進化しており、以前ではJavaScriptが必要となるような場面でもCSSだけで完結できるようになるなど、とても便利になりました。その分、知識のアップデートは大変になりますが、実践で使える便利なプロパティはぜひ試してみたくなりますね。