プログラミングの勉強日記
2020年7月2日 Progate Lv.148
ポートフォリオ作成中
背景で2色使う方法を調べたが、この方法を用いることでグラデーションもできる。
目標物
下のように背景の色を2色使いたい。
コード
CSSのbackgrouundプロパティにlinear-gradientを指定することでできる。この方法を用いることで、グラデーションも作成できる。
background:linear-gradient(色を変える方向,色 位置,色 位置,...);で指定する。
色を変える方向は以下のキーワードまたは角度を指定する。
| キーワード | 角度 | グラデーションの向き |
|---|---|---|
| to top | 0deg | 下から上 |
| to right | 90deg | 左から右 |
| to bottom | 180deg | 上から下 |
| to left | 270deg | 右から左 |
/* 左から50％まで青、右から50％まで赤 */
background:linear-gradient(to right,blue 0%,blue 50%,red 50%,red 100%);
/* 青から赤のグラデーション */
background:linear-gradient(to right, blue 0%, red 100%);
位置は「最初の色」から「次の色」のグラデーションのパーセンテージを表している。
上の例で1つ目の例では、0%から50％までは青から青のグラデーション（＝ずっと青）を、50%から100%までは赤から赤のグラデーション（＝ずっと赤）を表している。
なので、2つ目の例では、0~100%まで青から赤のグラデーションを表している。
角度を変えると下のように斜めで色を区切ることもできる。
background: linear-gradient(45deg, blue 0%, blue 50%, red 50%, red 100%);
サンプルコード
目標物になるようにするには以下のコードを利用した。
CSSファイル
.skill{
background:linear-gradient(to right,rgb(227, 246, 245) 0%,rgb(227, 246, 245) 60%,rgb(255, 246, 199) 60%,rgb(255, 246, 199) 100%);
}