目次:
ビデオ: [ JavaScript ] 基本中の基本のハンズオン / HTML, CSS へのアウトプット編 [ 実況プログラミング / 解説あり ] 2025
HTML5ページ内の特定のタイプのすべての要素にスタイルを簡単に適用できますが、スタイルをより細かく制御したい場合もあります。たとえば、複数の段落スタイルが必要な場合があります。例として、クラスを見てください。 htmlページ。
もう一度、このページに複数の書式があります。
-
質問にイタリックサンセリフという大きなフォントがあります。 複数の質問があります。
<！ - 1 - > -
回答は小さく、青色で、筆記体で表示されます。 複数の回答もあります。
質問と回答はすべて段落であるため、2つの異なるスタイルが必要であるため、単に段落のスタイルを設定することはできません。複数の質問と複数の回答があるため、IDのやりとりは問題になります。 2つの異なる要素が同じIDを持つことはできません。これは、クラスの概念が作用するところです。すべてのIDは単一の要素に属しますが、多くの要素が同じクラスを共有できます。
<！ページにクラスを追加する方法
CSSでは、HTMLでクラスを定義し、クラス全体に適用されるスタイル定義を作成できます。これは次のように動作します。
-
HTMLの質問にclass属性を追加します。
IDとは異なり、いくつかの要素が同じクラスを共有できます。質問をするようにクラスを設定すると、これらの段落は質問になります：
北極にはどのような牛が住んでいますか？
<！ - 9 - > -
答えのクラスを設定して、同様のクラス属性を回答に追加します。
Eskimoo！
これで段落の2つの異なるサブクラスがあります：質問と回答。
-
質問のためのクラススタイルを作成します。
クラススタイルはCSSで定義されています。クラス名の前にピリオド（。）を付けたクラスを指定します。クラスは、
のようにCSSで定義されています。質問{font：italic 150％arial、サンセリフ; text-align：left;}この場合、質問クラスは左側に並んだ大きなサンセリフフォントとして定義されます。
-
解答の外観を定義します。
クラスは、右寄せの筆記フォントを使用します。
。答え{font：120％ "Comic Sans MS"、筆記体; text-align：right; color：#00F;}
クラスの使用
CSSクラスの使用方法を示すこのコードは、
クラスです。 html。質問{font：italic 150％arial、サンセリフ; text-align：left;}答え{font：120％ "Comic Sans MS"、筆記体; text-align：right; color：#00F;}
好きな冗談
北極にはどのような牛が住んでいますか？
エスキモー！
犬の家の上には何がありますか？
怪物！
pのようなセレクタが表示されることがあります。要素名とクラス名の両方を含む空想の
このスタイルは、クラスが添付された段落にのみ適用されます。一般的に、クラスはあらゆる種類のものに適用できるのでクラスは素晴らしいので、エレメント名をそのまま残してスタイルをできるだけ再利用できるようにすることができます。
クラスの結合
1つの要素で複数のクラスを使用できます。
段落は3つの異なるスタイルで表示されますが、赤とスクリプトのみが定義されています。 3番目の段落は両方のクラスを使用します。コードは次のとおりです：
redScript。 html。赤い{色：白;背景色：赤;}
この段落では、赤いクラスを使用します。
この段落はスクリプトクラス
を使用します。この段落は両方のクラスを使用します。
スタイルシートには2つのクラスがあります。赤色のクラスは段落を赤色にします（赤色の背景を持つ白いテキスト）。スクリプトクラスは筆記体フォントを要素に適用します。
最初の2つの段落にはそれぞれクラスがあり、クラスは期待どおりに動作します。興味深い部分は3つの段落です。なぜなら2つのクラスがあるからです。
両方のスタイルが要素に書かれた順序で適用されます。両方のクラス名が引用符で囲まれ、コンマは必要ない（または許可されていない）ことに注意してください。必要に応じて、要素に2つ以上のクラスを適用できます。クラスに競合するルールがある場合（たとえば、要素が緑色になり、次の要素が青色になります）、リストの最新のクラスは以前の値を上書きします。
要素はIDを持つこともできます。 IDスタイル、要素スタイル、およびすべてのクラススタイルは、ブラウザがオブジェクトを表示しようとするときに考慮されます。
通常は、クラスの意味（mainBackgroundColorなど）に基づいてクラスを指定するのが最善です。あなたは緑が赤より優れていると判断するかもしれないので、クラス名を変更するか、緑色に色付けされた赤いクラスを持っていなければなりません。それは変だ。
