レッスン内容
背景色（Background color）
画像やビデオを除く任意の要素に背景色を設定できます（ただし、画像やビデオを背景として使用することもできます）。背景色は、カラー値（例：hex、rgba、またはカラー名）を入力するか、カラーピッカーを使用して色を選択することで、任意の要素に適用できます。背景色はテキスト要素や特定のテキストコンテンツにも追加できます。
サイト全体で背景色を一貫して設定したい場合、Body (All pages) タグが役立ちます。
Body (All pages) タグのスタイルを2つの方法で設定できます：
- Body要素を選択し、StyleパネルのSelector fieldのドロップダウンからBody (All pages) タグを選択します。
- 任意の要素を選択し、継承メニューからBody (All pages) タグを選択します。これにより、すべての要素がBody (All pages) タグからのスタイルを継承します。
Body (All pages) に背景を設定したら、追加する要素はこの背景スタイルがデフォルトになります。また、背景色だけでなく、他のスタイルプロパティも変更できます。
ほとんどの要素はデフォルトで透明な背景を持っています。スライダーコンポーネントなどの一部の要素は、メインのスライダー要素に背景色を設定することでデフォルトの背景色を上書きできます。
背景画像（Background image）
Webflowでは、背景画像をカスタマイズするための多くのオプションが用意されています。
背景画像を追加または変更するには：
- Style panelでBackgroundsにスクロールします。
- Choose imageをクリックして、アセットパネルから画像を選択します。
- @2xのチェックボックスをオンにします（これにより、画像の幅が元のサイズの半分に設定され、HiDPIデバイスで鮮明に表示されます）。
代わりに背景ビデオを使用する場合は、要素をAddパネルでBackground Videoコンポーネントと置き換えます。
背景画像サイズ（Background image size）
背景画像のサイズを指定するには、カスタムの寸法またはプリセットのいずれかを使用します：
- カスタム（Custom）：背景画像の幅および/または高さを決定します。パーセンテージ値も使用できます。要素よりも大きくスケーリングするには、100%以上の任意のパーセンテージを使用します。
- カバー（Cover）：画像を拡大して要素全体の背景を埋めるようにスケーリングし、設定された幅と高さを上書きします。画像は、要素のアスペクト比、画面サイズ、画像によってトリミングされることがあります。
- コンテイン（Contain）：背景画像を要素内に収めるようにスケーリングします。この値も、設定された幅と高さを上書きします。
背景画像の位置
デフォルトでは、背景画像は要素の左上隅に配置されます。背景の位置を変更して、画像が画面サイズにわたってどのように表示されるかを調整できます。
画像を垂直方向および水平方向に合わせることができます。
背景画像の位置を手動で調整するには、水平位置（左）と垂直位置（上）の位置値を入力します。また、値の単位をpx、％（デフォルト）、VW、VHの間で変更できます。
タイル（Tile）
デフォルトでは、背景画像は縦にも横にも繰り返されます。
背景を水平に繰り返すか、垂直に繰り返すか、まったく繰り返さないかを選択できます。
固定またはスクロール
background設定でスクロール時の背景画像の動作を選択できます：
- Not fixed: 画像はページと一緒にスクロールします。
- Fixed: 画像はスクロール時に位置を維持します。
すべての背景画像は、デフォルトでは固定されていません。背景画像をFixedに設定すると、画像の幅は要素の境界ではなく、ビューポートによって制御されるようになります。
グラデーション (Gradients)
グラデーションは、既存の背景色や画像の上に適用することができます。
2つの種類のグラデーションがあります：
- 線形グラデーション（Linear gradients）
- Radial gradients（1. 放射状グラデーション）
両方のグラデーションタイプには、グラデーション上において色が徐々に変化するポイントやストップが存在します。
注意: Safariはグラデーションの透明度を "透明な黒 "として解釈します。そのため、Safariユーザーには透明色は黒に見えます。
線形グラデーション（Linear gradient）
線形グラデーションは、角度によって指示される方向に色のグラデーションを作成します。グラデーションの角度を調整するには、以下の方法があります：
- 方向ダイヤルのドットをクリックしてドラッグし、ダイヤルのどこでもクリックして角度位置を設定します。
- 矢印をクリックして、45度ごとに角度を回転させます。
- 入力フィールドに希望の角度を入力します。
グラデーションストップ（Gradient stops）
グラデーションストップを使用すると、グラデーションバーからグラデーションストップを選択して、グラデーションの色と不透明度を編集できます。グラデーションの下に背景画像レイヤーがある場合、不透明度を下げると背景画像が表示されるようになります。
グラデーションに追加の色を追加するには、グラデーションバーにストップを追加します。グラデーションバーのどこでもクリックして、複数のストップを追加できます。
グラデーションバー上でクリックしてドラッグすることで、ストップの位置を調整できます。
ストップを削除するには：
- ストップを長押しします。
- ストップをグラデーションバーの外にドラッグし、ストップの端が透明になるまで引きます。
- 離すと、ストップが削除されます。
繰り返し（Repeat）
繰り返しを切り替えると、既存のグラデーションの位置と角度が繰り返されるようになります。
これは最初と最後のストップの位置で設定されます。もっと明確な繰り返し効果を作成するには、最初または最後のストップをグラデーションバーの端から遠ざけてドラッグします。
リバース（Reverse）
リバースアイコンは、ストップの位置を逆にする。
ラジアルグラデーション（Radial gradient）
ラジアルグラデーションは円の形をしたグラデーションを作成します。
左側のカラーストップは、放射状グラデーションの中心に表示される色になります。
ポジション（Position）
グラデーションの焦点を選択するには、位置コントロールの中の点をクリックします。たとえば、画像コンテンツを整列させるために中央の点をクリックできます。
また、水平位置（左）と垂直位置（上）の値を入力して、手動で位置を調整することもできます。px、%（デフォルト）、vw、vhの間で値の単位を変更することもできます。
Size
グラデーションが要素の境界とどのように連動するかは、サイズのプリセットで制御されます。プリセットは以下の通りです。
- Closest side: グラデーションは中心点から最も近い辺に向かって開始されます。
- Closest corner: グラデーションは中心点から最も近い角に向かって開始されます。
- Farthest side: グラデーションは中心点から開始し、最も遠い辺に達するまで続きます。
- Farthest corner: デフォルトのプリセットです。グラデーションは中心点から開始し、最も遠い角に達するまで続きます。
カラーオーバーレイ（Color overlay）
背景のいずれかにカラーオーバーレイを追加することができます。カラーピッカーを使用して色を選び、その後透明度の値を設定します。
画像とグラデーションの重ね合わせ
複数の背景画像、グラデーション、およびカラーオーバーレイを追加して重ねて配置することで、レイヤー効果を作成できます。背景レイヤーの順序を変更するには、レイヤーの上にカーソルを移動し、左側の点線の垂直ラインをクリックします。
レイヤーの可視性を切り替えるには、目のアイコンをクリックします。任意のレイヤーを削除するには、ゴミ箱のアイコン「delete」をクリックします。
背景ビデオ（Background video）
Background videoは、特定のコンテンツセクションの背景として使用される、サイレントでループするビデオです。これらはサイトの訪問者を引き込み、注意を引くのに役立つだけでなく、サイトに映画のような雰囲気を加えるのにも役立ちます。
ただし、自動再生とループする背景ビデオは、認知障害、前庭障害、または運動酔いのある人々に対して注意を引きすぎる場合があり、場合によっては支障をきたす可能性があります。サイトで背景ビデオを使用する場合、自動的に再生される背景ビデオを一時停止できるように、サイトの訪問者にコントロールを提供することが重要です。
情報: Webflowでは、背景ビデオの再生/一時停止ボタンをデフォルトで組み込んでおり、アクセシビリティを向上させ、背景ビデオコンテンツを一時停止または再生するための必要なコントロールを訪問者に提供できるようにしています。さらに、背景ビデオは、オペレーティングシステムの設定で「運動を減少させることを希望」する設定を有効にしている訪問者には再生されません。
クイック検索（CMD/CTRL+E）を使用するか、Add panel > Componentsセクションから背景ビデオを追加します。Background videoをキャンバスにドロップすると、すぐにビデオをアップロードするよう求められます。
ビデオ設定（Video settings）
「Background video」コンポーネントには、デフォルトで3つの設定が有効になっています：「Loop video」「Autoplay video」「Include play/pause button」これらの設定はそれぞれのチェックボックスを切り替えて無効にすることができます。
ループビデオ（Loop video）
ループビデオ設定を有効にすると、バックグラウンドビデオが連続的にループ（リピート）します。
重要: WCAG Success Criterion 2.2.2: 停止、停止、非表示については、自動的に動き始め、5秒以上動き続ける場合、ユーザーが動きを一時停止、停止、または非表示にするためのコントロールを提供する必要があります。もし「Loop video」設定を有効にしている場合、「Include play/pause button」設定も有効にして、サイト訪問者にアクセス可能な体験を提供するようにしてください。
※WCAG（Web Content Accessibility Guidelines）成功基準2.2.2は、ウェブコンテンツのアクセシビリティに関する指針であり、特定の条件を満たすことでウェブコンテンツをよりアクセス可能にするための基準の1つ
自動再生ビデオ（Autoplay video）
有効にすると、Autoplay videoの設定により、background videoがページの読み込み時にすぐに再生されます。
重要：WCAG成功基準2.2.2：一時停止、停止、非表示 は、動く、点滅する、またはスクロールする情報が自動的に動き始め、5秒以上動き続ける場合、ユーザーがその動きを一時停止、停止、または非表示にするためのコントロールを提供する必要があることを述べています。 自動再生ビデオの設定を有効にした場合、アクセス可能な体験をサイトの訪問者に提供するために、再生/一時停止ボタンを含む設定も有効にしてください。
知ってると得:一時停止方法が明確でない自動再生ビデオは、サイトの訪問者がタスクを達成せずに離れる主な理由の1つです。訪問者にビデオの明確なコントロールを提供することで、サイトの離脱率を低下させることができます。
また、再生/一時停止ボタンをお好みのスタイルにカスタマイズすることもできます。詳しくは、背景ビデオの再生/一時停止を切り替えるレッスンをご覧ください。
サポートされているビデオフォーマット
Background video コンポーネントは、以下のフォーマットの動画ファイル（30MB未満）を受け入れます：webm、mp4、mov、ogg。
注意: バックグラウンドビデオのファイル名にはスペースや特殊文字（ダッシュを除く）は含まれていないべきであり、ビデオは最適化されてウェブでの最良のパフォーマンスを提供できるようにされるべきです。
動画変換（Video transcoding）
動画ファイルがアップロードされると、最大限のブラウザサポートのために他のビデオファイルタイプ（mp4およびwebm）に変換されます。この変換が行われている間も、デザイナーで作業を続けることができます。
Background videoのプレビュー
アップロードした動画をプレビューする方法は3つあります。
- Background video設定の動画サムネイルにカーソルを合わせる
- 動画ファイル名の横にある新しいタブで開くアイコンをクリックして、新しいタブで動画をプレビューする
- 上部バーのプレビューアイコンをクリックして、背景動画がデザイン上でどのように表示されるかを確認する
背景動画の置き換え
Background videoを置き換えるには、動画をダブルクリックするか、Settingsパネルに移動してBackground videoの設定を開きます。
Background videoの設定にアクセスするには、要素を選択してEnterキーを押すこともできます。設定ウィンドウが開いたら、Replace Videoをクリックして新しい動画をアップロードしてトランスコードします。
セクションとしての背景動画の使用
Background videoをセクションとして使用することができます。Background video要素内にコンテンツを配置するだけです。セクション内のコンテンツの配置とスタイリングは他の要素と同じです — すべてのスタイルプロパティはStyle panelで利用できます。
注意: データセーバーや低電力モードが有効な場合、タッチデバイスでの背景動画の自動再生が行われないことがあります。
背景ビデオオーバーレイ（Background video overlay）
Background videoには、グラデーションやソリッドカラーオーバーレイを追加してコントラストを付けることができます。Color pickerを使用して色を選び、不透明度を調整して表示を調整できます。オーバーレイはBackground videoの上に配置されますが、セクションのコンテンツの下に配置されます。