こんにちは！ライターのシホです！
HTMLで背景に色をつけたいときってどうやるんだっけ？CSSでやったほうがいいの？
と悩んだりしていませんか？
今回は、HTMLを使って背景に色をつける方法と、CSSを使って色をつける方法を解説します。
CSSではさらにグラデーションのつけ方も解説するので、ぜひワンランク上の装飾をしてみたい人は挑戦してみてください！
HTMLで背景の色を指定する
HTMLを使って背景に色を指定する場合は、body要素にbgcolor属性で色（英語表記またはカラーコード）を指定します。
「bgcolor」は「back ground color」の略です。
<body bgcolor=”色”> ~ </body>
HTMLファイル
<body bgcolor="orange">背景にオレンジを指定</body>
ブラウザ表示
HTML内での指定だけで完結するため、このように簡単で扱いやすいですが、HTML5では原則としてbgcolor属性で背景の色を指定することは非推奨とされています。
これはHTML5では、HTMLで文書の構造や内容を記述し、CSSでデザインに関する記述をすることが強く推奨されているからです。
なので、特別な理由がない限りは、次に解説するCSSを用いる方法で背景色を指定するようにしましょう。
また、背景に画像を挿入したい場合は、HTMLで <body background=”画像ファイル名またはURL”> ~ </body>を使います。
詳しい解説はこちらをご覧ください↓
CSSで背景の色を指定する
一色を使う
CSSを使って背景に色をつける場合は、background-colorプロパティに色（英語表記またはカラーコード）を指定します。
HTMLファイル
<body>背景にピンクを指定</body>
CSSファイル
body {
background-color: pink;
}
ブラウザ表示
グラデーションにする
線形
背景の色に線形にグラデーションをつける場合は、backgroundプロパティにlinear-gradient(色1,色2)を指定します。
「linear」は線形という意味です。
この場合、ブラウザの上から色1→色2へとグラデーションをかけるということになります。
HTMLファイル
<body>背景に赤から黄色へのグラデーションを指定</body>
CSSファイル
body {
background: linear-gradient(red, yellow);
}
ブラウザ表示
円形
背景の色に円形にグラデーションをつける場合は、backgroundプロパティにradial-gradient(色1,色2)を指定します。
「radial」は円形という意味です。
この場合、ブラウザの中心から色1→色2へとグラデーションをかけるということになります。
HTMLファイル
<body>背景に白から青へのグラデーションを指定</body>
CSSファイル
body {
background:radial-gradient(white, blue);
}
ブラウザ表示
ウェブサイト製作スキルで自由に働きたい人へ
この記事をご覧の方の中にはHTML及びCSSを習得して、フリーランスエンジニアとして自由に働いていきたいと考えている人もいるのではないでしょうか？
そんなあなたはHTML・CSSのようなマークアップ言語だけでなく、JavaScriptやPHPのような、いわゆる「プログラミング言語」も合わせて習得することをおすすめします。なぜならその方がHTML単体よりも条件の良い案件を獲得しやすくなりますし、案件自体も多くなるからです。
しかし、HTMLやCSSと比べるとプログラミング言語の難易度は一気に上がります。独学の挫折率は8割とも言われているほどです。そこで、プログラミング言語の習得を視野に入れている人は、スクールの利用を検討してみてはいかがでしょうか？
弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
その受講スタイルやサポートもあってか、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。
興味をお持ちの方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！
まとめ
いかがでしたでしょうか。
CSSのグラデーションが使えるようになると、デザインの幅も一気に広がりますね。
ぜひ実践して使ってみてください！
