【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

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

シホ

シホ

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