HTMLとCSSで文字色を変更する方法

ページ名：HTMLとCSSで文字色を変更する方法

ウェブページのテキストの色を変えたいですか？HTML5では、CSSを使用して、ページ上のさまざまな要素に表示されるテキストの色を定義できます。また、インラインスタイル属性を使用して、CSSファイル内の個々のテキスト要素の色を変更することもできます。 CSSを使用することで、ウェブページがあらゆるブラウザに対応するようになります。 また、外部CSSファイルを使用して、ウェブサイト全体で特定のスタイルの標準フォントカラーを作成することもできます。 このWikiHowでは、HTMLとCSSを使ってテキストの色を変更する方法を説明します。

方法1

テキストスタイルの作成

  1. HTMLファイルを開きます。テキストの色を変更するには、CSSを使うのが一番です。古いHTMLの<font>属性は、HTML5ではサポートされなくなりました。望ましい方法は、CSSを使って要素のスタイルを定義することです。先に進み、または.
    • この方法は.NETでも使えます。この記事で使用している例は、内部スタイルシートを使用したHTMLファイルのものです。
  2. HTMLファイルの先頭にカーソルを置いてください。特定のHTMLファイルに内部スタイルシートを使用する場合、通常はHTMLファイルのhead内に配置されます。 headは、冒頭の<head>タグと末尾の</head>タグの間にあるシートの先頭にあります。
    • HTML文書にheadがない場合は、HTMLファイルの先頭にheadの開始タグと終了タグを入力してください。
  3. スタイル・シートの開始タグと終了タグを入力します。 ウェブページのスタイルに影響を与えるすべてのCSS要素は、HTML文書のheadセクション内の開始スタイル・タグと終了スタイル・タグの間に記述します。 head "セクションに<style>と入力して、開始スタイル・タグを作成します。次に</style>を数行下にタイプして、終了スタイル・タグを作成します。 終了すると、HTMLファイルの冒頭は次のようになるはずです：
    <!DOCTYPE html> <html> <head> <style> </style> </head>
  4. 文字色を変更したい要素を入力し、その後に開き括弧と閉じ括弧を続けます。変更できる要素には、本文（body）、段落テキスト（"<p>"）、ヘッダー（"<h1>"、"<h2>"、"<h3>"など）が含まれます。 次に、開き括弧（"{"）を1スペース空けて入力します。 そして、数行下に閉じ括弧（"}"）を追加する。この例では、「body」テキストを変更します。HTMLファイルの冒頭は以下のようになるはずです：
    <!DOCTYPE html> <html> <head> <style> body { } </style> </head>
  5. CSSの要素セクションにcolor属性を追加します。 先ほど作成したtext要素の開き括弧と閉じ括弧の間に「color:」と入力します。 color: "属性は、その要素に使用するテキストの色をページに伝えます。ここまでで、HTMLファイルの先頭は以下のようになるはずです：
    <!DOCTYPE html> <html> <head> <style> body { color: } </style> </head>
  6. セミコロン（";"）の後にテキストの色を入力します。色を入力するには、名前、16進数値、RGB値の3つの方法があります。例えば、青色を入力する場合は、blue、色名を入力する場合は、rgb(0, 0, 255)、RGB値を入力する場合は、#0000FF、.HTMLページを作成する場合は、以下のようになります：
    <!DOCTYPE html> <html> <head> <style> body { color: red; } </style> </head>
  7. さまざまな要素の色を変更するために、他のセレクタを追加します。異なるテキスト要素の色を変更するために、異なるセレクタを使用することができます。 ヘッダーの色を段落テキストや本文テキストと異なる色にしたい場合は、「<style>」セクション内で各要素ごとに異なるセレクタを作成する必要があります。次の例では、本文テキストの色を赤に、ヘッダーテキストを緑に、段落テキストの色を青に変更しています：
    <!DOCTYPE html> <html> <head> <style> body { color: red; } h1 { color：#p { color: rgb(0,0,255) } </style> </head> <body> <h1>このヘッダは緑になります。 </h1> <p>この段落は青になります。 </p> この本文は赤になります。 </body> </html> <head> <body> <h1>このヘッダは緑になります。
  8. テキストの色を変更するCSSクラスを定義します。CSSでは、既存の要素を使用するよりも、むしろあなたがすることができます。 HTML文書内の任意のテキスト要素にクラスを適用することができます。 そのためには、ピリオド（"."）の後に定義したいクラス名を入力します。 次の例では、テキストの色を赤に変更する「.redtext」という新しいクラスを定義しています。 そして、これをHTMLドキュメントの一番上のヘッダーに適用します。 次の例をご覧ください：
    <!DOCTYPE html> <html> <head> <style> .redtext { color: red; } </style> </head> <body> <h1 >この見出しは赤くなります</h1> <p>この段落は普通になります。</p> <p >この段落は赤になります</p> </body> </html>
方法2

インライン・スタイルを使う

  1. HTMLファイルを開いてください。インラインHTMLスタイル属性を使用して、ページ上の単一の要素のスタイルを変更することができます。これは、1つか2つのスタイルを素早く変更するのに便利ですが、広範囲に使用するのはお勧めできません。 包括的な変更には. 先に進み、または.
  2. ファイルから変更したいテキスト要素を見つけてください。段落テキスト（"<p>"）や見出しテキスト（"<h1>"）など、どのテキスト要素でもインラインスタイル属性を使ってテキストの色を変更することができます。
    <!DOCTYPE html> <html> <body> <h1>これが変更したい見出しです</h1> </body> </html>
  3. 要素にstyle属性を追加します。そのためには、変更したい要素の開始タグの中に style="" と入力します。 次の例では、ヘッダーのテキストにstyle属性を追加しています：
    <!DOCTYPE html> <html> <body> <h1 style="">これが変更したいヘッダーです</h1> </body> </html>
  4. 引用符の中にcolor: 属性を入力します。 style属性の後の引用符の中にコロン（":"）を付けて "color "と入力する。 ここまでで、あなたのHTMLファイルは以下のようになるはずです：
    <!DOCTYPE html> <html> <body> <h1 style="color:">これが変更したいヘッダーです</h1> </body> </html>
  5. 変更したい色をセミコロン（";"）で囲んで入力します。色を表現するには3つの方法があります。色の名前を入力する方法、RGB値を入力する方法、16進数を入力する方法です。たとえば、色を黄色に変更するには、色の名前にyellow、RGB値にrgb(255,255,0)、16進数に#FFFF00と入力します。 次の例では、16進数を使って見出しの色を黄色に変更しています：
    <!DOCTYPE html> <html> <body> <h1 style="color:#FFFF00;">このヘッダーは黄色になりました</h1> </body> </html>
この記事は、CC BY-NC-SAで公開されている「 HTMLとCSSで文字色を変更する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧