狼読

 
2020/03/12

cssでグラデーションを作ってみよう

いろんなホームページを見ているとグラデーションがかかっているようなサイトがありますよね。画像を加工してる場合もありますが、cssでもグラデーションをかけることができます。cssでグラデーションをかけたい方は、今回ご紹介する方法を使っていろんな場面でグラデーションをかけて見てください。では、その方法をご紹介したいと思います。

htmlの構造

htmlの構造は、サンプルなので非常にシンプルにいかせていただきます。
divタグ1こにいたしましょう。

<div class="bg_gradient"></div>

上記のコードにcssを当てて行こうと思います。

cssのご紹介

cssでグラデーションをかけるには、linear-gradientを使用します。
使用方法は次の通りです。

<style>
.bg_gradient{
 width:100%;
 height:200px;
 background:linear-gradient(to left,blue 0%,red 90%);
}
</style>

上記のサンプルコードを実装したのが次の通りとなります。

このto leftを変化させることでいろんな方向から、グラデーションをかけることができます。

to bottomにすることで、下からグラデーションをかけることができます。

また、45degなど角度を指定することで斜めも可能です。

グラデーションの色は2色以外に3色、4色など設定することも可能です。

上記のように4色にすることができます。cssのコード自体は非常に簡単です。

background:linear-gradient(to left,blue 0%,green 50%,red 70%,yellow 100%);

このように%ごとに色を指定するだけで色を増やすことができます。

まとめ

今回はグラデーションをcssを記述する方法をご紹介させていただきました。
今まで、グラデは画像でかけていた方や、cssでグラデーションのかけ方がわからないという方のお力になれれば幸いです。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

投稿カレンダー

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Technology

category

©狼読