Web・UI・CSS
グラデーションの色が思った位置に来ない。角度と停止位置を読む
使うツール
バナーに二色のグラデーションを置いたら、左から右のつもりが斜めになった。色が変わる場所を動かしたいのに、色コードを変えても落ち着かない。こうしたときは、色そのもの、進む方向、色を置く位置を別々に考えると調整しやすくなります。SheepDevの画面では二色と角度を試して基本のCSSを作れます。停止位置の細かな変更は、その出力を読む発展例として扱い、画面にない編集機能があるものとは説明しません。
90度と180度で、方向の基準を確かめる
background: linear-gradient(90deg, #4F46E5 0%, #22D3EE 100%);最初の色を#4F46E5、二つ目を#22D3EE、角度を90にします。最初の色が左、二つ目が右になる出力です。角度180なら上から下になります。CSSの角度は0度が上へ向かい、時計回りに増えるので、数学の座標図で横向きを0度と考えていると向きを取り違えます。まず90と180の二つで基準を覚えると、斜めの調整が分かりやすくなります。
方向が合わないとき、二色を入れ替えるのか角度を変えるのかを一度に行わないようにします。どちらも見た目を変えますが、色の順序と座標の意味は別です。入力を一つ変えたらプレビューとCSSのどの部分が変わったかを見ます。出力の90degが動いたのか、二つの色の順番が入れ替わったのかが分かれば、元の状態へ戻す操作も説明できます。
0%と100%は、不透明度ではなく位置
生成されたCSSの色コードの後ろにある0%と100%は、グラデーション線上でその色を置く位置です。0%だから透明、100%だから不透明という意味ではありません。透明度は色のalphaとして指定する別の値です。停止位置を読めるようになると、『青い部分をもっと長く残したい』という調整を、色の濃さを変える話と分けられます。
background: linear-gradient(90deg, #4F46E5 30%, #22D3EE 70%);この発展例は、コピーしたCSSを利用先で編集する例です。最初の色を30%、二つ目を70%にすると、左側は最初の色を保ち、30〜70%の間で移り変わり、その先は二つ目の色を保ちます。現在の二色入力画面には停止位置の専用編集欄がないため、この例をそのまま色の入力欄へ貼る操作ではありません。色欄には色だけを入れます。
同じ位置に二色を置くと、境界がはっきりする
background: linear-gradient(90deg, #4F46E5 50%, #22D3EE 50%);二つの色をどちらも50%へ置けば、なめらかな移り変わりの幅がなくなり、そこで色が切り替わります。グラデーションという名前でも、必ずぼかした帯になるとは限りません。これも利用先でCSSを調整する例です。境界線や二色分割を作りたいのに中間色が広がるとき、色ではなく停止位置が意図に合っているかを確認します。
プレビューと実際のバナーの縦横比を比べる
同じ角度と停止位置でも、正方形の見本と横長のバナーでは、見える色の分布が違って感じられます。パーセントは画面全体の横幅へ単純に印を付ける値ではなく、グラデーションの方向と要素の形に関係する線上の位置です。見本だけで調整を終えず、実際の横幅と高さ、角丸、余白を持つ要素へCSSを適用して確認します。
背景の上に文字を置く場合は、明るい側だけ、暗い側だけを見て決めません。文字がかかる場所のうち最も読みにくい色との組合せを確認します。コントラスト比ツールは二つの色の組合せを調べるもので、グラデーション全域や文字の位置を自動走査する機能ではありません。背景が変わる位置ごとの確認は利用先で行います。
色、方向、位置の順で一つずつ決める
最初は0%と100%の二色のまま、方向だけを決めます。次に色を調整し、必要なら利用先のCSSで停止位置を変えます。三つを同時に変えるより、どの指定が見た目を動かしたか分かりやすくなります。最後に小さい画面と大きい画面、文字を載せた状態を確認し、コードと完成画面が対応しているかを見ます。
このツールはURLから背景画像を取得したり、既存サイトのCSSを読み込んだりしません。入力した色から短い宣言を作る範囲の道具です。複数背景やアニメーション、色空間を指定した補間など、ここで編集できない機能は利用先のCSS仕様として別に扱い、出力した宣言だけで背景設計が完成したとは考えないようにします。