CSSでは、ドキュメント内のテキストの色を簡単に設定できます。 ページ上の段落を特定の色でレンダリングするには、外部スタイルシートでその段落を指定するだけで、ブラウザは選択した色でテキストを表示します。 テキストの段落内のただ1つの単語（あるいはたぶんわずかな単語）の色を変更したいときはどうなりますか？ そのためには、タグのようなインライン要素を使用する必要があります。
最終的には、文章内の単一の単語や小さなグループの単語の色を変更することはCSSを使用して簡単で、 タグは有効なHTMLであるため、これが何らかのハックであることを心配しないでください。 このアプローチでは、廃止されたタグや、過去のHTML時代の製品である「フォント」などの属性の使用を避けることもできます。
この記事は、HTMLとCSSの新しい可能性のあるWeb開発者を対象としています。 HTMLタグとCSSを使用してページ上の特定のテキストの色を変更する方法を学ぶのに役立ちます。 つまり、この方法にはいくつかの欠点があります。これについては、この記事の最後で説明します。 今のところ、このテキストの色を変更する手順を学ぶためにお読みください！ それは非常に簡単で約2分かかります。
ステップバイステップの指示
- お気に入りのテキストHTMLエディタで、更新したいWebページを開きます。 これは、 Adobe Dreamweaverのようなプログラムでも、メモ帳、メモ帳++、テキストエディットなどのテキストエディタでもかまいません。
- ドキュメントでは、ページ上の異なる色で表示する単語を探します。 このチュートリアルでは、テキストの大きな段落内にあるいくつかの単語を使用できるようにします。 そのテキストはタグのペアに含まれます。 色を編集したい2つの単語のうちの1つを探します。
- 色を変更する単語または単語グループの最初の文字の前にカーソルを置きます。 DreamweaverのようなWYSIWYGエディタを使用している場合は、コードビューで作業していることを覚えておいてください。
- 色を変更したいテキストを、クラス属性を含めてタグで囲みましょう。 段落全体は次のようになります。これは、文章の中で重視されるテキストです。
- 特定のテキストにCSSで使用できる "フック"を付けるために、インライン要素、を使用しました。 次のステップは、外部CSSファイルにジャンプして新しいルールを追加することです。
- 私たちのCSSファイルで、次のものを追加しましょう：
- .focus-text {
- 色：＃F00;
- }
- このルールは、赤色で表示するインライン要素、を設定します。 文書のテキストを黒に設定する以前のスタイルを使用していた場合、このインラインスタイルでは、スパンテキストにフォーカスを当てて別の色で目立たせることになります。 このルールに他のスタイルを追加することもできます。おそらく強調するにはイタリック体または太字にします。
- あなたのページを保存してください。
- あなたのお気に入りのWebブラウザでページをテストして 、変更を確認してください。
- また、に加えて、一部のWebプロフェッショナルは、タグまたはタグのペアのような他の要素を使用することを選択します。 これらのタグは、以前は「太字」と「イタリック」に使用されていましたが、非推奨であり、およびで置き換えられました。 タグは現代のブラウザではまだ機能していますが、多くのWeb開発者がインラインスタイルのフックとして使用しています。 これは最悪のアプローチではありませんが、非推奨の要素を避けたい場合は、このようなスタイルのニーズにタグを貼り付けることをお勧めします。
気をつけるヒントやもの
このアプローチは、小さなスタイリングのニーズにはうまくいきますが、ドキュメント内の小さなテキストを1つだけ変更する必要がある場合など、すぐに制御が外れることがあります。 ページにインライン要素が散在していることが判明した場合は、CSSファイル内で使用している独自のクラスがあります。間違っている可能性があります。これらのタグがページ内に多く存在するほど、そのページを今後も維持することになりそうです。 さらに、 良いWebタイポグラフィでは、ほとんどのページで色のバリエーションが変わります。