【html/css】サイト制作時に使える背景色デザインまとめ

【html/css】サイト制作時に使える背景色デザインまとめ

今回は、サイト制作時に使えるhtml、cssのみを使った背景色デザインを紹介します。

Advertisement

【html/css】サイト制作時に使える背景色デザインまとめ

今回紹介する、背景色デザインは、jQueryやjavascriptを使わず、CSSの背景をグラデーション指定する「background:linear-gradient();」をメインに使って作成しています。
※記事内のメニューデザインで使用しているhtml、CSSはコピーしてそのまま、または、少しカスタマイズしてお使いいただけます。
 

今回のスタイルは上記のデザインなります。上から順に説明していきます。

ベタ塗り背景

ベタ塗り背景

.item1{background:#70b5ff;}

こちらは基本的な1色ベタ塗りの背景指定になります。

上下2色背景

上下2色背景

.item2{background:linear-gradient(#fc0 50%, #ff9 0%);}

こちらは、複数の色指定、グラデーション指定する時に使われる「linear-gradient」を使用して、上下2色表示をしています。上記コードの「50%」「0%」が色の起点になり、この値を変更することで、各色の起点を変更することができます。

縦縞背景

縦縞背景

.item3{background-size: auto auto;background-color: rgba(255, 217, 232, 1);background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 182, 182, 1) 10px, rgba(255, 182, 182, 1) 20px );}

こちらは、前項の応用版で色を無限に繰り返し表示する「repeating-linear-gradient(色の角度, 色① 色始点①, 色① 色終点①, 色② 色始点②、色② 色終点②)」を使用しています。縦縞にするため、色の角度は90degに指定しています。
※角度指定する際は単位を「°」ではなく、「deg」指定にします。

横縞背景

横縞背景

.item4{background-size: auto auto;background-color: rgba(245, 217, 255, 1);background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255, 183, 183, 1) 10px, rgba(255, 183, 183, 1) 20px );}

こちらは、前項の縦縞から色の角度を変更しただけの横縞背景になります。横縞にするには、角度の記述部分を「0deg」に変更します。

ストライプ背景

ストライプ背景

.item5{background-size: auto auto;background-color: rgba(217, 221, 255, 1);background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(183, 206, 255, 1) 10px, rgba(183, 206, 255, 1) 20px );}

こちらも上記縦縞、横縞から角度を変更するだけで作ることができます。上図ストライプの場合は、角度を「135deg」反対のストライプの場合は、「45deg」に変更してください。

3色ストライプ背景

3色ストライプ背景

.item6{background-size: auto auto;background-color: rgba(0, 173, 73, 1);background-image: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(86, 228, 0, 1) 5px, rgba(86, 228, 0, 1) 10px ),repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(215, 255, 81, 1) 10px, rgba(215, 255, 81, 1) 20px);}

こちらは、縦縞、横縞、ストライプ背景にも使用していた「repeating-linear-gradient(色の角度, 色① 色始点①, 色① 色終点①, 色② 色始点②、色② 色終点②)」の色指定を3つまで指定することで作成可能になります。すべての色の角度をそろえることで上記のような3色の平行線を実現できます。

なまこ壁風背景

なまこ壁風背景

.item7{background-size: auto auto;background-color: rgba(190, 190, 190, 1);background-image: repeating-linear-gradient(135deg, transparent, transparent 55px, rgba(255, 255, 255, 1) 55px, rgba(255, 255, 255, 1) 70px ),repeating-linear-gradient(45deg, transparent, transparent 55px, rgba(255, 255, 255, 1) 55px, rgba(255, 255, 255, 1) 70px );}

こちらは、色と角度だけでなく、色の各始点終点幅を増減させることで作成できます。背景を単色、色③まで指定し、各色と幅を同じにして、②と③は90°で交差するようにdegの値を調節することでこのような柄が作れます。

その他背景

その他背景

.item8{background-size: auto auto;background-color: rgba(123, 165, 255, 1);background-image: repeating-linear-gradient(27deg, transparent, transparent 10px, rgba(255, 255, 255, 1) 10px, rgba(255, 255, 255, 1) 13px ),repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 1) 10px, rgba(255, 255, 255, 1) 13px );}

まとめ

今回は、「repeating-linear-gradient()」を使用した様々な背景色の指定方法を紹介しました。うまく色調整、幅調整、角度の設定をすることで、様々な柄の背景を作れますので、覚えておくと良いと思います。

コーディングカテゴリの最新記事