cssで背景色をおしゃれにスタイリングするサンプルコード

2022.11.01

#css #webtips #カスタマイズ #サンプルコード #デザイン #子テーマ

背景色の指定

背景をcssで指定するときは「background-color」というプロパティを指定します。

background-color:値;
// あるいは
background:値;

htmlのタグに直接スタイリングするような

<body bgcolor="#ffffff"></body>

こういう書き方はhtml5以降非推奨となっていますので、cssに書きます。

色の指定はカラーコード（16進数で「#ffffff」と「#」+6桁）を使います。カラーネームでも大丈夫ですが、カラーネームは147色。カラーコードは２５６×２５６×２５６＝１６７７７２１６色。

その他に「rgb(a)」の指定もあります。
「rbg」はred, green, blueそれぞれの色を0〜255の値を指定していて、「a」は色の透過度を0.1から1まで指定できます。

background-color: rgba(255,255,255,0.9);

このように記述すると、白を0.9透過させます。

背景の指定方法

背景の指定はタグに直接ではなく、通常classをつくってそこに当てます。

<div class="content">
  <div class="content_inner"></div>
</div>

.content {
  background-color: #efefef;
}

背景がグレーになりました。

この👆の浮き輪やらカメラやらかごバッグやらのイラストも背景で指定しています。beforeとafterを使います。のちほど。

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

グラデーションにしたい場合は、backgroundプロパティに「liner-gradient」を指定します。linergradient()関数は、2色以上の色を指定、直線の角度や方向で構成される画像を生成します。

background: liner-gradient(角度と方向、はじめの色、終わりの色)

background: linear-gradient(120deg, rgba(130, 198, 191, 0.9) 0%, rgba(85, 157, 216, 0.9) 100%);

こんなふうになります。

いまどきな感じになりました。

グラデーションのcssを生成してくれるGrabient

グラデーションを生成してくれるサービス、Grabient

色を選択して調整、つくったコードをコピーできるサービスです。便利だね。

背景をボーダーにする

背景をボーダーにもできます。

background: repeating-linear-gradient(方向, 色, 始点の位置, 色, 終点の位置)

background: repeating-linear-gradient(-45deg, #ffeeeb, #ffeeeb 7px, #fdf6f5 7px, #fdf6f5 14px);

repeating-linear-gradient()関数は、繰り返し、線のグラデーションを指定するプロパティです。

方向は、degという単位をつかって数値で指定します。0が下から上へ垂直、正の値を指定すると時計回りに方向が決まります。

ボーダー以外にもチェックやドットもつくれます。チェックやドットは「radial-gradient」というのを使うと◎。

背景が変わるだけでもだいぶ印象が変わりますね。

要素の背景に画像を配置する

👆の、イラストを配置するのもbackgroundで、「擬似要素」というのをつかってやってます。

beforeとafterっていうのをつかいました。擬似要素は、その名の通り擬似的にclassが生成されるのでhtmlを操作せず要素を追加できるというものです。

htmlはこんなかんじで

<div class="content">
  <div class="content_inner">ここを装飾したい</div>
</div>

cssはこういった具合になります。

.content {
  background-color: #efefef;
}

// 装飾したい要素
.content_inner {
  position: relative;
}

// 左側背景
.content_inner::before {
    content: "";
    background: url(hoge-left.jpg) no-repeat;
    width: 100px; // 画像の幅
    height: 150px; // 画像の高さ
    top: -20px; // 上からの位置
    left: 10px; // 左からの位置
    position: absolute;
}

// 右側背景
.content_inner::after {
    content: "";
    background: url(hoge-right.jpg) no-repeat;
    width: 200px;
    height: 300px;
    top: 138px;
    right: 10px;
    position: absolute;
}

beforeやafterを使うときはかならずcontentの指定が必要です。
テキストや記号、fontawesomeなどのアイコンを指定する場合はcontentの中に記述して指定します。
画像を指定したい場合もcontentが必要です。contentは””（空）にします。
positionで擬似要素をつけた要素に「relative」、擬似要素に「absolute」を指定します。

画像を作って背景に当てる以外にもcssでいろいろな表現ができるようになったので、みなさまもぜひ。