CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

2020年版Webデザイン必見！最新のCSSプロパティとAPI徹底解説

JavaScriptとCSSを組み合わせてWebサイトを柔軟にカスタマイズできるよう、開発者向けに新しいCSSプロパティが多数登場し、主要ブラウザでもサポートされるようになりました。本記事では、2020年のWebデザインで注目すべき最新CSSプロパティとAPIをご紹介します。

押さえておきたい最新CSSプロパティ

:focus-within

要素内のフォーカスに関するアクセシビリティ問題を解決するためのセレクタです。子要素がフォーカスを受け取った際に、親要素へスタイルを適用できます。

scroll-snap

ネイティブなスクロールと減速（慣性スクロール）を実現します。カルーセルやスライドショーのようなUIをJavaScriptなしで構築できます。

@media(prefers-*)

ユーザーのデバイス設定に応じてページのUIやUXを切り替えられるメディアクエリです。より高度なパーソナライズが可能になります。

「*」の部分には、light-level（明るさ）、forced-colors（強制カラー）、color-scheme（カラースキーム）、contrast（コントラスト）、reduced-motion（動きの抑制）、reduced-transparency（透明度の抑制）などが指定できます。

position: sticky

要素をビューポート内に固定表示するためのプロパティです。ヘッダーやサイドバーの追従表示を手軽に実装できます。

論理プロパティ（Logical Properties）

標準的なレイアウトのための論理プロパティにより、要素の内外に対して書字方向に応じた動的な余白や間隔を設定できるようになりました。多言語対応のレイアウト構築に非常に便利です。

gap プロパティ

従来はGridでのみ利用できた gap プロパティが、Flexboxでも使えるようになりました。各子要素に個別のマージンを設定する代わりに、コンテナ側で間隔を一括管理できるため、コードが大幅にすっきりします。

backdrop-filter

要素の背後にあるコンテンツに対して、ぼかしや色調変化などのスタイルを簡単に適用できます。すりガラス風のモダンなエフェクトが実現できます。

CSS Houdini API

開発者がブラウザに対して「カスタムCSSをどのように読み取り、解釈するか」を指示できる低レベルAPI群です。CSS Object Model（CSSOM）が、より扱いやすい形で開発者に開放されました。以下のAPIが含まれます。

  • Layout API
  • Paint API
  • Parser API
  • Properties & Values API
  • Animation Worklet
  • Typed OM
  • Font Metrics API

aspect-ratio

画像や動画などのメディアのアスペクト比（縦横比）を維持するためのプロパティです。レスポンシブデザインでのレイアウト崩れを防ぎます。

size

高さと幅を1つのプロパティで同時に指定できます。

min() / max() / clamp()

任意のCSSプロパティ値に制約（上限・下限）を設定できる関数です。特に clamp() を使えば、最小値・推奨値・最大値を1行で定義でき、流動的なタイポグラフィに最適です。

display: outer inner

displayプロパティの2値構文により、外部表示（ブロック／インライン）と内部表示（flex／gridなど）を個別に指定でき、要素をより柔軟に配置できます。

list-style-type

リストに独自のカスタムスタイルを追加できます。記号や絵文字を使ったリストマーカーも簡単に定義可能です。

CSS Modules

JavaScriptからローカルまたはリモートファイル上の特定のCSSモジュールを要求して利用できるようになりました。コンポーネント指向のスタイル管理が容易になります。

CSS Regions

指定した領域にコンテンツを流し込む（満たす）ことができる仕様です。

CSS Subgrid

CSS Gridの中にさらにグリッドをネストした「microレイアウト」を作成できる機能です。親グリッドのトラックを継承できるため、複雑なレイアウトも整合性を保ちながら構築できます。

実装例1：:is() セレクタの活用

以下の例では、複数の疑似クラス構文を使ってスタイルを適用しています。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    margin: 2%;
    text-align: center;
}
:is(header, main, footer) span:after {
    content: " Awesome!";
    box-shadow: inset 0 0 8px lightgreen;
    font-size: 1.2em;
    font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
    content: " Awesome!";
    box-shadow: inset 0 0 8px lightgreen;
    font-size: 1.2em;
    font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
    content: " Awesome!";
    box-shadow: inset 0 0 8px lightgreen;
    font-size: 1.2em;
    font-family: Calibri;
}
:matches(header, div, section) span:after {
    content: " Awesome!";
    box-shadow: inset 0 0 8px lightgreen;
    font-size: 1.2em;
    font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

出力結果

このコードを実行すると、以下のように表示されます。

2020年版Webデザイン必見！最新のCSSプロパティとAPI徹底解説

実装例2：backdrop-filterによるエフェクト

次の例では、backdrop-filter を使って要素の背後を反転させるエフェクトを紹介します。

<html>
<head>
<style>
#parent {
    margin: 8%;
    background-image: url("https://images.unsplash.com/photo-1611081352477-9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
    padding: 2%;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
    margin-top: 20vh;
    backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>

出力結果

このコードを実行すると、背景画像の上に反転効果のかかったテキストが表示されます。

2020年版Webデザイン必見！最新のCSSプロパティとAPI徹底解説

まとめ

2020年前后から普及が進んだこれらのCSSプロパティやAPIを活用すれば、JavaScriptに頼らずとも表現力豊かでアクセシブルなWebサイトを効率的に構築できます。ぜひ実際のプロジェクトで試してみてください。

  1. フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

    CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。 caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。 pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。 tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。 以下に、これらのプロパティを使用した具体的なコード例

  2. Android 9/10対応UI/UX設計ガイド：Material Designの基本と実践テクニック

    Googleは2019年9月に最新OS「Android 10」をリリースしました。現時点では一部の最新ハイエンド端末にのみ搭載されていますが、今後、各メーカーが比較的新しいモデルへ順次展開していくことが予想されています。Android 10では、システム全体に適用されるダークモードをはじめ、数々の便利な新機能が追加されました。一方で、UI自体の大きな刷新はほとんど行われませんでした。GoogleはMaterial Design（マテリアルデザイン）が極めて高い完成度を持つため、これを引き続き採用しています。そのため、本ガイドで紹介する内容は、OreoやPieなど以前のAndroidバージョンに