CSSグラデーションコードの生成方法

CSSグラデーションコードを作る前に

CSSの背景に使うグラデーションコードを、線形または放射状の形式で作成したいときに利用できます。グラデーションの種類、方向、色をテキストで指定でき、指定を省略した場合も初期値からコードを作成できます。デザイン案をCSSへ移す前に、入力内容に応じたコードの形を確認する用途に向いています。

入力してCSSを生成する手順

1. グラデーションの種類を入力します。種類を指定しない場合は linear が使われます。
2. 線形グラデーションにする場合は、方向の入力欄に値を入れます。方向を省略すると to right が使われます。
3. 色の入力欄に、使いたい色をカンマまたは空白で区切って入力します。省略時は #ff7e5f と #feb47b が使われます。
4. 生成を実行し、表示されたCSSコードを確認します。種類が linear と完全一致する場合は、入力した方向が線形グラデーションのコードに含まれます。linear 以外の種類を入力した場合は、円形の放射状グラデーションとしてコードが作成されます。

生成されたコードの見方

結果は、入力したグラデーションの種類に応じたCSSコードとして確認します。線形の場合は方向の文字列がコードに反映され、色の入力はカンマまたは空白で分割された後、各項目の前後の空白が取り除かれ、カンマと空白で連結されます。線形以外の種類では、方向を線形グラデーション用の指定として扱わず、円形の放射状形式になります。

したがって、種類の値が linear と一致しているかを最初に確認すると、意図した形式か判断しやすくなります。出力は入力文字列をもとにしたコードであり、色名や方向の書式が適切かどうかを検証する機能までは確認されていません。

使用例

Webページの背景に斜め方向の2色グラデーションを使うため、線形形式と2つの色を指定してCSSコードを作成します。

種類に linear、方向に 135deg、色に #123456, #abcdef を入力して生成します。

生成結果には、線形グラデーションを表すCSSコードが含まれ、方向として 135deg、色として #123456 と #abcdef が反映されます。

制限事項

• 種類が linear 以外の場合は円形の放射状形式になり、色名や方向の書式を検証する機能は確認されていません。

よくある間違い

• 色を区切らずに続けて入力すると、意図した複数の色として分割されないことがあります。各色の間にカンマまたは空白を入れてから、もう一度生成してください。

よくある質問

入力を空欄にした場合、何が使われますか？

種類を省略すると linear、方向を省略すると to right、色を省略すると #ff7e5f と #feb47b が使われます。

線形グラデーションの方向は指定できますか？

種類が linear と完全一致する場合に限り、入力した方向が線形グラデーションのコードに含まれます。それ以外の種類では円形の放射状形式になります。

複数の色はどのように入力しますか？

色の文字列はカンマで分割され、各項目の前後の空白が取り除かれます。空白でも分割され、生成時には項目がカンマと空白で連結されます。