今回は、サイト制作時に使えるhtml、cssのみを使った背景色デザインを紹介します。
【HTML/CSS】サイト制作時に使える背景色デザインまとめ
今回紹介する、背景色デザインは、jQueryやjavascriptを使わず、CSSの背景をグラデーション指定する「background:linear-gradient();」をメインに使って作成しています。
※記事内のメニューデザインで使用しているhtml、CSSはコピーしてそのまま、または、少しカスタマイズしてお使いいただけます。
今回のスタイルは上記のデザインなります。上から順に説明していきます。
ベタ塗り背景
.item1{background:#70b5ff;}こちらは基本的な1色ベタ塗りの背景指定になります。
上下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色ストライプ背景
.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()」を使用した様々な背景色の指定方法を紹介しました。うまく色調整、幅調整、角度の設定をすることで、様々な柄の背景を作れますので、覚えておくと良いと思います。
前へ
