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年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


スポンサードサーチ

関連記事

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

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

no image

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

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

no image

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

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

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

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

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

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

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

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

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

最新記事

チャーさん

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

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

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