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

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

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

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

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

最新記事

チャーさん

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

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

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