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

スポンサードサーチ

関連記事

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

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

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

no image

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

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

no image

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

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

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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