新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

CSSのグラデーション表現方法〜linear-gradientやradial-gradient〜

2019.4.21

CSSのグラデーション表現方法〜linear-gradientやradial-gradient〜
Web制作 0 0

こちらの記事は、このような方におすすめです。

・コーディングで可能なことを把握したいデザイナーの方
・CSSでの様々な表現方法を知りたい方

妙高Web屋LINE@ 友だち追加

ホームページのデザインで、近年では「フラットデザイン」と呼ばれる、平面感のあるデザインがよく見られるようになっていると感じます。

ところが、特定の領域に背景色を「ばーん!」と塗っただけでは、何か物足りなかったり、色の濃淡によっては強烈な印象を与えてしまう場合もあるでしょう。

そのような場合に色に「動き」のような要素を与えたり、印象を少し変えてみるために用いるアイデアのひとつとして「グラデーション」などいかがでしょうか?

今回の記事は「CSSでグラデーションを表現する方法」です。

この記事の目次

【結論】CSSのlinear-gradientの記述方法

CSSでグラデーションを表現する場合は[linear-gradient]属性を用います。

こちらがグラデーションの基本形です。

.className {
background: -ms-linear-gradient(top, #ffffff, #000000);
background: -moz-linear-gradient(top, #ffffff, #000000);
background: -webkit-linear-gradient(top, #ffffff, #000000);
background: linear-gradient(to bottom, #ffffff, #000000);
}

上記のコードによって、[.className]のクラス名をつけた要素の背景が「上から下にかけての、白から黒へのグラデーション」となるかと思います。

また、各主要ブラウザに対応させるために「ベンダープレフィックス(-ms-/-moz-/-webkit-)」をつけておくと良いでしょう。

そのほか特徴的な点としてはベンダープレフィックスを付けているものと付けていないものとで「方向(向き)」の表現の仕方が異なるという部分でしょうか。

前者は「グラデーションの開始位置」を指定している一方で、後者は「グラデーションの終了位置(to付き)」となっています。

ページの先頭へ戻る

[発展]グラデーションの変化位置や色のパターン数を自由に調整する

常軌をCSSでのグラデーションの基本形として、ここからはその発展系をご覧いただきます。

「途中からのグラデーション」

「3色以上のグラデーション」

「斜めのグラデーション」

です。

[発展その1]グラデーションの開始位置を途中からにする

最初にご覧いただいたCSSのサンプルコードでは、開始位置である「上端」から、終了位置の「下端」へのグラデーションとなります。

ただし、デザインによっては「途中までは特定の色が塗られた状態で、途中からグラデーションが始まる場合」なども考えられそうです。

下記の例では、新たに間に引数を設定しました。

上から下へのグラデーションというのは変わりませんが、こちらは「上端から70%までは白で、それを過ぎたあたりから黒に変化するグラデーション」となります。

.className {
background: -ms-linear-gradient(top, #ffffff 70%, #000000);
background: -moz-linear-gradient(top, #ffffff 70%, #000000);
background: -webkit-linear-gradient(top, #ffffff 70%, #000000);
background: linear-gradient(to bottom, #ffffff 70%, #000000);
}

もちろん、色も、変化する位置もご自由に調整していただけます。

[発展その2]グラデーションの色のパターン数を3色以上にする

また、グラデーションは2色に限らず、3色以上を設定することも可能です。

下記のサンプルコードは、白から黒にかけてのグラデーションの途中、40%ほどのところで黄みがかった色が含まれるグラデーションとなります。

.className {
background: -ms-linear-gradient(top, #ffffff, #ffcc00 40%, #000000);
background: -moz-linear-gradient(top, #ffffff, #ffcc00 40%, #000000);
background: -webkit-linear-gradient(top, #ffffff, #ffcc00 40%, #000000);
background: linear-gradient(to bottom, #ffffff, #ffcc00 40%, #000000);
}

引数は「向き,開始位置の色,色01&位置01,色02&位置02,……,終了位置の色」という形式であれば、多くの色を含めることが可能です。

※デザイン的には、あんまり色のパターンが多すぎるグラデーションは見ていて騒がしくなる場合がありますので、くれぐれもほどほどに(^^;)

[発展その3]グラデーションに角度をつける

グラデーションには、細かい角度をつけることも可能です。

下記は、本来のグラデーションから100度の角度がついた状態のサンプルコードです。

.className {
background: -ms-linear-gradient(-10deg, #ffffff, #ffcc00 40%, #000000);
background: -moz-linear-gradient(-10deg, #ffffff, #ffcc00 40%, #000000);
background: -webkit-linear-gradient(-10deg, #ffffff, #ffcc00 40%, #000000);
background: linear-gradient(100deg, #ffffff, #ffcc00 40%, #000000);
}

注目ポイントはもちろん、

「ベンダープレフィックスが付いているものと付いていないものとで、指定する角度が異なっている」

というところです。

これらは、ブラウザが違っても同じ表示結果を得るために、あえて角度を変えています。

ベンダープレフィックスがついている行で指定する角度は、「ベンダープレフィックスがついていない角度を【90度】から引いた値」と捉えていただければ良いでしょう。

上記の例でも、ベンダープレフィックスが付いていない場合の角度は「100度」で、付いている場合の角度は90引く100で「マイナス10度」となっています。

ページの先頭へ戻る

[応用]円形グラデーションを用いる

グラデーションといえば、何も直線だけではありません。

「円形のグラデーション」を表現することも可能です。

基本形はこちらです。

.className {
background: -ms-radial-gradient(#ffffff, #000000);
background: -moz-radial-gradient(#ffffff, #000000);
background: -webkit-radial-gradient(#ffffff, #000000);
background: radial-gradient(#ffffff, #000000);
}

あとは、直線のグラデーションでご紹介した発展系を、円形グラデーションの場合にも試してみてください。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ