どうも！LSSです！！
CSSでグラデーションやマーカーを設定する時に、linear-gradientやradial-gradientを使います。
このブログでも何度かネタにしてきましたが、グラデーションする色を指定するところで色が「○%」って指定する部分が、とにかく分かり辛く、説明しづらい！
ので、今回はそこに特化した解説記事を書いてみる事にします。
サンプル１
0% 100%
こんなものを書いてみました。
コード
0%<span style="display: inline-block; width: 300px; height: 30px; border: 1px solid black; background-image: linear-gradient(90deg,red 60%,white 60%);"> </span>100%
右向きのグラデーション。
「60%の位置を赤、60%の位置を白」という指定です。
って書くと「どっちやねん！」って言いたくなりますねｗ
サンプル２
0% 100%
ちょっとだけ変えてみました。
コード
0%<span style="display: inline-block; width: 300px; height: 30px; border: 1px solid black; background-image: linear-gradient(90deg,red 60%,white 70%);"> </span>100%
右向きのグラデーション。
「60%の位置を赤、70%の位置を白」という指定です。
そうすると、その間の部分…60%～70%の間は、赤から白に変化するグラデーションとなります。
サンプル３
0% 100%
サンプル１を元に書き換えてみました。
コード
0%<span style="display: inline-block; width: 300px; height: 30px; border: 1px solid black; background-image: linear-gradient(90deg,red 0%,red 60%,white 60%,white 100%);"> </span>100%
見た目はサンプル１と全く同じです。
右向きのグラデーション。
「0%の位置を赤、60%の位置を赤、60%の位置を白、100%の位置を白」という指定です。
サンプル２の考え方を適用すると
「0%～60%を赤から赤のグラデーション、60%～100%を白から白のグラデーション」
という解釈ができます。
つまり、
「0%を省略すると、最初に指定した色が暗黙の了解として0%の位置にも指定され、100%を省略すると、最後に指定した色が暗黙の了解として100%の位置にも指定される」
と考えると、理不尽に見える指定もちょっと納得できるような気がしますね^^
スクリプトで手軽に実験できるツール
を作ってみました！
ついでに、radial-gradientの場合も併せて試せます。
適当に＋や－をクリックして、各色の%を変更できます。
青の%が黄色の%以上になった時、グラデーションじゃなくなる事が確認できます^^
グラデの色の位置指定のみについての記事でしたが
分かり辛く、説明しづらい内容をなんとか噛み砕けないか？と試みてみましたｗ
CSSのグラデーションに挑戦した事がないとちんぷんかんぷんかもで、挑戦した事がある人にも伝わるだろうか？どうだろう？というような感じかなぁ^^;;;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
