Movatterモバイル変換

[0]ホーム
URL:

コリス

現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ

サイト構築 -CSS

Post on:2022年2月24日

sponsorsr

現在の実装でよく使用されるCSSの機能をはじめ、まもなく使用できるようになる新機能まで、現在とこれからのCSSを紹介します。

CSS3が登場した2015年以降の新機能、2022年これから登場するCSSの新機能、最近のCSSについてWeb制作に携わる人は要チェックです。

現在の実装でよく使用されるCSSの機能、これから登場するCSSの新機能のまとめ

What's New Since CSS3
by Chris Coyier

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

「CSS3」はCSSにとって大成功でした。たくさんの新機能がリリースされ、素晴らしいものばかりでした。CSSグラデーション、CSSアニメーション、border-radius、box-shadow、transform、などたくさんあります。さらに、CSS3のバナーも普及し、多くの人にCSS3が認知されることになりました。

CSS3の登場で、多くの人がこれらのテクニックに磨きをかけたことは間違いないでしょう。しかし、それ以降のCSSをあまり学んでいない人がたくさんいることも確かです。

他の人たちも同じような推測をしています。
Scott VandeheyはModern CSS in a Nutshellの中で、2015年頃からCSSについていけず、何を学べばいいのかよく分からないという友人について触れています。ScottのリストとCSS3の時代から変わったことをまとめてみたいと思います。

プリプロセッサはCSS3の時代から今日まで広く使用されていますが、プリプロセッサを使用する理由は減っているので、気にする必要はありません。これには将来の機能をポリフィルするような、より新しいアプローチも含まれます。これには、Autoprefixerも含まれます。CSS-in-JSは一般的ですが、ワークフロー全体がすでにJavaScriptで行われているプロジェクトに限られます。関連するプロジェクトに参加することがわかり、必要ならそのときに構文を学べばいいのです。カスタムプロパティ、Flexbox、Gridは確実に学んだほうがよいでしょう。

CSS3以降の新機能

CSS3が登場した2015年以降の新機能を解説します。

レイアウト

CSS
1
2
3
4
5
6
7
8
9
10
.card{
  display:grid;
  grid-template-columns:
    150px1fr;
  gap:1rem;
}
.card.nav{
  display:flex;
  gap:0.5rem;
}

FlexboxとCSS Gridをまだ学んでいない場合は、学ぶ必要があります。最近のCSS開発において重要な役割を担っており。CSS3で追加されたどの機能よりも重要です。

CSS Gridは、subgridとmasonryレイアウトを考慮するとさらに強力になります。どちらもクロスブラウザではまだ信頼できませんが、おそらくそう遠くないうちに完全にサポートされるでしょう。

CSSの変数（カスタムプロパティ）

CSS
1
2
3
4
5
6
7
8
9
10
11
12
html{
  --bgColor:#70f1d9;
  
  --font-size-base:
    clamp(1.833rem,2vw+1rem,3rem);
  --font-size-lrg:
    clamp(1.375rem,2vw+1rem,2.25rem);
}
 
html.dark{
  --bgColor:#2d283e;
}

CSSの変数（カスタムプロパティ）はいくつかの理由で大きな意味を持っています。カスタムプロパティは、プロジェクトにおけるデザイントークンのホームとなり、プロジェクトの維持と一貫性の維持を容易にします。カラーのテーマ化は、ダークモードのようなよく使用されるケースです。

カスタムプロパティを使用して、サイト全体をデザインすることも可能です。その流れで最近ではTailwindを無視することはできないでしょう。サイト全体をHTMLのクラスでスタイルするというアプローチは、多くの人の心を打ちました（多くの人が間違ったコードを書くので、それがあなたに合わなくても気にする必要はありません）。

プリファレンスクエリ

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
@media
  (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.001s!important;
  }
}
 
@media
  (prefers-color-scheme:dark){
  :root{
    --bg:#222;
  }
}

プリファレンスクエリとは一般的に@mediaクエリのことで、異なるブラウザのサイズに対応するために使用してきましたが、OSレベルで特定のユーザーのプリファレンスを検出する方法が含まれるようになりました。たとえば、prefers-reduced-motionとprefers-color-schemeです。これらにより、ユーザーの理想的なエクスペリエンスをより忠実に反映したインターフェイスを構築することができるようになりました。

色の設定方法

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.block{
  background:
    hsl(033%53%/0.5);
 
  background:
    rgb(25500);
 
  background:
    /* can display colors
       no other format can */
    color(display-p30.91760.20030.1386)
 
  background:
    lab(52.2345%40.164559.9971/.5);}
 
  background:
    hwb(1940%0%/.5);
}

色のCSS構文は、関数名を変更せずにアルファ値（透明度）を設定できる関数に移行しています。たとえば、CSS3の時代に純粋な青が必要な場合は、rgb(0, 0, 255)と記述していました。しかし現在では、コンマなしでrgb(0 0 255)とし、別の関数を使わずにアルファ値を設定（rgb(0 0 255 / 0.5)）できます。hsl()も同じ状況です。ちょっとしたことですが、将来の色関数がどのように機能するかチェックしておきましょう。

次の機能が予定されています。

  • Display P3 colorは、color()関数で提供されます。
  • lab()関数も新しい色空間で、「人間が見ることのできる色の全範囲を表現する」ものです。
  • lch()関数も新しい色空間です。
  • hwb()関数もまた、人間のための新しい色空間です。

可変フォント

CSS
1
2
3
4
5
body{
font-family:'Recursive',sans-serif;
font-weight:950;
font-variation-settings:'MONO'1,'CASL'1;
}

CSS3ではWebフォントが大流行しました。そして、現在には可変フォントがあります。それらの存在を知っていた方がいいかもしれません。Webフォントも可変フォントもデザインの可能性を広げ、時にはパフォーマンスにも貢献します（同じフォントの太字版と斜体版で異なるフォントファイルを読み込む必要がなくなるなど）。カラーフォントもありますが、サポートはされていてもWeb上ではあまり人気がないようです。

日本語フォントだと、M Plusも可変対応になりました。

パス

CSS
1
2
3
.cut-out{
  clip-path:polygon(25%0%,75%0%,100%50%,75%100%,25%100%,0%50%);
}

CSS
1
2
3
.mask{
  mask:url(mask.png)rightbottom/100pxrepeat-y;
}

CSS
1
2
3
4
5
6
7
8
9
10
.move-me{
  offset-path:path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation:move3slinearinfinite;
}
 
@keyframesmove{
  100%{
    offset-distance:100%;
  }
}

また、CSS3からSVGも爆発的に増えました。clip-pathであらゆる要素をさまざまな形に切り取ることができ、CSSにSVGらしさをもたらしています。それだけでなく、パスに沿って要素をアニメーションさせたり、パスに沿って要素をフロートさせたり、SVG要素のパスを更新することもできます。

  • clip-path: 文字通り、要素を形に切り取ることができます。
  • masks: クリッピングに似ていますが、マスクはマスクのアルファチャンネルに基づくなど、他の性質を持つことができます。
  • offset-path: 要素を配置できるパスを提供します。一般的には、パスに沿って要素をアニメーション化する目的で使用します。
  • shape-outside: フローティング要素に、他の要素が回り込むようなパスを提供します。
  • d: SVGの<path>のd属性はCSSで更新できます。

CSSのフィルター

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.disable{
  filter:
    blur(1px)
    grayscale(1);
}
 
.site-header{
  backdrop-filter:
    blur(10px);
}
 
.styled-quote{
  mix-blend-mode:
    exclusion;
}

最近はCSSで直接できる画像操作（他のDOM要素は言うまでもなく）が多くなっています。CSSのフィルターは文字通りフィルターですが、そのフィルターには仲間がいて、用途はそれぞれ異なります。

  • filter: 明るさ、コントラスト、グレースケール、彩度など、Photoshopのような便利なエフェクトがたくさんあります。ぼかしは本当にユニークです。
  • background-blend-mode: 繰り返しになりますが、レイヤーをブレンドする方法はPhotoshopを連想させます。レイヤーを乗算して暗くし、合成します。オーバーレイで背景と色を混ぜ合わせます。明るくしたり暗くしたりするのは、Webデザインで実際に役立つ古典的なエフェクトですが、より高度な照明効果がいつクールな外観を生み出すかわかりません。
  • backdrop-filter:filterと同じ機能ですが、背景のみに適用され、要素全体には適用されません。背景だけをぼかすときに特に便利です。
  • mix-blend-mode:background-blend-modeと同じ機能ですが、背景だけに限らず、要素全体に適用されます。

Houdini

JavaScript
1
import"https://unpkg.com/extra.css/confetti.js";

CSS
1
2
3
4
5
body{
  background:paint(extra-confetti);
  height:100vh;
  margin:0;
}

HoudiniはCSSをJavaScriptで拡張する、あるいは少なくともCSSとJavaScriptの共通部分に基づいているテクノロジーのコレクションです。

  • Paint API:<canvas>APIから構築され、カスタムプロパティで制御可能な画像を返します。
  • Properties & Values API / Typed OM: 文字列である値（10pxなど）にタイプを与えます。
  • Layout API: 独自の表示プロパティを作成します。
  • Animation API

各APIのブラウザのサポートはばらばらですが、組み合わせると、本当に素晴らしいデモを作成できます。Houdiniの魅力の一つは、インポートと使用が非常に簡単なワークレットとして出荷されていることです。そのため、強力な機能をモジュール化すると同時に、非常に簡単に使用できるようにする可能性もあります。

Shadow DOM

CSS
1
2
3
4
5
6
7
8
9
10
11
my-component{
  --bg:lightgreen;
}
 
:host(.dark){
  background:black;
}
 
my-component:part(foo){
  border-bottom:2pxsolidblack;
}

<svg>と<use>要素で遊んだことがある人は、Shadow DOMが少し出てきます。クローン要素には、「通過」を選択する方法に制限があるShadow DOMがあります。そして、<web-components>に入ると、同じようなワックスのボールになります。

Webコンポーネントにスタイルを設定する場合、「外部」からは基本的に4つのオプションがあることを知っていますか。また、ネイティブのCSSモジュールと構成可能なスタイルシートについても知っておくとよいでしょう。

CSSワーキンググループ

CSSのワーキンググループでは、ある仕様がある時点でどのような状況にあるかを示すために、年ごとにまとめられています。

かなり濃い内容です。CSS3以降の変更点を確認できるドキュメントで、優れたリファレンスです。しかし、カジュアルなフロントエンドのデベロッパーに、何を学ぶべきかを教えるために、このドキュメントを送りつけないでください。

これから登場する新機能

心配しないでください。
CSS3の時代から今知っておくと便利なことをまとめました。CSSの将来がどうなるか、チェックしておきましょう。

Bramus Van DammeのCSS in 2022では、これらをカバーする、かなり良い記事が公開されています。2022年は2015年のCSS3よりも、CSSにとって本当に素晴らしい年になりそうです。

2022年、注目しておきたいCSSの新機能のまとめ

2022年、注目しておきたいCSSの新機能のまとめ

sponsors

Related Posts

関連記事が見つかりませんでした。

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp