うぇぶごと

ぽんこつwebデザイナーのスキルのメモ

cssで作る背景パターンをまとめてみた

f:id:s2lybb:20170820172044p:plain

コーディングの際、背景はどのようにしていますか?

ストライプやグラデーション、ドットなど様々な背景があり、多くの方が画像で切り抜いて背景画像として設定していると思います。

しかし、更新速度を考えると、なるべくなら画像に頼らず、cssで設定したほうが良いです。

そこで今回は、cssで作る背景パターンについてまとめます。

 

今回は以下のものを基本の形とし、この枠内に背景パターンを作成していきたいと思います。

See the Pen cssで作る背景の基本 by Kaorin (@PANbooooo) on CodePen.

 

複数色で作る背景

2色で作る背景色

See the Pen cssで作る背景(グラデーションなしの2色背景) by Kaorin (@PANbooooo) on CodePen.

こんな感じの背景もcssに以下の内容を加えるだけでできます。

background: linear-gradient(#0000cd 50%, #ff0000 50%);

構造を説明します。

 

linear-gradientは線型のグラデーションをかける際に用いますが、書き方にはルールがあります。

各々指定する順番はこんな感じです。

f:id:s2lybb:20170917162604p:plain

まずは位置を指定します。

位置指定の方法には以下の2通りがあります。

【1 :方向を指定(to top)】

 

【2 :角度を指定(45deg)】

実際にさきほどの赤と青の背景にこの、方向の指定を加えてみましょう。

まずは方向を指定したものです。

See the Pen cssで作る背景(グラデーションなしの2色背景)(方向指定) by Kaorin (@PANbooooo) on CodePen.

linear-gradientto rightをかけることで背景が右へ向かうようになります。

次に角度を指定したものです。

See the Pen cssで作る背景(グラデーションなしの2色背景)(角度指定) by Kaorin (@PANbooooo) on CodePen.

linear-gradient90degをかけることで背景が時計回りに90度回転します。

 

方向を指定したい場合はtoのあとに方向を示す語、toprightleftbottomを入れます。また、to top rightと入力すると「右上角へ向かう」と指定したことになり、to bottom rightと入力すると「右下角へ向かう」と指定したことになります。このように上下の方向と左右の方向を一緒にかけることで斜めなどの指定も可能になります。

角度を指定したい場合はdegという単位を使って、数値を入力すると指定できます。

 

次に色を指定します。

普通に背景色を指定するように書けば大丈夫です。

 

最後に位置を指定します。

位置の指定の仕方にも2通りの方法があります。

【1 :数値+単位(px)】

 

【2 :数値+単位(%)】

単位にpxを使うか、を使うかではまったく異なります。pxを使用すると位置が固定されます。

px指定はこのようになります。

See the Pen cssで作る背景(グラデーションなしの2色背景)(位置指定) by Kaorin (@PANbooooo) on CodePen.

%指定はこのようになります。

See the Pen cssで作る背景(グラデーションなしの2色背景)(%指定) by Kaorin (@PANbooooo) on CodePen.

 

ちなみに、上記の二つは開始位置と終点位置を同じ数値にしていますが、異なる数字にすることでグラデーションが作成できます。

See the Pen cssで作る背景(グラデーションありの2色背景)(位置指定) by Kaorin (@PANbooooo) on CodePen.

See the Pen cssで作る背景(グラデーションありの2色背景)(%指定) by Kaorin (@PANbooooo) on CodePen.

 

linear-gradientの書き方さえわかってしまえば、あとはこれを応用すれば以下のようなものが可能になります。

4色背景

See the Pen cssで作る背景(グラデーションなしの4色背景) by Kaorin (@PANbooooo) on CodePen.

 

3色背景(グラデーションあり)

See the Pen cssで作る背景(3色グラデーション) by Kaorin (@PANbooooo) on CodePen.

 

4色背景(グラデーションあり)

See the Pen cssで作る背景(4色グラデーション) by Kaorin (@PANbooooo) on CodePen.

 

2色ななめ背景

See the Pen cssで作る背景(2色ななめ背景) by Kaorin (@PANbooooo) on CodePen.

 

今回は複数色の背景の指定方法を紹介しました。是非とも使用してみてください。