狼読

 
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/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

2020/05/14

[Linuxコマンド]2つ以上のファイルを横に並べて表示させる方法

2020/05/22

[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた

投稿カレンダー

2021年5月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Technology

category

©狼読