スライドショー

【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

シホ

シホ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説