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

HTMLでテキストの色を変更するには？color属性の使い方とCSSによる代替方法

HTMLでは、color属性を使用することで、要素内のテキストの色を指定・表示することができます。

注意：このcolor属性はHTML5ではサポートされていません。現在のWeb制作では、後述するCSSを使った方法が標準とされています。

color属性を使った記述例

以下のコードを実行すると、HTMLにおけるcolor属性の基本的な使い方を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML テキストカラーの例</title>
   </head>
   <body>
      <table width = "100%">
         <tr>
            <td>
               <p><font color="blue">これはサンプルテキストです。</font></p>
            </td>
         </tr>
      </table>
   </body>
</html>

上記の例では、<font>タグにcolor="blue"を指定することで、テキストが青色で表示されます。

推奨される方法：CSSでテキストの色を指定する

HTML5では<font>タグやcolor属性は廃止されています。そのため、実際の開発ではCSSのcolorプロパティを使用するのがベストプラクティスです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: blue;
         }
      </style>
   </head>
   <body>
      <p>これはサンプルテキストです。</p>
   </body>
</html>

CSSを使えば、色名だけでなく「#0000ff」のようなカラーコードや、「rgb(0, 0, 255)」といったRGB値でも柔軟に色を指定できます。デザインの一元管理や保守性の面からも、CSSでの色指定を心がけましょう。

  1. C#でコンソールのテキスト前景色を変更する方法

    C#でコンソールに表示されるテキストの前景色（文字色）を変更したい場合は、Console.ForegroundColor プロパティを使用します。このプロパティに ConsoleColor 列挙体の任意の色を代入するだけで、以降の出力テキストの色が変わります。なお、背景色を変更したい場合は Console.BackgroundColor プロパティを使います。両方を組み合わせれば、見やすいカラフルなコンソールアプリケーションを作成できます。サンプルコード以下は、背景色と前景色をそれぞれ変更して表示する例です。using System; class Demo {    pub

  2. 【保存版】テキストの大文字・小文字を一瞬で変換する方法|Word・Googleドキュメント・Mac・オンラインツール対応

    Microsoft WordやGoogleドキュメントで文章を入力した際、「大文字と小文字を間違えて打ってしまった…」という経験はありませんか?「小文字を大文字に(あるいはその逆に)変えたいのに方法がわからない」というお問い合わせを多くいただきます。中には、誤入力した部分を全部消して打ち直そうと考えている方もいますが、実はもっと効率的な解決策があります。幸いなことに、Microsoft Wordをはじめとするほぼすべてのテキストエディタには、選択したテキストの大文字・小文字を変換する機能が標準搭載されています。ITに詳しくない方でも簡単に操作でき、しかもその方法は複数あります。この記事では、そ