css

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

投稿日:2019年2月17日 更新日:

Pocket

 

うも、チャーさん(@chaa___san)です。

 

あなたはcssで背景色をつけたいんだけど、

どうすればいいかわからない。

 

そう思っていませんか?

 

 

この記事ではcssで背景色をつける方法を、

書いています。

 

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

あなたはcssで背景色を自由につけれるようになります。

 

あなたが背景色をつけたいなら、

下にスクロールして読んでみてください。

 

 

スポンサードサーチ

cssで背景色をつけるにはこのコード

 

で、まず早速結論からなのですが、

 

cssで背景色をつけるには、

background-color:色の名前;

を使いましょう。

 

これでcssで背景色をつけることができます。

 

 

というわけで早速具体例を見せます。

背景色を青にしたいとします。(僕は青が好きなのです。)

 

その場合、

background-color:blue;

と書きましょう。

 

すると、以下のようになります。

 

 

背景が真っ青になってますね!

 

こんな風にcssでは背景色を、

簡単につけることができます。

 

なのであなたの好きなように背景色を、

設定しましょう。

 

 

スポンサードサーチ

cssの背景色をつけるための書き方、手順

 

ではcssの背景色ですが、

書き方についてもう少し具体的に説明します。

 

まずは毎度のことですが、

cssの読み込み方法を決めましょう。

 

head内に書いてしまうか、

ファイルを読み込むか。

決めましょう。

 

 

次に、background-colorを

適用する場所を決めましょう。

 

というのもこれによって背景色がつく場所が、

決まるからです。

 

 

例えば、bodyにcssを適用すると、

例のように全体に色がつきます。

 

コードは以下でして、

body {

background-color:blue;

}

このようになります。

 

 

画面全体が真っ青ですね。

 

また他の例ですが、

見出しだけ背景色をつけたいとします。

 

その場合は、

見出しタグにbackground-colorを

適用します。

 

コードはこんな感じです。

h1 {

background-color:blue;

}

 

でこれを書くと、

 

 

こんな風に見出しの背景色だけ青になってます。

 

というわけで、cssで背景色をつけるには、

background-colorをどこに適用するか。

を決めましょう。

 

 

参考までにbodyやh1以外にもpタグや、

divで設定したクラスにも背景色を、

つけることができます。

 

色々試してみましょう。

 

 

次に色の指定の仕方を決めましょう。

 

background-color:色の名前;

では色の名前の指定の仕方がいくつかあります。

 

 

1つは英語で色の名前を直接書くことです。

background-color:blue;

のようにです。

 

もう1つは16進数です。

 

16進数では以下のように色の名前を

指定します。

#66CCFF

 

 

16進数の特徴として様々な種類の色を設定できます。

 

例えば、

body {

background-color:#66CCFF;

}

のように書くと、

 

同じ青系統ですが、

ちょっと明るい青色を表示できます。

 

多彩な色を表現できるので、

こだわった色を使いたい場合は、

16進数で書きましょう。

 

 

また色の名前はcss 16進数とググると、

色の名前一覧が乗ったサイトが出てきますので、

そこを参考にしましょう。

 

スポンサードサーチ

cssで背景色をつける際の注意点

 

background-colorですが、

bodyじゃないとこに適用する場合は、

文字を書かないと色がつかない仕様なのを知っておきましょう。

 

どういうことか?

 

具体例を出そうと思います。

それでは見出し部分にcssで背景色を、

つけたいとしましょう。

 

そして

h1 {

background-color:#66CCFF;

}

と書きました。

 

その結果は以下です。

何も背景色がつきませんね。。

 

しかし、bodyにh1タグを書いて、

文字を書いてやると、

 

 

ちゃんと背景色がつきましたね!

 

background-colorの背景色は、

こういう動作の仕方をするので、

body以外に背景色をつけるときは覚えておきましょう。

 

 

スポンサードサーチ

まとめ

 

cssで背景色をつけるには、

background-color:色の名前;

を使いましょう。

 

また背景色をつける部分をしっかりと、

指定するのを忘れないようにしましょう。

 

 

それでは、ここまで読むと実際に、

あなた自身でcssで背景色をつけることが、

できます。

 

ということで、あなたのエディターにcssを書いて、

実際に背景色をつけてみましょう。

 

 

試しに

<style>

body {

background-color:blue;

}

</style>

 

を<head>タグの間にコピペしてみてください。

 

すると背景色がつきますよ。

 

 

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

 

チャーさん(@chaa___san)

-css


スポンサードサーチ

関連記事

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

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

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

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

最新記事

チャーさん

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

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

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