Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssで背景色を二色表示させる方法「コードつき」

投稿日:2019年10月4日 更新日:

Pocket

うも、チャーさんです。

 

あなたはcssで背景色を二色表示するには、

どうしたらいいんだろう?

と思っていませんか。

 

この記事では、cssで背景色を二色

表示させる方法とコード例を書いてます。

 

 

なので、この記事を読めば、

あなたは背景色を二色表示させれる

ようになります。

 

ということで、あなたが背景色を二色

出したい場合は、このまま下にスクロールして

読んでみてください。

 

スポンサードサーチ

cssで背景色を二色だすならこう

 

で、早速結論です。

cssで背景色を二色にする方法は、

 

まず全体に背景色をつけその後、

擬似要素を使って背景色の二色目を表示し、

position;absoluteで重ねるです。

 

すると以下の画像のように、

背景色を二色にすることができます。

 

css背景色二色

 

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を100%にしておくと、

body内のコンテンツ(テキストや画像)などで、

高さが伸びていっても、同時に背景色も伸びて

 

レスポンシブしてくれます。(楽できます)

 

で、あとはお好みなのですが、

二色目の背景色の位置を指定しましょう。

 

 

擬似要素で出した場合、通常左に背景色が

来てると思います。

 

なのでそれをpositionの

rightかleftを使って好きないちに

移動させましょう。

 

 

迷ったらright:0とか指定すれば綺麗です。

 

body::before {
content:””;
width:20%;
height:100%;
right:0;
background:#9bbf9b;
position:absolute;

}

 

で、あとはcssが最初から入ってる関係で、

上下に隙間ができるんで、

そこはtop:0とbottom:0をつけましょう。

 

すると隙間が消えます。

 

スポンサードサーチ

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で背景色を二色にする方法でした。

読んでもらってありがとうございました。

 

それでは。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。