CSSグラデーションを実際の画面で確かめる。
方向、色の位置、使う面を指定します。文字が重なる場所のコントラストを確認し、必要なら単色の代替を用意します。
作業手順をタスクに合わせましょう。
使う面、方向、色の位置、代替色を決めてCSSを作ります。重なる文字の下の全範囲と画面による切り抜きを確認します。背景の美しさと文字のコントラストを別に評価します。
- 用意するもの
- 色、方向、見た目の要件。
- 得られるもの
- 値を編集できる有効なCSSグラデーション。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Create a left-to-right background from #fff7ed to #fed7aa, with a solid fallback.
完成例
background-color: #fff7ed; background-image: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%); Check any foreground text against the full gradient, not just one endpoint.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
文字のコントラストはグラデーションの端だけ見れば十分ですか？
いいえ。文字が低コントラストの場所を通る場合があります。実際の位置と状態で試します。
グラデーションの向きが意図と違うのはなぜですか？
角度の規則と要素の形が外観に影響します。対象の面で表示して確認します。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑