どうも、チャーさんです。
あなたはcssで背景色を二色表示するには、
どうしたらいいんだろう？
と思っていませんか。
この記事では、cssで背景色を二色
表示させる方法とコード例を書いてます。
なので、この記事を読めば、
あなたは背景色を二色表示させれる
ようになります。
ということで、あなたが背景色を二色
出したい場合は、このまま下にスクロールして
読んでみてください。
スポンサードサーチ
cssで背景色を二色だすならこう
で、早速結論です。
cssで背景色を二色にする方法は、
まず全体に背景色をつけその後、
擬似要素を使って背景色の二色目を表示し、
position;absoluteで重ねるです。
すると以下の画像のように、
背景色を二色にすることができます。
css背景色二色のサンプルコード
で、上記の画像のように背景色を二色
にしたコードですが、以下です。
css
body {
background:#5063a7;
}
body::before {
content:””;
width:20%;
height:100%;
right:0;
background:#9bbf9b;
position:absolute;
top:0;
bottom:0;
}
みていただいてわかる通り、
擬似要素を使ってます。
これで背景色の二色が可能です。
スポンサードサーチ
cssで背景色二色だす方法の解説
ということで詳しく解説していきます。
まずは背景色を普通に全体に表示させます。
これは上記のコードでいうと、bodyタグに書いてる部分ですね。
body {
background:#5063a7;
}
で次に、擬似要素を使って、
また新たに背景色を表示させます。
すると背景色が表示されるのですが、
この場合、背景色がbodyで表示した背景色の
下側に表示されてるので、
position:absoluteを使って、
上側に表示させる（重ねます）
コードを分解して説明例
body::before {
content:””;
background:#9bbf9b;
position:absolute;
}
しかしこのままでは、
擬似要素の背景色は、現状高さと幅を持ってないので、
何も出ません。
なのでwidthとheightを指定してやります。
body::before {
content:””;
width:20%;
height:100%;
background:#9bbf9b;
position:absolute;
}
すると、背景色が表示されます。
ちなみにこの時widthの幅を広げたければ、
50%など数値を大きくすればokです。
またheightを１００％にしておくと、
body内のコンテンツ(テキストや画像)などで、
高さが伸びていっても、同時に背景色も伸びて
レスポンシブしてくれます。(楽できます)
で、あとはお好みなのですが、
二色目の背景色の位置を指定しましょう。
擬似要素で出した場合、通常左に背景色が
来てると思います。
なのでそれをpositionの
rightかleftを使って好きないちに
移動させましょう。
迷ったらright:0とか指定すれば綺麗です。
body::before {
content:””;
width:20%;
height:100%;
right:0;
background:#9bbf9b;
position:absolute;
}
で、あとはcssが最初から入ってる関係で、
上下に隙間ができるんで、
そこはtop:0とbottom:0をつけましょう。
すると隙間が消えます。
スポンサードサーチ
０からcssで背景色を二色にする手順動画
動画でも実際にコードを書いて解説してるので、
あなたが動画学習タイプの場合、
みてください。
スポンサードサーチ
まとめ
ということでまとめに入ります。
cssで背景色を二色にするには、
背景色を普通に出した後に、
擬似要素で背景色の二色目を出して、
position:absoluteで重ねましょう、です。
これでcssで背景色を二色にできます。
同じ要領でz-index使ってやれば、
三色も四色もできるでしょう。
さて、ということでこれでcssで背景色を
二色にする方法があなたもわかったと
思います。
なので、あなた自身で実践してみましょう。
ということでまずは、
背景色を全体に表示して、
次に擬似要素を使って背景色を出しましょう。
なんかようわからんかったって場合は、
このコードをコピペしてください。
body {
background:#5063a7;
}
body::before {
content:””;
width:20%;
height:100%;
right:0;
background:#9bbf9b;
position:absolute;
top:0;
bottom:0;
}
あとはbackgroundの色と、
widthの幅などを適宜あなたのお好みで
変えてみてください。
すると背景色二色できますよ。
ということで、cssで背景色を二色にする方法でした。
読んでもらってありがとうございました。
それでは。
チャーさん
