スポンサーリンク

CSSを使って背景や枠線をグラデーションにする方法

2019年5月18日HTML・CSS

今回は背景や枠線をグラデーションにする方法をご紹介します。

スポンサーリンク

背景色をグラデーションにする

背景色をグラデーションにするために「backgroundプロパティ」を使いますが、普通であれば値にはカラー名や#000000などを設定しますが、今回は『linear-gradient()』を使います。

linear-gradient()関数

関数  linear-gradient(方向・角度, 開始色 , 途中色 , 終了色)
方向／角度

deg(単位)やtoに続けてtop、bottom、left、rightと角度方向を指定します。

0deg ＝ to top、90deg ＝ to right、180deg ＝ to bottom、270deg ＝ to left

開始色 途中色 終了色

開始色、途中色、終了色は普通にカラー名などで指定します。

背景色をグラデーション

実際に背景をグラデーションしてみましょう。

指定なし
<div style="margin:20px; padding:0 10px; background:linear-gradient(#a61919,white); font-weight:bold;">指定なし</div>

HTMLタグ内にCSSを指定しているのでちょっとわかりづらいかもしれません。グラデーションの指定はbackground:linear-gradient(#a61919 , #ffffff);と背景のグラデーションの方向を指定せず開始色と終了色のみ指定したっ場合上のようになります。

ではこれを元にグラデーションの方向を指定してみます。

方向の指定は開始色の前に入れます。方向、色はＫａ , (カンマ)で区切ります。
background:linear-gradient(方向 , #a61919 , #ffffff);

to top または 0deg
to right または 90deg
to bottom または 180deg
to left または 360deg
background:linear-gradient(to top right, #a61919,white)

to topに半角スペースを入れてrightを入れて二方向に指定するとこんな感じになります。

開始色、途中色、終了色を指定

3色指定
<div style="margin:20px; padding:0 10px; background:linear-gradient(to right,red,yellow,blue); font-weight:bold;">3色指定</div>

グラデーションの指定をbackground:linear-gradient(to right , red , yellow ,blue);と3色指定しています。

4色指定

色の指定を増やせば3色以上の指定もできます。

枠線をグラデーション

枠線をグラデーション
CSS
.sample {
      border-style:solid;  /*線の種類*/
      border-width:8px 0;  /*線の太さ*/
      border-Image:linear-gradient(to right,red,yellow,green);  /*グラデーション*/
      border-image-slice:1;
}

枠線をグラデーションにするためにborder-imageプロパティを使います。
グラデーションの指定は上で説明したlinear-gradient( )関数を使います。

border-image-slice

5行目の『border-image-slice』はボーダー画像の使用範囲を指定するものです。
これを入れないとborder-imageで指定した枠線(グラデーション)が表示されません。
なのでborder-image-slice:1;と指定してください。

線の種類と太さ

線の種類と太さの設定は下に枠線を入れたい場合border-bottom:太さ 線の種類;などで枠線をつけたい部分を指定してもOKです。

お使いのテーマによってデフォルトで枠線が指定されている場合があります。border-bottomなどで枠線をつけたい部分だけ指定すると指定していない部分も枠線が表示されてしまうので、私は線の種類と太さの設定を分けて指定しています。

border-style(線の種類)とborder-width(枠線の太さ)の値の指定方法

値1つ・・・上下左右
値2つ・・・上下  左右
値3つ・・・上  左右  下
値4つ・・・上  右  下  左

最後に

背景や枠線をグラデーションにするとサイトや記事がちょっとオシャレになります。

グラデーションを指定するlinear-gradient( )関数を使いました。
『関数』と聞くと難しそうですが、方向や色を指定するだけなので初心者の人でもできると思います。

枠線をグラデーションにする方法ではセレクタに『.sample』とクラス名をつけていますが、h2やh3などの見出しタグなどにすれば見出しの枠線をグラデーションにすることができます。

ぜひやってみてください。

いきなりはじめるPHP ワクワク・ドキドキの入門教室 [ 谷藤賢一 ]
¥1,980 （2024/12/07 08:40時点 | 楽天市場調べ）
Amazon
楽天市場
Yahooショッピング
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶 フォロー
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM