CSSの役目は、もはやサイトを美しく見せることだけにとどまりません。かつては考えられなかった動きやインタラクションを用いて、サイトに命を吹き込むツールへと進化を遂げています。
今回はCSSの中でも特に強力な機能、トランジション、アニメーション、変形などを取り上げます。これらの高度なテクニックを理解して、使いこなすことは、CSSの基本を超え、時代に流されない洗練されたサイトを構築するウェブデザイナーや開発者にとって不可欠です。
プロジェクトをレベルアップするためのスキルを磨きましょう。またこの記事から、次のプロジェクトのインスピレーションも見つかるかもしれません。
高度なCSSトランジション
高度なCSSトランジションは、UI要素をインタラクティブで魅力的なものにし、訪問者の目を引きます。サイトの何気ないボタンひとつでも、CSSトランジションを使えば、カーソルを合わせるとシームレスに色が変化したり、サイズが大きくなったりします。
この機能は、CSSプロパティの異なる状態間（「変更前」と「変更後」）の隙間を「補完」するために使用します。
このような効果を実現するには、以下のような複数のCSSプロパティを使いこなすことになります。
- transitionプロパティ：アニメーションにしたいプロパティの指定（
background-colorやopacityなど）、トランジションの継続時間の設定、transition-timing-functionの決定（ease-inやlinearなど）などを行います。 - タイミング関数：トランジションの速度を制御するために必須の関数。最も汎用性の高いのは
cubic-bezier関数で、独自の加速カーブを作ってトランジションの速度を完全コントロールすることができます。使い慣れるまでには時間がかかるかもしれませんが、cubic-bezierようなツールを使えば、視覚的に作成することができます。
簡単な使用例を見てみましょう。
.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.my-elementは、cubic-bezier関数によって定義された独自の加速カーブで不透明度を変化させます。このカーブは、ゆっくり始まってから加速し、最後には減速するというように、特定の種類の動きを指示します。
transition-timing-functionで独自の値を指定すると、ウェブ要素をより自然に、より大胆に、標準の枠を超えた方法で動かすことができます。ウェブアニメーションに個性と技巧を加えるのにもってこいです。
以下のような高度なテクニックもあります。
- 複数のプロパティを組み合わせる─複数のプロパティを並べて一度にアニメーションを表現することが可能。アニメーションにレイヤーを追加するのに適している。
- 同期したアニメーション─異なるプロパティを並べて、同じペースで動かすことも。
- ネストされたトランジション─コンテナ内の要素にトランジションを適用することで、コンテナを操作した際に子要素を思い通りに動作させることができる。
アニメーションは、見栄えはもちろんですが、特に低スペックの端末でもスムーズに動作するようにしましょう。ブラウザに負担をかけず、パフォーマンスに大きな影響を与えないtransform、opacityのようなプロパティの使用をお勧めします。
また、will-changeプロパティでブラウザに知らせることで、ブラウザが準備を整え、すべてがスムーズに実行されるようになります。
なお、ブラウザの「気難しさ」も念頭におきましょう。ベンダープレフィックス（接頭辞）を使用すれば、トランジションがさまざまなブラウザで動作するようになります。やや手間はかかりますが、autoprefixersのようなツールを使用すれば簡単です。
変形（transform）
CSSの変形は、ウェブデザインに遊び心を持たせる画期的な機能です。要素を移動させるだけでなく、ページ全体の雰囲気を変えることもできます。ここで主役となるのが、transformプロパティです。
多用途なこのプロパティは、ある場所から別の場所に要素を移動します。画像を画面全体にスライドさせたり、サイズを変更したり、またもう少し凝って、要素を回転させることも可能です。
しかしこの機能が本領を発揮するのは、3D空間での要素の変形です。translate3d、scale3d、rotate3dなどを使えば、画面から飛び出るような立体感を要素に与え、より没入感のある体験をユーザーに提供することができます。
例えば、カードをめくる効果。カードの片面に特定の情報が表示され、もう片面では別のコンテンツが表示されるというインタラクティブな仕様で、訪問者の目を引きます。
この効果にbackface-visibilityプロパティを使用すると、カードがめくられるまで裏面を隠した状態にすることができます。
このような変形をトランジションやアニメーションと組み合わせて応用すれば、CSSでさらに多くの効果を作り出すことができます。カーソルを合わせると滑らかに大きくなるボタンや、画面内を動き回る遊び心に溢れたアイコンなど、動的な変化によって、ウェブページの要素に柔軟性を与え、より魅力的なユーザー体験を構築しましょう。
Designmodoが、いくつか好例を紹介しています。まずは3D変形のCSSの解説を確認して、実際に動作するコードをチェックしてみてください。
コンテナクエリ
コンテナクエリは、CSSのもうひとつの側面であり、画面全体ではなく、コンテナのサイズに基づいて要素のスタイル設定を行います。（サイズの大小問わず）ひとつの箱の中にある要素を美しく見せたい場合には、この機能を使用しましょう。
また、サイドバーやカードなど、ウェブページのさまざまな部分をスペースに応じて見た目を変えたい場合にも便利です。各要素をページのその他の部分と切り離して、独自のスタイルを設定できます。
簡単な使い方をご紹介します。
- コンテナを設定する─まずは、
container-typeやcontainer-nameなどのプロパティを使用して、ページのどの部分をコンテナとするかをCSSに伝えます。 - クエリを書く─メディアクエリのようなものですが、この場合はコンテナ用になります。「コンテナの幅が少なくともこれ以上あれば、スタイルを変更する」というようなルールを記述します。
基本のコードは以下のようになります。
@container (min-width: 300px) {
.component {
/* styles */
}
}このコードでは、コンテナの幅が最低 300px に達すると.componentクラスのスタイルが適用されます。
コンテナクエリは、例えば次のような場面で使用できます。
- レスポンシブなサイドバーとフッター：コンテナサイズに応じてサイドバーやフッターの幅とレイアウトを調整
- レスポンシブなカード：グリッドレイアウトやFlexboxレイアウトのカードのスタイルをコンテナの幅に基づいて変更
コンテナクエリは、Chrome、Firefox、Safari、Edgeなどの主要ブラウザでサポートされていますが、プログレッシブエンハンスメントとして使用するのが賢明です。非対応のブラウザでは基本のスタイルから始めて、対応ブラウザでは拡張していきましょう。
Flexboxを使用した垂直方向の配置
Flexbox（フレックスボックス）は、CSSの中でも特に垂直方向の配置に役立つ機能です。リリースされてからしばらく経ちますが、特に横軸（レイアウトによっては縦軸になることも）に沿って要素を整列させる場合に非常に役立ちます。
align-itemsで垂直方向に揃える
Flexboxのalign-itemsプロパティは、コンテナ内で要素を垂直方向に整列させるために使用します。このプロパティは、フレックスコンテナにflex-direction行がある場合に機能し、フレックスコンテナのすべての子要素を横軸に沿って整列させる方法を指定することができます。
例えば、フレックスコンテナ内の複数の要素をすべて垂直方向の中央に配置したい場合には、align-items: center;となります。align-itemsの値の種類は以下のとおりです。
flex-start：要素をコンテナの先頭に揃えるflex-end：要素をコンテナの末尾に揃えるcenter：要素を中央揃えにするbaseline：ベースラインを基準に要素を配置するstretch：要素をコンテナいっぱいに伸ばす（デフォルトの動作）
align-selfで配置を個別に制御
align-itemsでは、コンテナ内のすべての要素を整列させることができますが、場合によっては1つの要素だけ別の位置に整列させたいことも。そんなときに役に立つのがalign-selfです。このプロパティを使用すると、align-itemsの値を個々のフレックス要素に上書きすることができます。
align-items: center;を持つフレックスコンテナがあり、1つだけ先頭に揃えたい要素があるとします。その場合は、その特定の要素にalign-self: flex-start;を適用することで実現可能です。個々の要素の配置を細かく制御するのに便利なプロパティです。
わかりやすいよう、簡単な例を見てみましょう。
例えば、ロゴ、リンク、検索バーのあるナビゲーションバーをデザインしていて、リンクは中央揃え、ロゴは上揃え、検索バーは下揃えにしたいとします。
この場合のコードは、以下のようになります。
.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}.nav-containerはフレックスコンテナで、要素は中央に配置になっていますが、ロゴと検索バーはこのルールから除外されており、それぞれコンテナの開始位置と終了位置に配置されています。
CSS最新の色関数
CSSの最新の色関数は大幅に進化を遂げており、ウェブデザインにおける色の定義と操作の方法がより高度になっています。いくつかの関数をご紹介します。
1. rgb()とrgba()
rgb()は、赤、緑、青の3つのチャンネルを使用して色を定義する昔からある方法です。各チャンネルには0から255までの値を指定でき、rgba()はアルファチャンネルを使用して不透明度を指定します（1が完全に不透明、0が完全に透明）。
以下のようになります。
.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}2. hsl()とhsla()
hsl()は、色相、彩度、明度で色を指定するため、より直感的に選択することができます。rgba()のように、hsla()には不透明度を指定するためのアルファチャンネルが含まれます。
.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}3. oklch()とoklab()
oklch()とoklab()は、最近CSSに導入された関数で、CIELABの色空間に基づき、知覚的に均一になるように設計されています。つまり、色の変化が人間の目で知覚される変化により近くなります。
それぞれ以下のような役割があります。
oklab()：知覚的に均一な空間で色を定義するoklch()：oklch()と似ているが、明度に加えて、極座標系（彩度と色相）を使用する
これらの関数は、特に滑らかなカラーグラデーションを作る際に、正確で直感的な色操作を可能にします。コード例は以下のとおり。
.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}高度な配色の実装
上記の関数、特により高度なoklch()とoklab()を使用すれば、視覚的に一貫性を持たせながら、魅力的で複雑な配色を実装できます。色のレンダリングや知覚をより柔軟に制御し、美的センスとアクセシビリティの両方を重視することができます。
これらの色関数をカスタムプロパティ（CSS変数）や計算などの機能と組み合わせれば、異なるテーマや状態、環境に適応する動的で柔軟なカラーシステムを開発可能です。
これらの機能に対するウェブ標準やブラウザのサポートは継続的に変化しているため、最新の色関数を採用することで、ウェブプロジェクトの視覚デザインとユーザー体験を大幅に向上することができます。
画像の周りにテキストを回り込ませる
CSSのshape-outsideプロパティは、画像にテキストを回り込ませることができ、視覚的に面白いレイアウトやより高度な画像のスタイリングに役立ちます。
このプロパティは、インラインコンテンツが折り返される形状を定義します。長方形以外の形状で画像にテキストを回り込ませ、標準的な長方形のテキストの回り込みよりも有機的で視覚的に目を引くレイアウトを作成するのに便利です。
shape-outsideの仕組み
円、楕円、多角形などのさまざまな形状を定義し、画像のアルファチャンネルで形状を指定することも可能です。
shape-outsideプロパティは通常、フロート要素に適用されます。画像をフロートさせてshape-outsideを適用すると、テキストが定義された形状に従ってその周囲に回り込みます。
円でshape-outsideを使用する簡単な例を見てみましょう。
.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}上の例では、画像要素に.imageクラスを適用されています。この例では画像は左に寄せられ、shape-outside: circle(50%);はテキストが回り込む円形を作成します。shape-outsideを効果的に使用することで、複雑な形状の周りをテキストが流れるようになり、雑誌のようなレイアウトや視覚的に豊かなページを構築することができるため、デザインの可能性が広がります。
ブレンドモード
CSSのブレンドモード（描画モード）は、色や画像を組み合わせてユニークな視覚効果を作り出し、デザインを洗練させることができる画期的な機能です。魅力的なテキストエフェクト、画像のオーバーレイ、複雑な背景パターンなどを作成できます。background-blend-modeプロパティは、要素の背景画像と色をどのように「ブレンド」するかを定義します。例えば、背景画像と背景色がある場合、乗算、スクリーン、オーバーレイなど、さまざまな手法で重ね合わせることができます。コード例を見てみましょう。
.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}mix-blend-modeは、要素のコンテンツ（画像やテキストを含む）をその背景とブレンドすることで機能します。テキストエフェクトや、画像を別の画像に重ねる場合に特に有用です。
<
.element {
mix-blend-mode: screen;
}主なブレンドモード
参考までに、一般的なブレンドモードをいくつかご紹介します。
- 乗算：要素を暗くする
- スクリーン：乗算の逆で要素を明るくする（グローエフェクトの作成に便利）
- オーバーレイ：乗算とスクリーンを組み合わせたもので、明るい部分をより明るく、暗い部分をより暗くする
- 比較 （明）と比較（暗）：重ね合わされた色を比較し、それぞれ明るいピクセル、暗いピクセルを表示
- 覆い焼きカラーと焼き込みカラー：それぞれベースカラーを明るく、暗くする
- 差の絶対値と除外：色の階調を反転させる場合に使用
ユーザーの好みを考慮する
ウェブデザインにおいて、ユーザーの好みを配慮することは、アクセシビリティに優れユーザーフレンドリーなサイトを作成する上で非常に重要です。これに関しては、prefers-color-schemeやprefers-reduced-motionのようなメディアクエリが、重要な役割を果たします。
それぞれ詳しくご紹介します。
prefers-color-scheme
このメディアクエリは、ユーザーが明るい色と暗い色のどちらのテーマを要求したかを検出するために使用します。サイトのデザインにダークモードを実装するのに便利です。
以下のように、prefers-color-schemeを使用して、ライトモードとダークモードで異なるスタイルを指定可能です。
/* デフォルトのライトモードスタイル */
body {
background-color: white;
color: black;
}
/* ダークモードスタイル */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}上の例では、デフォルトのスタイルにはライトモードが適用され、@mediaクエリ内のスタイルはユーザーが暗い配色を好む場合に適用されます。
prefers-reduced-motion
このメディアクエリは、ユーザーがアニメーションなどの動的な要素を最小限に抑えるように要求したかどうかを検出するために使用します。これによって、乗り物酔いや前庭障がいを持つユーザーに配慮することができます。
prefers-reduced-motionを使用すれば、アニメーションやトランジションを減らしたり非表示にしたりできます。
/* 標準のアニメーション */
.animate {
transition: transform 0.3s ease;
}
/* 動きを抑える */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}上の例では、ユーザーがアニメーションなどの動的要素を望まない場合、アニメーションが無効になります。
prefers-color-schemeとprefers-reduced-motionを使用することは、包括的で真にユーザーフレンドリーなサイトづくりの一歩です。様々な要望や条件を持つユーザーが訪れることを考慮し、アクセシビリティを高め、誰にとっても快適なサイト体験を目指しましょう。
擬似クラスis()と:where()を使用する
:is()と:where()擬似クラスは、詳細度（specificity）を制御し、複雑なセレクタの扱いを簡素化するための高度な機能です。それぞれ例を挙げながらご紹介していきます。
is() 擬似クラス
このクラスは、1つのルールで複数の要素をターゲットにすることができ、似たようなセレクタの繰り返しを減らすことができます。:is()の詳細度は、その引数の中でも最も詳細度が高いセレクタによって決まります。
/* 記事内の任意の段落または見出しを選択 */
article :is(h1, h2, h3, p) {
color: blue;
}:where() 擬似クラス
:where()は:is()と似ていますが、決定的な違いとして、常に詳細度がゼロになります。そのため、詳細度を上げることなくスタイルを上書きすることができます。
/* 特に指定なしで任意の段落または見出しを選択 */
:where(article, section) p {
margin-bottom: 1em;
}:is()と:where()を使用すると、特に複雑なデザインを扱う場合に、より柔軟で保守性の高いスタイルシートを作ることができます。例えば、以下のような場面で便利です。
- ネストされたセレクタを単純化─深くネストされたセレクタやグループ化されたセレクタを単純化し、より読みやすく、メンテナンスしやすくします。
- スタイルのオーバーライド─
:where()は、詳細度を気にせずオーバーライドできるベーススタイルを作成するのに適しています。 - スタイルの再利用：どちらの擬似クラスもさまざまな要素を1つのルールでグループ化できるため、よりモジュール化された再利用可能なスタイルを作成可能です。
実際に応用するため、異なるセクションを持つナビゲーションメニューを考えてみます。:is()を使用すれば 、入れ子のレベルに関係なく、メニュー内のすべてのリンクに統一したスタイル設定を加えることができます。
nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}まとめ
ユーザーインターフェースに命を吹き込む洗練されたCSSトランジションから、3D変形のパワーまで、2024年以降に活用したい高度なCSSテクニックをご紹介しました。
今回取り上げた機能は、レスポンシブでユーザーフレンドリー、なおかつ視覚的に魅力的なウェブデザインを作る上でのウェブデザインを作る上で非常に重要です。いずれを使用するにしても、常にアクセシビリティとCSSのパフォーマンスを重視することをお忘れなく。
この記事でご紹介したCSSテクニックを使用していますか？また、おすすめの上級テクニックがあれば、以下のコメント欄でぜひ共有してください。
コメントを残す