【プログラミング基礎】サイトに色を付けると華やかに！CSSで色を変える方法。
むっちゃん
本日はCSSで色を変更する方法をご紹介いたします。
基本中の基本ですのでこの記事を読んで色を変える方法を覚えていただけると幸いです。
スポンサーリンク目次
ＣＳＳで色を変える方法
CSSで色を変えるとき、まずどこの色を変更したいか明確にすることが大切です。
色を指定した箇所が少し違うだけで色が変えられず困ってしまいます。
cssで色を変えるには、場所と色を指定する
cssで色を変えるには、「どこの」「なにを」「何色に」するということをプログラムに教えてあげる必要があります。
「どこの」：画面の一番上にある〔登録〕ボタンの
「なにを」：背景の色を
「何色に」：青色にしたい
のような形でプログラムに教えてあげます。
「どこの」を指定する方法
「どこの」を指定する方法は二つあります。
まず1つ目に、色を変えたい箇所のHTMLへ直接にCSSを記述する方法です。
２つ目に、class属性で場所を指定し色を変更する方法です。
例として以下のプログラムの文字色を変更したい場合
<p>あいうえお<p>一つ目の例
<p style="color:white;">あいうえお<p>一つ目の例としてHTMLに直接に書き込む方法です。
この方法は一番楽に色の変更ができます。ですが、注意点としてすべてこの方法でプログラムを開発してしまうと何かのきっかで色を全てのプログラムにおいて変更したい場合に一つ一つ変更していく必要があるので無駄な時間が生まれてしまいます。
二つ目の例
html
<p class="moji">あいうえお<p>
classの箇所にはどんな名前を付けても大丈夫です。
今回は文字の色を変えたいので後からでも分かりやすいように「moji」という名前にしました。
classでCSSを指定するメリットは一度記述したCSSを何度でも呼び出して別の箇所の使う事ができることです。
class="moji" を付けると付けた箇所がみんな「moji」のCSSが反映されるということです。
「何を」を指定する方法
「どこの」は指定できるようになりました。
次は「何を」指定できるようになりましょう。
「どこの」での例であるように「何を」を指定するには指定するための登場人物を覚えなければなりません。
以下の表によく使う項目を例としてあげました。
| 文字の色 | color |
| 背景の色 | background-color |
| 線の色 | border |
この３つを知っておけばＣＳＳで色を変えるときに困ることはないでしょう。
「何色に」を指定する方法
あとは、何色にするかを指定するだけですね。
色に関しては原色であれば英語で色を指定することができます。例えば、red、blue、black、white、のようにです。
ですが原色だけじゃなくてパステルな可愛い色も使いたいですよね。
色を指定するのに役立つサイトを記事の最後に記載していますのでそちらを参考にしてみてください。
色が反映されない時に確認すること
「どこの」「何を」「何色に」を意識してコードを書いたのに色反映されていない！なんてことよくあります。
焦らず以下の事を試してください。
CSSが反映されないときに試すこと
指定した箇所が正しいか確認する
指定した箇所が正しくないといくら指定してもCSSは反映されません。
特に文字色の変更は文字のすぐそばで指定しないと色が変わらないので注意です。
<div class="moji">
<p >あいうえお<p>
<div>上記の例の場合<p>にclassを指定すると文字の色が反映されますが、<div>の箇所にしていしているため文字の色は変えることが出来ません。
このように、少しでも場所が違っていると色が変更されないので確認してみてください。
誤字がないか確認する
次に誤字です。
classで指定した名前とcssで書いた名前に1文字でも相違があった場合はCSSは反映されません。
また、classで指定した箇所をCSSで使用する場合は必ずclass名の前に「.」を付けなければなりません。
キャッシュが残っている
キャッシュが残っていると前回に指定したCSSがまだ記憶されていて見た目が変わらないです。
ですので記述があっていてもＣＳＳが反映されません。
キャッシュが残っているかもしれない時にくることはキャッシュをクリアにすることです。
WEBブラウザの設定画面からキャッシュをクリアにしてください。
何色を付けようか迷った時
色を指定する際に役に立つサイトを紹介致します。
色はたくさんあるので迷いますよね。
色のトーンを揃える事でまとまりの良い見た目になります。
おすすめのサイト
以下のサイトたちがトーンを揃えるのに便利なのでおすすめです。
どちらも無料で色の選択に困った際に役に立つサイトになっています。
おすすめの本
テーマ別で三色の組み合わせが書かれてありますので、やんわりとしたテーマが決まっていたら色が簡単に決めることが出来るのでおすすめです。
試し読みをしてどれか好みの1冊を購入すれば色を決める時に大変役立つと思います。
実際にこのサイトは「可愛くしてください!ふわっとしたデザインリクエストに応える本」を参考に色を決定しております。
 | 可愛くしてください！ふわっとしたデザインリクエストに応える本 [ Power Design Inc. ] 価格:1980円 |
 | 見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 （見てわかる迷わず決まる） [ ingectar-e ] 価格:1980円 |
最後に
この度はご覧いただきありがとうございました。
「どこの」「何を」「何色に」を意識してcssの色変更の仕方を覚えてくださいね。
少しでもみなさまの勉強の役に立てれば光栄です。
