2020年1月22日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はCSSを使って文字・背景の色を変更する方法について解説していきます。この記事は初心者向けに説明していますが、CSSの基本的な書式について知らない方にはよくわからない言葉がでてくることがあります。け】」の記事を先に読むと、この記事をより理解できます。文字色を変更するには「color」プロパティを使用。color使用例CodePenで使用例を紹介。色の指定方法16進数、RGB、色名指定のいずれかで指定。背景色を変更するには「background-color」を使用。background-color使用例CodePenで使用例を紹介。色の指定方法はcolorと同じ。カラーコードの指定はGoogleで!カラーコードは覚えようとせず、Googelで検索する。文字色の変更まずは文字色を変更する方法から見ていくよ!ヒナ文字色を変更するには「color」プロパティを使用します。適応させたいカラーコードを値に指定することができます。フォントの太さを指定する場合はfont-weight、フォントのサイズを指定する場合にはfont-sizeを指定します。これらのように「font-color」と指定しないように注意しましょう。ちなみに僕はたまに間違えます。値に使うカラーコードの指定は、3種類あります。1つめは16進数を使う指定方法です。16進数とは1〜9までの数字とa〜fまでのアルファベットを使い数値を表現する方法です。2つ目はRGBという指定方法で、RGBとはそれぞれR=赤(red)G=緑(green)B=青(blue)を指します。それぞれ0〜255までの数値で指定し、どの色をどれだけ混ぜるかで色を指定します。「全て0なら黒」、「全て255なら白」、「Rが255で他が0なら赤」などです。最後に上のCodePenで指定した「red」のような色名指定する方法です。red以外にも、blueやgreenなど色名指定できるものは複数ありますが、全て説明していくとものすごい量になってしまうので割愛します。ハリボー16進数?RGB?色名指定?、、は?どれも難しく感じるかもしれませんが、これについては深く考える必要も覚える必要もありません。おすすめの方法は、Googleを使用することです。色」と検索すると、色を指定するパレットのようなものが表示されます。その中から好きな色を見つけ、16進数かRGBをコピーしてコード内に貼り付けましょう。「#1a1a1a」ってどんな色?と思うことがあれば、その色をGoogleで貼り付けるだけで調べることができます。次は背景色の変え方について見ていくよ。ヒナ背景色を変更するには「background-color」プロパティを使用します。color同様、値に適応させたいカラーコードを指定します。CodePen.色の指定方法background-colorプロパティも、colorと同じように値に色を指定する必要があります。指定方法はcolorで説明したものと全く同じです。親子で別の色を指定した場合は、子要素の色が優先されます。下の例では全体(親要素:dvi)に赤色が指定されていますが、2つめのp要素(子要素:p)には青色が指定されています。そのため、1つめの背景色が指定されていないp要素は赤色の背景が適応され、2つめの背景色が指定されたp要素は青色の背景が適応されます。CodePen.カラーコードはGoogleで!今回はcolorとbackground-colorについて解説していきました。値にカラーコードを指定すればいいだけなので、とても簡単です。間違えてもカラーコードを暗記しようという考えはもたないようにしてください。カラーコードはいろいろなサイトで詳しく紹介してありますが、使いやすく検索もできるという点からGoogleを使用することをおすすめします。今回紹介したcolorとbackground-colorはとてもよく使います。どちらも簡単なので、自分で実際にコードを書いてみて確実にマスターしてください。見出しを表す方法【HTML】h要素はHTMLにおいて「見出し」を表します。...初心者向けリストの作成方法【HTML】HTMLでリストを作成する方法を、初心者向けにわかりやすく解説していきます。...タグ中の要素、属性とは?HTMLの基本的な書式こんにちは、Kosei()です。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。