【HTML入門】背景に色や線形・円形のグラデーションを指定する方法

こんにちは!ライターのシホです!

HTMLで背景に色をつけたいときってどうやるんだっけ?CSSでやったほうがいいの?

と悩んだりしていませんか?

今回は、HTMLを使って背景に色をつける方法と、CSSを使って色をつける方法を解説します。

CSSではさらにグラデーションのつけ方も解説するので、ぜひワンランク上の装飾をしてみたい人は挑戦してみてください!

目次

HTMLで背景の色を指定する

HTMLを使って背景に色を指定する場合は、body要素bgcolor属性色(英語表記またはカラーコード)を指定します。

「bgcolor」「back ground color」の略です。

<body bgcolor=”色”> ~ </body>

HTMLファイル

<body bgcolor="orange">背景にオレンジを指定</body>

ブラウザ表示

スクリーンショット 2018-05-15 21.46.37

HTML内での指定だけで完結するため、このように簡単で扱いやすいですが、HTML5では原則としてbgcolor属性で背景の色を指定することは非推奨とされています。

これはHTML5では、HTMLで文書の構造や内容を記述し、CSSでデザインに関する記述をすることが強く推奨されているからです。

なので、特別な理由がない限りは、次に解説するCSSを用いる方法で背景色を指定するようにしましょう。

また、背景に画像を挿入したい場合は、HTMLで <body background=”画像ファイル名またはURL”> ~ </body>を使います。
詳しい解説はこちらをご覧ください↓

CSSで背景の色を指定する

一色を使う

CSSを使って背景に色をつける場合は、background-colorプロパティに色(英語表記またはカラーコード)を指定します。

HTMLファイル

<body>背景にピンクを指定</body>

CSSファイル

body { 
  background-color: pink; 
}

ブラウザ表示

スクリーンショット 2018-05-15 21.54.46

グラデーションにする

線形

背景の色に線形にグラデーションをつける場合は、backgroundプロパティにlinear-gradient(色1,色2)を指定します。

「linear」線形という意味です。

この場合、ブラウザの上から色1→色2へとグラデーションをかけるということになります。

HTMLファイル

<body>背景に赤から黄色へのグラデーションを指定</body>

CSSファイル

body { 
  background: linear-gradient(red, yellow); 
}

ブラウザ表示

スクリーンショット 2018-05-15 22.07.39

円形

背景の色に円形にグラデーションをつける場合は、backgroundプロパティにradial-gradient(色1,色2)を指定します。

「radial」円形という意味です。

この場合、ブラウザの中心から色1→色2へとグラデーションをかけるということになります。

HTMLファイル

<body>背景に白から青へのグラデーションを指定</body>

CSSファイル

body { 
  background:radial-gradient(white, blue); 
}

ブラウザ表示

スクリーンショット 2018-05-15 22.14.27

ウェブサイト製作スキルで自由に働きたい人へ

この記事をご覧の方の中にはHTML及びCSSを習得して、フリーランスエンジニアとして自由に働いていきたいと考えている人もいるのではないでしょうか?

そんなあなたはHTML・CSSのようなマークアップ言語だけでなく、JavaScriptやPHPのような、いわゆる「プログラミング言語」も合わせて習得することをおすすめします。なぜならその方がHTML単体よりも条件の良い案件を獲得しやすくなりますし、案件自体も多くなるからです。

しかし、HTMLやCSSと比べるとプログラミング言語の難易度は一気に上がります。独学の挫折率は8割とも言われているほどです。そこで、プログラミング言語の習得を視野に入れている人は、スクールの利用を検討してみてはいかがでしょうか?

弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

その受講スタイルやサポートもあってか、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

興味をお持ちの方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料カウンセリングの
予約はこちら

まとめ

いかがでしたでしょうか。

CSSのグラデーションが使えるようになると、デザインの幅も一気に広がりますね。

ぜひ実践して使ってみてください!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次