HTML のテキスト文字列内の 1つの単語の色を変更する
- HTML のテキスト文字列内の 1つの単語の色を変更する
- 内部 CSS を使用して HTML のテキスト文字列内の 1つの単語の色を変更する
- JavaScript を使用して HTML のテキスト文字列内の 1つの単語の色を変更する
この記事の主なトピックは、CSS を使用して、テキスト内の特定の単語を強調表示または色を変更することです。 この機能を実装するためのいくつかの手法について説明します。
内部およびインライン CSS を使用してテキストに色を付ける方法を学習します。 後で、JavaScript を使用して同じ機能を実装する方法を見ていきます。
HTML のテキスト文字列内の 1つの単語の色を変更する
Web サイトでは、テキスト内の 1つの単語が他の単語とは異なる色になっていることがよくあります。 もちろん、ユーザーの注意を引きます。 Web ページで同じことを行う方法について説明しましょう。
以前のバージョンの HTML では、次のようにこの機能を実装するために使用できる <font> タグがありました。
<font color="red">Red</font>
ただし、タグは HTML5 で削除され、サポートされなくなりました。 そのため、タスクを実行するのに役立つ HTML <span> タグについて学習します。
<span> 要素は、テキストのセクションまたはページのセクションをマークアップするためのインライン コンテナーです。 <span> タグの id または class 属性を使用すると、CSS で簡単にスタイルを設定し、JavaScript で変更できます。
<span> タグを使用すると、div 要素と同様に、インライン スタイルを適用することもできます。 ただし、<span> はインライン要素ですが、div はブロック レベルの要素です。
これを理解するには、以下の例を確認してください。
<html>
<body>
<p>Hello, I am
<span style="color: red">Red</span>
</p>
</body>
</html>
CSS の color プロパティは、テキストに特定の色を与えます。 必要な色を指定するには多くの方法があります。 上記の例では、名前で色を選択しています。
HTML は、ブラック、ホワイト、グレー、シルバー、マルーン、レッド、パープル、フクシア、グリーン、ライム、オリーブ、イエロー、ネイビー、ブルー、ティール、アクアの 16 色の名前を認識できます。 新しいブラウザは、140 個の CSS カラー名を認識できます。
HTMLで認識されるすべての色名はこちらから確認できます。 前述したように、必要な色を指定する方法は他にもたくさんあります。
さまざまな方法を見てみましょう。
RGB カラー
RGB は赤、緑、青の略です。 赤、緑、青の 3 原色を組み合わせて各色を作成する加法混色スキームを使用します。
赤、緑、青の各パラメーターには、色の強度を表す 0 ～ 255 の値があります。 これは、256 x 256 x 256 = 16,777,216 色の異なる色があることを示しています。
たとえば、rgb(255, 0, 0) は、赤が最大値の 255 に設定され、他の 2つの色である緑と青が 0 に設定されているため、赤にレンダリングされます。すべての色パラメーターをゼロに設定します。 この rgb(0,0,0) のように黒を表示します。
こちらから各色のRGB値を確認できます。
<html>
<body>
<p>Hello, I am
<span style="color: rgb(241, 196, 15 )">Yellow</span>
</p>
</body>
</html>
RGBA カラー
RGBA カラーは、カラーの不透明度を決定するアルファ チャネルを含む RGB カラーの拡張です。 RGBA カラー値の構文は次のとおりです。
rgba (red, green, blue, alpha)
alpha パラメータの値の範囲は 0.0 (完全な透明度) から 1.0 (完全な可視性) です。 さまざまな不透明度で異なる背景色が必要になる場合があるため、このプロパティを背景色に使用することもできます。
16 進数の色
16 進数の色は、16 進数の値を使用して、さまざまなカラー モデルの色を表します。 16 進数の色は、#RRGGBB で表されます。ここで、RR は赤、GG は緑、BB は青を表します。
色の強度を指定する 16 進数の整数は、00 から FF の範囲です。 簡単な例は #0000FF です。 赤と緑の部分が最小値 00 であるのに対し、青の成分は最大値 FF にあるため、色は完全に青です。
こちらから各色の16進値を見ることができます。
<html>
<body>
<p>Hello, I am
<span style="color: #0000FF">Blue</span>
</p>
</body>
</html>
HSLの色
HSL は、色相、彩度、明度の頭字語です。 それぞれの用語について詳しく見ていきましょう。
- 色相: 色相は、カラー ホイールの 0 ～ 360 度の範囲です。 赤は 0 です。 黄色は 60 です。 緑は 120 です。 青は240など。
- 彩度: この量はパーセンテージで測定されます。100% は完全に彩度が高い (つまり、灰色の色合いがない) ことを示し、50% は 50% が灰色であるが色がまだ見えることを示し、0% は完全に彩度が低い (つまり、完全に彩度が低い) ことを示します。 灰色で色が見えない)。
- 明度: これもパーセンテージです。0% は黒、100% は白です。 色に与えたい光の量はパーセンテージで表され、0% は黒 (光がない場所)、50% は暗くも明るくもないこと、100% は白 (完全な明るさ) を表します。
HSL カラー値の構文は次のとおりです。
hsl(hue, saturation, lightness)
こちらから各色のHSL値を確認できます。
<html>
<body>
<p>Hello, I am
<span style="color: hsl(23, 97%, 50% )">Orange</span>
</p>
</body>
</html>
HSLA カラー
HSLA カラーは、カラーの不透明度を指定するアルファ チャネルを使用して HSL を拡張したものです。 HSLA カラー値は次のように決定されます。
hsla(hue, saturation, lightness, alpha)
alpha パラメータの値は、完全に透明であることを意味する 0.0 と透明でないことを意味する 1.0 の間の厳密な範囲を持つ数値です。
内部 CSS を使用して HTML のテキスト文字列内の 1つの単語の色を変更する
CSS で色を指定するすべての方法を詳細に見てきました。 これまではすべてインライン CSS を使用してきました。
ただし、インライン CSS は要素に関連付けられているだけなので、推奨される方法ではありません。 異なるページ領域で同じ機能が必要な場合は、大幅に書き直す必要があります。
<style> タグ内の HTML <head> タグで定義された内部 CSS を使用して、テキストに色を付けましょう。
<html>
<head>
<title>CSS Color Property</title>
<style>
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1>
Hello this is <span id="built">Built-in color</span> format.
</h1>
<h1>
Hello this is <span id="rgb">RGB</span> format.
</h1>
<h1>
Hello this is <span id="rgba">RGBA</span> format.
</h1>
<h1>
Hello this is <span id="hex">Hexadecimal</span> format.
</h1>
<h1>
Hello this is <span id="hsl">HSL</span> format.
</h1>
<h1>
Hello this is <span id="hsla">HSLA</span> format.
</h1>
</body>
</html>
JavaScript を使用して HTML のテキスト文字列内の 1つの単語の色を変更する
JavaScript を使用して、文中の特定の単語の色を変更できます。 <span> タグに ID を指定し、document.getElementById(ID-name) を使用して JavaScript からその要素を取得し、style プロパティを呼び出す必要があります。 方法は次のとおりです。
<html>
<body onload="myFunction()">
<p>Hello, I am <span id="color-text">Magenta.</span></p>
<script>
function myFunction() {
document.getElementById("color-text").style.color = "magenta";
}
</script>
</body>
</html>