CSS で Web サイトのフォントの色を変更する方法
ウェブサイトのフォントを好きな色にする
知っておくべきこと
CSS を使用すると、作成および管理する Web ページのテキストの外観を制御できます。このガイドでは、色のキーワード、16 進数の色コード、または RGB 色番号を使用して、CSS でフォントの色を変更する方法を示します。
CSS スタイルを使用してフォントの色を変更する方法
色の値は、色のキーワード、16 進数の色番号、または RGB 色番号で表すことができます。このレッスンでは、CSS の変更と そのドキュメントに添付された別の CSS ファイル .特に段落要素を見ていきます。
色のキーワードを使用してフォントの色を変更する
HTML ファイルのすべての段落のテキストの色を変更するには、外部スタイル シートに移動して次のように入力します。 p{} .を置きます 色 スタイルのプロパティの後にコロンが続きます。 p {色:} .次に、プロパティの後に色の値を追加し、最後にセミコロンを付けます。この例では、段落テキストが黒に変更されています。
p {
色: 黒;
}
アシュリー・ニコール・デレオン / ライフワイヤー
16 進値を使用してフォントの色を変更する
色のキーワードを使用してテキストを赤、緑、青、またはその他の基本的な色に変更すると、これらの色のさまざまな色合いを作成するときに見られる精度が得られません。それが16進数の値です。
16 進コード #000000 は黒に変換されるため、この CSS スタイルを使用して段落を黒く着色できます。その 16 進値で省略形を使用して、#000 と書き込んでも同じ結果が得られます。
p {
色: #000000;
}
単純な黒または白ではない色が必要な場合は、16 進数値が適切に機能します。たとえば、次の 16 進コードを使用すると、非常に特定の青の色合い (中範囲のスレートのような青) を設定できます。
p {
色: #2f5687;
}
16 進数は、色の RGB (赤、緑、青) 値を基数 16 の値とは別に設定することによって機能します。そのため、文字が含まれています。 あ 終えた ふ 数字に加えて 0 終えた 9 .
赤、緑、青の各色は、独自の 2 桁の値を受け取ります。 00 は可能な限り低い値ですが、 FF は最高です。色は 16 進数で RGB 順にリストされているため、最初の 2 桁が赤の値を表します。
RGBA カラー値を使用してフォントの色を変更する
最後に、RGBA カラー値を使用してフォントの色を編集できます。 RGCA は最新のすべてのブラウザーでサポートされているため、ほとんどのビューアーで機能することを確信してこれらの値を使用できますが、簡単なフォールバックを設定することもできます。
この RGBA 値は、上で指定したスレート ブルーの色と同じです。
p {
色: rgba(47,86,135,1);
}
最初の 3 つの値は赤、緑、青の値を設定し、最後の数字は透明度のアルファ設定です。アルファ設定は 1 に設定されて 100 パーセントを意味するため、この色には透明度がありません。この値を .85 などの 10 進数に設定すると、85% の不透明度に変換され、色はわずかに透明になります。
色の値を防弾したい場合は、次の CSS コードをコピーします。
p {
色: #2f5687;
色: rgba(47,86,135,1);
}
この構文は、最初に 16 進コードを設定し、次にその値を RGBA 番号で上書きします。これは、RGBA をサポートしていない古いブラウザーは最初の値を取得し、2 番目の値を無視することを意味します。
color プロパティは、CSS のすべての HTML テキスト要素で機能することに注意してください。たとえば、すべてのリンクの色を変更できます。この例では、リンクを明るい緑色にします:
{
色: #16c616;
}
これは、一度に複数の要素でも機能します。すべてのタイトル レベルを同時に設定できます。たとえば、これはすべてのタイトル要素を真夜中の青色に設定します。
h1, h2, h3, h4, h5, h6 {
色: #020833;
}
色の 16 進値または RGBA 値を考え出すのは、必ずしも簡単ではありません。ほとんどの Web デザイナーは、Photoshop や GIMP などの画像編集プログラムを使用して正確なコードを生成します。次のような便利なカラー ピッカー ツールをオンラインで見つけることもできます。 これはw3schoolsから .
HTML ページをスタイルするその他の方法
フォントの色は、外部スタイル シート、内部スタイル シート、または HTML ドキュメント内のインライン スタイルで変更できます。ただし、ベスト プラクティスでは、CSS スタイルに外部スタイル シートを使用する必要があります。
ドキュメントの「ヘッド」に直接記述されるスタイルである内部スタイル シートは、通常、小さな 1 ページの Web サイトにのみ使用されます。インライン スタイルは、何年も前に扱った古い 'font' タグに似ているため、避ける必要があります。これらのインライン スタイルでは、インライン スタイルのすべてのインスタンスでフォント スタイルを変更する必要があるため、フォント スタイルの管理が非常に困難になります。