Effects

これらのエフェクトのほとんどは、ホバー状態またはステートメニュー内の他のステートに追加できます。

ブレンディング（Blending）

Webflowのブレンディングモードは、要素がその下にある他の要素とどのようにブレンドするか（または重なるか）をさまざまな方法で提供します。これにより、カスタムコードを必要とせずに要素の内容が他の要素の内容とどのようにブレンドするかを設定できます。Webflowはmix-blendモードCSSプロパティを処理し、要素のコンテンツが親要素と背景のコンテンツとどのようにブレンドするかを設定できます。ブレンディングモードを使用すると、要素の不透明度調整を超えたさまざまなクリエイティブな可能性を開くことができます。

16種類のブレンディングモードがあります。似たような動作をするモードは、ブレンディングモードのドロップダウンメニュー内で隣り合って配置されています。これらのモードグループは以下の通りです：

• デフォルトモード（通常） - Default mode
• ダークンモード  (暗くする、乗算、カラーバーン) - Darken modes
• ライトンモード (明るくする、スクリーン、カラードッジ) - Lighten modes
• コントラストのモード (オーバーレイ、ソフトライト、ハードライト) - Contrast modes
• 比較のモード (差分、除外) - Comparative modes
• 複合のモード(色相、彩度、カラー、輝度) - Composite modes

不透明度（Opacity）

要素とその子要素の透明度レベルをカスタマイズするには、効果の設定で不透明度を変更します。入力フィールドに値を入力するか、不透明度スライダーをドラッグして目的の値に変更できます。

不透明度の値はパーセントで設定します。100%は不透明で、0は完全に透明です。

アウトライン（Outline）

アウトラインは、訪問者がキーボードでインタラクティブな要素をタブ操作する際に、デザイン内をナビゲートするのに役立ちます。要素の周囲に表示されるアウトラインは、訪問者に特定の要素に対する対話が行われていることを明示し、その要素にフォーカスしていることを示します。キーボードで再度 Tab キーを押すと、アウトラインは次にフォーカスされた要素の周囲に表示されます。

このため、要素の Focused (keyboard) 状態またはFocused状態にアウトラインを追加することが重要です。

アウトラインの設定には以下のコントロールがあります:

• スタイル（Style）: スタイルは、要素を囲むアウトラインの種類を決定します。アウトラインは、実線、破線、または点線にすることができます。
• 幅（Width）: 幅はアウトラインの厚さを決定します。この値は、ユニットのドロップダウンリストで利用可能な任意のCSSユニットを使用できます。
• オフセット（Offset）: オフセットは、アウトラインと要素の端または境界との間のスペースの量を決定します。この値は、ユニットのドロップダウンリストで利用可能な任意のCSSユニットを使用できます。
• 色（Color）:色はアウトラインの色を指定します。

重要: アウトラインスタイルに「none」を選択して削除し、デフォルトのブラウザ設定に戻すことが誘惑されるかもしれませんが、これによって他の設定（幅、オフセット、または色など）が削除されるわけではなく、アウトラインが完全に消えてしまい、これはアクセス可能ではありません。

ボックスシャドウ（Box shadows）

ボックスシャドウは、要素の矩形の境界の外側または内側にスタイリングを追加します。ボックスシャドウは、プロジェクト内のボタン、セクション、Div ブロック、または他の要素に焦点や深みを追加するために使用できます。

スタイルパネルのボックスシャドウの設定で、要素の外側にボックスシャドウを追加するか、複数のボックスシャドウをレイヤーとして作成できます。

ボックスシャドウを選択して、シャドウの種類、角度、距離、ぼかし、サイズ、色をカスタマイズします。

スタッキング（Stacking）

スタイルパネルでほとんどのエフェクトに複数のレイヤーを追加することができます。例えば、要素に複数のボックスシャドウを追加してレイヤーとして配置できます。

エフェクト設定では、各レイヤーの表示を切り替えるには目のアイコンを選択し、各レイヤーを削除するにはゴミ箱のアイコンを選択します。各エフェクトの順序を変更するには、単に並べ替えたいレイヤーを選択し、望む順序番号にドラッグします。

ボックスシャドウの設定には、以下の機能があります：

• Type: 要素の境界の内側または外側に影を適用します。
• Angle: ボックスシャドウの方向を変更します。ダイアルをクリックしてドラッグしたり、ダイアルの任意の位置をクリックしてその位置を設定したり、角度を回転させるための矢印をクリックしたり、または入力フィールドに角度値を入力して調整します。
• Distance: 設定された角度で影を近づけたり遠ざけたりします。
• Blur: シャドウのぼかしの焦点具合に影響を与えます。
• Size: シャドウの範囲を要素の境界に対する広がりとして指定します。
• Color: シャドウの色と不透明度を変更します。

重要： アニメーションされたぼかしは非常に遅く、推奨されません。

トランスフォーム（2D & 3D transforms）

2Dおよび3Dトランスフォームを追加することで、要素の外観と位置を変更し、ホバーなどの異なる状態で操作することができます。Style panel > Effects > 2D & 3D transformsから変換を追加できます。

4つの種類のトランスフォームがあります：

1. Move
2. Scale
3. Rotate
4. Skew

2D & 3D transformsの横にある省略記号をクリックして、Transform settingsにアクセスし、変換の起点、裏面の可視性、セルフパースペクティブ、および子要素のパースペクティブを調整できます。

エフェクトを重ねて追加する場合、以前の設定が失われることなく、複数の種類の変換を追加できます。プラスアイコンを使用して追加の変換を追加します。

トランジション（Transitions)

トランジションは、要素の異なる状態間で滑らかなアニメーションを作成します。一意のトランジションを作成するために、期間とイージングタイプの効果をカスタマイズできます。トランジションの一般的な使用例は、要素のホバー状態において、急激な変更を避けるためです。

デフォルトでは、トランジションは「none」に設定されており、これはすべての状態に自動的に適用されることを意味します。したがって、各プロパティやスタイルにトランジションを追加する必要があります。

トランジション効果を追加し、以下のプロパティを指定します：

• Type: トランジションが影響するプロパティの種類です。
• Duration:トランジションの期間をミリ秒（ms）単位で指定します。デフォルトでは200msに設定されていますが、スライダーを使用するか、入力フィールドに期間の値を入力して変更できます。
• Easing: 値を入力するか、イージングエディターを開いてプリセットを参照したり、独自のイージング効果を作成することができます。

フィルター（Filters）

フィルターは、要素に独自の視覚効果を適用します。フィルターはホバー状態での変更を作成するためにも使用できます。画像、背景ビデオ、または他の要素にフィルターを追加できます。フィルターは要素全体、その子要素を含む外観を変更します。

フィルターを追加するには、追加メニューを使用してドロップダウンからいずれかのフィルター効果を選択します。

• Blur（ぼかし）: 要素のコンテンツをぼかします。ぼかし半径の値を大きくすると、ぼかしの度合いが増加します。値が0の場合、効果はありません。
• Brightness（明るさ）: 0から200%の明るさを指定します。値が100%の場合、要素は元の明るさに戻ります。
• Contrast（コントラスト）: 0から200%のコントラストを指定します。値が100%の場合、要素は元のコントラストに戻ります。
• Hue rotate（色相回転）: 画像や要素の色相を変更します。値の単位は度です。値が0または360の場合、元の色相に戻ります。色相を変更する方法は次のいずれかです：方向ダイヤル上の点をクリックしてドラッグする、ダイヤル上の任意の位置を角度の方向として設定する、角度を45度の増減単位で回転するために矢印をクリックする、または入力フィールドに希望する角度を入力する。
• Saturation（彩度）: 色の強度を定義します。値は0%から200%の間です。値が100%の場合、元の彩度に戻ります。
• Grayscale（グレースケール）: すべての色をグレースケールに変換します。0%の場合、元の画像が表示され、100%の場合は画像が完全にグレースケールになります。
• Invert（反転）: 要素内のすべての色を反転させます。値が0%の場合、元の画像が表示され、100%の場合は色が完全に反転します。
• Sepia（セピア）: 画像にヴィンテージのオフイエローの外観を与えます。0%は元の画像を表し、100%は完全にセピアにします。

重要: アニメーション化されたぼかしは非常に遅く、推奨されません。

追加または調整したフィルターはキャンバス上でプレビューされます。また、1つの要素に複数のフィルターを追加し、フィルター設定でその表示と順序を切り替えることもできます。

バックドロップフィルター（Backdrop filters）

任意の要素にバックドロップフィルターを追加すると、要素の境界内の透明な領域にフィルターエフェクト（ぼかし、カラーシフト、コントラストなど）を適用できます。要素を通して透明な領域を通して見える要素の背後のすべてがバックドロップフィルターの影響を受けます。

また、1つの要素に複数のバックドロップフィルターを適用することもできます。バックドロップフィルターをレイヤー化して組み合わせることで、さまざまな視覚効果を作成できます。

注意: バックドロップフィルターは要素の背後のすべてに適用されるため、効果を見るには要素、要素の一部、または背景を少なくとも部分的に透明にする必要があります。

バックドロップフィルターには8つのフィルターがあります。類似した動作をするフィルターは、バックドロップフィルターのドロップダウンメニューで隣り合わせに配置されています。これらのフィルターグループには以下が含まれます。

• 一般（ブラー）- General
• カラー調整（明るさ、コントラスト、色相回転、彩度） - Color adjustments
• カラーエフェクト（グレースケール、反転、セピア）- Color effects

各バックドロップフィルターの例と使用方法の詳細については、バックドロップフィルターのレッスンをご覧ください。

カーソル（Cursor）

正しいカーソルを使用することは、ユーザーがページをナビゲートする際に何が起こるかを示すために重要です。結果と一致しないカーソルを使用すると、混乱につながる可能性があります。

デフォルトのカーソル値はautoです。これは、ブラウザのデフォルト設定によって指定された、特定の要素タイプに対するデフォルトカーソルを表示します。例えば、リンクにカーソルを合わせるとポインタカーソルが表示され、テキストにカーソルを合わせるとテキストカーソルが表示されます。

ほとんどの場合、デフォルトの設定で、ブラウザに適切なカーソルを選ばせるのが最善です。カーソルの値を変更することで、特定の要素に対してブラウザのデフォルトカーソルを上書きすることができます。

プレビューモードでスタイルを適用した要素の上にカーソルを合わせると、カーソルがどのように変わるかをテストして確認できます。