【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割とも言われているほどです。そこで、プログラミング言語の習得を視野に入れている人は、スクールの利用を検討してみてはいかがでしょうか?

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

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

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日

興味をお持ちの方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

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

無料体験レッスンの
予約はこちら

まとめ

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー