【CSS】linear-gradient 背景にグラデーションをかけたり、好きな色の下線を引く方法
こんにちは、ピコピコくんです。
今回はCSSのlinear-gradientを使って背景色にグラデーションをかける方法について書きました。
背景色にグラデーション
背景色にグラデーションをかけたい場合、CSSのlinear-gradientで実現できます。
下記サンプルコードでは、はてなブログの記事 .entry-content の strong タグ（強調表示） のbackgroud （背景）にグラデーションをかける linear-gradient を適用しています。
/* -----はてなブログ記事内のstrongタグが対象----- */
.entry-content strong {
background: linear-gradient(to bottom, transparent, #ffa500);
}
はてなブログの記事内（.entory-content）に限らず全ての strong タグを対象にしたい場合は、.entory-content は不要なので取っ払っちゃいましょう。
/* -----全てのstrongタグが対象----- */
strong {
background: linear-gradient(to bottom, transparent, #ffa500);
}
使い方
backgroud に linear-gradient を適用します。
linear-gradient を使うには「グラデーションの方向」（to + 方向）、「1つ目の色（開始色）」、「2つ目の色（終了色）」の3つのパラメーターを設定します。
グラデーションの方向には left、right、top、bottom があります。
background: linear-gradient( to + "方向", 1つ目の色, 2つ目の色)
例えば、下記のように設定したい場合は
グラデーション方向：上から下に（to bottom）
1つ目の色：透明（transparent）
2つ目の色：オレンジ（#ffa500）
strong {
background: linear-gradient(to bottom, transparent, #ffa500);
}
となります。
サンプル
サンプル 1
グラデーション方向：上から下に（to bottom）
1つ目の色：透明、高さ70%（transparent 70%）
2つ目の色：オレンジ（#ffa500）
と設定したい場合は、下記のように書きます。
strong {
background: linear-gradient(to bottom, transparent 70%, #ffa500);
}
上から下に向かって1色目（透明）が70%の高さまで表示して、残りの30%（71%～100%）にオレンジ色のグラデーションがかかっています。こうすると要素に好きな色で下線を引いたような表現にすることができます。transparent の割合を増やせば更に細い線を引くこともできます。
【表示サンプル】
この文字列の背景に色がつきます。
サンプル 2
グラデーション方向：上から下に（to bottom）
開始色：透明、高さ50%（transparent 50%）
終了色：オレンジ（#ffa500）
と設定したい場合は、下記のように書きます。
strong {
background: linear-gradient(to bottom, transparent 50%, #ffa500);
}
上から下に向かって1色目（透明）を50%まで、残りの51%～100%にオレンジ色のグラデーションがかかっています。ラインマーカーで線を引いたような印象になりますね。
【表示サンプル】
この文字列の背景に色がつきます。
サンプル 3
グラデーション方向：下から上に（to top）
開始色：透明、高さ50％（transparent 50%）
終了色：オレンジ（#ffa500）
と設定したい場合は、下記のように書きます。
strong {
background: linear-gradient(to top, transparent 50%, #ffa500);
}
下から上に向かって1色目（透明）を50%まで、残りの51%～100%にオレンジ色のグラデーションがかかっています。文字の上部分にラインマーカーで線を引いたような表現になります。
【表示サンプル】
この文字列の背景に色がつきます。
サンプル 4
グラデーション方向：下から上に（to top）
開始色：透明、高さ50%（transparent 50%）
終了色：オレンジ、グラデーション無し（#ffa500 0%）
と設定したい場合は、下記のように書きます。
strong {
background: linear-gradient(to top, transparent 50%, #ffa500 0%);
}
下から上に向かって1色目（透明）を50%まで、残りの51%～100%がオレンジ色で塗りつぶされています。3つ目のパラメーターの最後に 0% を付け加えることでグラデーションを無効にしています。
【表示サンプル】
この文字列の背景に色がつきます。
サンプル 5
グラデーション方向：下から上に（to top）
開始色：透明、表示無し = 高さ0%（transparent 0%）
終了色：オレンジ、グラデーション無し（#ffa500 0%）
と設定したい場合は、下記のように書きます。
strong {
background: linear-gradient(to top, transparent 0%, #ffa500 0%);
}
1色目（透明）の表示割合を 0% にして、全てオレンジ色で塗りつぶしています。3つ目のパラメーターの最後に 0% を付けているのでグラデーションが無効になっています。
【表示サンプル】
この文字列の背景に色がつきます。
最後に
今回は指定要素の背景にグラデーションをかけたり、好きな色で下線を引く方法を紹介しました。記事では透明色とオレンジ色の組み合わせのみを掲載しましたが、もちろん他の色の組み合わせでも可能なので試してみてください。
もし素敵なグラデーションのパターンを見つけたら教えてくださいね。
読者さん募集中
記事が気に入ったら読者登録をお願いします！
