文字の色はHTMLの <font> タグを使って変更できますが、この方法はHTML5ではすでにサポートされていません。代わりに簡単なCSSを使ってページ内のさまざまな要素がどんな色で表示されるかを定義します。CSSで作成したウェブページのデザインは、すべてのブラウザーが対応しています。

方法 1 の 2:
CSSを使う

  1. 1
    HTMLファイルを開く 文字の色を変更するのに一番いい方法はCSS(カスケーディングスタイルシート)を使うことです。古いHTMLのプロパティ設定は、HMTL5ではすでにサポートが終了しており、CSSを使って要素のスタイル設定をする方法が広く使われています。
    • この方法は、外部スタイルシート(別のCSSファイル)を利用する場合にも有効です。ここでは内部スタイルシート設定の場合を例にとって説明します。
  2. 2
    <head>タグの内側にカーソルを合わせる 内部スタイルシートを使用する場合、このタグの内側でスタイルを定義していきます。
  3. 3
    <style> を追加して内部スタイルシートを作成する <style>タグが<head>タグの内側にある場合、<style>タグ内のCSSは、そのページの該当する要素すべてに適用されます。この時点で、HTMLファイルの先頭部分は、このようになるはずです。[1]
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    </style>
    </head>
    
  4. 4
    文字の色を変更したい要素を追加する <style>セクションを使って、ページ上の様々な要素の見栄えを定義します。例えば、本文全体のスタイルを変更するには、このように設定します。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    
    }
    </style>
    </head>
    
  5. 5
    要素セレクタにcolor: プロパティを追加する color:プロパティは、指定された要素にどのような文字色を使うかを指示するものです。この例では、文字色の変更がページのすべてのテキストのデフォルト要素に適用されます。つまり本文全体の色が変更されることになります。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color:
    }
    </style>
    </head>
    
  6. 6
    テキストの色を指定する 色の指定には、色の英語名、16進数のカラーコード、RGBのカラーコードを指定する3つの方法があります。青色を使いたい場合を例にとると、bluergb(0, 0, 255)#0000FFの値が使えます。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color: red;
    }
    </style>
    </head>
    
  7. 7
    別のセレクタを追加し、様々な要素の文字色を変更する 様々なセレクタを使用し、ページ内の別々の部分の文字の色をそれぞれ違う色に変更することができます。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    	color: red;
    }
    h1 {
    	color: #00FF00;
    }
    p {
    	color: rgb(0,0,255)
    }
    </style>
    </head>
    <body>
    
    <h1>このヘッダは緑で表示されます。</h1>
    
    <p>このパラグラフは青で表示されます。</p>
    
    この本文は赤で表示されます。
    </body>
    </html>
    
  8. 8
    要素を変更せずにCSSクラスを定義する クラスを定義すると、クラススタイルを即座に追加し、ページ内のあらゆる要素に適用することができます。このファイルの例をとると、「.redtext」のクラスが、指定されるあらゆる要素を赤字表示にします。
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .redtext {
    	color: red;
    }
    </style>
    </head>
    <body>
    
    <h1 class="redtext">この見出しは赤で表示されます</h1>
    <p>このパラグラフは通常の色です。</p>
    <p class="redtext">このパラグラフは赤で表示されます</p>
    
    </body>
    </html>
    
    広告

方法 2 の 2:
インラインスタイルでプロパティを設定する

  1. 1
    HTMLファイルを開く インラインスタイルのプロパティで、ページ内の特定の要素のスタイルの変更ができます。この方法は、1、2ヶ所のスタイル変更には便利ですが、全体に渡って使い続けることは勧められません。広範囲のスタイル変更には、上に説明した方法を採用します。[2]
  2. 2
    変更したい要素をファイル内で見つける インラインスタイルのプロパティを使用して、あらゆる要素の文字色が変更できます。例えば、特定のヘッダの文字色を変更したい場合、ファイル内で該当要素を見つけます。
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>これが文字色を変更したいヘッダです</h1>
    
    </body>
    </html>
    
  3. 3
    要素にスタイルプロパティを追加する 変更したい要素の開始タグ内に、style=""を追加します。
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="">これが文字色を変更したいヘッダです</h1>
    
    </body>
    </html>
    
  4. 4
    ""の中にcolor:プロパティを追加する ここまでの作業で、例えばこのような状態になります。
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="color:">これが色を変更したいヘッダです</h1>
    
    </body>
    </html>
    
  5. 5
    文字を変更したい色を指定する 色の定義には3種類あります。色の英語名を使うことも、あるいはRGBや13進法のカラーコードを値として指定することもできます。例えば黄色に変更したい場合は、yellow;rgb(255,255,0);#FFFF00;のどれかを追加します。
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 style="color:#FFFF00;">このヘッダは今度は黄色で表示されます</h1>
    
    </body>
    </html>
    
    広告

ポイント

  • サポートされている色の名前と16進値については、次のサイトに一覧があります。http://www.w3schools.com/colors/colors_names.asp

広告

関連記事

How to

Googleに問い合わせをする

How to

画像検索で簡単に人物を特定する

How to

トレントのダウンロード速度を上げる

How to

画像のURLを取得する

How to

ページリダイレクトをブロックする

How to

Googleドキュメントを保存する

How to

2台のルーターを接続する

How to

閲覧履歴を確認する

How to

ダウンロード速度を上げる

How to

YouTube動画の年齢制限を回避する

How to

Firefoxでウェブサイトをブロックする

How to

携帯電話を使ってノートパソコンをインターネットに接続する

How to

YouTubeをブロックする

How to

ウェブサイトから無料で動画をダウンロードする
広告

このwikiHow記事について

wikiHow編集チーム
共著者 by
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。 この記事は2,592回アクセスされました。
このページは 2,592 回アクセスされました。

この記事は役に立ちましたか?

広告