HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

Web制作のコーディングは、一見雑多に見えることがあります。同じ目的を達成するための方法が複数存在し、その中には効率的なものもあれば、そうでないものもあります。さらに、環境によっては動作しない解決策もあるかもしれません。優れたサイトと最高のサイトの違いはアプローチの選択にかかっており、それはHTMLのカラーコーディングにおいて特に顕著です。

とはいえ、HTMLの色指定は脳外科手術ほど難しいものではありません。このガイドでは、サイトのHTMLを調整して多彩な色合いを実現するための4つの方法をご紹介します。シンプルな手順に従うだけで、あなたのウェブサイトは魅力的なトーンで彩られ、競合他社よりも際立った存在になるでしょう。

HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

HSL値を使う

モダンブラウザは、色相（Hue）、彩度（Saturation）、輝度（Lightness）を表すHSL値にしっかり対応しています。この方法は他の方法ほど頻繁には使われませんが、実装が簡単で手軽に使えるのが魅力です。HSL値の指定は素早く行える点も見逃せません。

HSLを適用するには、標準的なstyle属性を使用し、「hsl」をタイプとして指定した上で、括弧内に値を割り当てます。

<body style="background-color:hsl(0,0%,96%);">
  </body>

透明度をコントロールしたい場合は、アルファチャンネル経由でhslを渡します。「hsla」というプレフィックスを使い、括弧内に0（完全に透明）から1（完全不透明）までの範囲の4つ目の値を追加しましょう。

<body style="background-color:hsla(0,0%,96%,0.8);">
  </body>
  • HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

RGB値を試す

赤・緑・青（RGB）の値を使ってHTMLの背景色を指定するのは、HSLよりも広く普及している方法です。RGBは新旧どちらのブラウザでも問題なく動作するため、幅広いユーザーに向けてサイトを提供したい開発者にとって、非常に魅力的な選択肢となっています。

RGBの適用方法はHSLとほぼ同じです。同じstyle属性の形式を使い、「hsl」を「rgb」に置き換えて、括弧内に3つの色属性を記述します。

<body style="background-color:rgb(102,0,51);">
  </body>

HSLと同様に、RGBでもアルファチャンネルを割り当てることで透明度を管理できます。括弧内に0から1までの範囲の4つ目の値を追加するだけです。

<body style="background-color:rgba(102,0,51, 0.2);">
  </body>
HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

定番のHexコードで色を指定する

この方法は、長年の実績を持つ定番中の定番です。16進数（Hex）値による指定は、世界中のほとんどのブラウザで認識されるため、HTMLのカラープロパティをコーディングする際の人気の方法となっています。また、Hexコードは単一の変数で構成されているため、複数の変数を扱う場合と比べてミスが起きにくいという利点もあります。

HexコードでHTMLの色を指定するには、同じstyle属性を使い、「hsl」や「rgb」の代わりにHexコードを記述するだけです。

<body style="background-color:#228B22;">
  </body>

ただし、Hexカラーの挙動は配置場所によって変化することに注意が必要です。インライン要素とブロックレベル要素のどちらを扱っているのかを常に意識しながら、Hexカラーコードを割り当てるようにしましょう。

HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

迷ったらカラー名を使う

HexコードやHSL値にあまり詳しくないという方には、カラー名を使う方法がおすすめです。HTMLでは140種類のカラー名が使用できるため、サイトの色を素早く変更したい場合に最適な手段となります。

これまでと同じstyle属性を使い、Hexコードをカラー名に置き換えるだけでOKです。

<body style="background-color:brown;">
  </body>

カラー名の使用は、手間をかけずにシンプルな色変更を行いたい場合にぴったりの方法です。次回、急いで色の問題を解決する必要があるときは、ぜひカラー名を活用してみてください。

HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

以上が、HTMLのカラープロパティをコーディングするための最も迅速かつシンプルな4つの方法です。次にサイトに色を加えたいときは、焦ったり頭を抱えたりする必要はありません。このガイドを参考にすれば、あなたのウェブサイトはきっと美しく仕上がるはずです！

HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド
  1. WSL（Windows Subsystem for Linux）をさらに快適に使うための7つのヒント

    Windows Subsystem for Linux（WSL）は、近年登場した最も注目すべきソフトウェアプロジェクトのひとつです。かつてMicrosoft WindowsとLinuxは犬猿の仲と見なされていましたが、今ではデュアルブートや仮想マシンの構築なしに、Windowsシステム上で本格的なLinuxアプリケーションを実行できます。WSLをすでに使っているなら、どうすればさらに快適にできるのでしょうか？Windows Terminalを導入するMicrosoft StoreからLinuxディストリビューションをインストールするとターミナルウィンドウが使えますが、それ以外にも優れた選択肢が

  2. メールチェックで集中力を切らさない！受信トレイ整理の生産性向上テクニック4選

    誰もが経験したことがあるはずです。目の前のタスクに集中しているとき、同僚からメールが届き、その内容が気になって手元の作業から意識がそれてしまう——。ついクリックして開いてみるものの、実はすぐに返信する必要のない内容だった、ということはよくあります。 それでも「今すぐ返信すべきか」「それとも集中力を取り戻すべきか」と迷ってしまうものです。こうしたことが一日に何度も繰り返されると、なおさら集中を保つのが難しくなります。 この記事では、メールをチェックするときにも生産性を維持するための実践的なコツをご紹介します。 1. 1日のメールチェック回数を制限する メールが届くたびに、あるいは届きそうだと予感