インラインCSS
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 6/76。
インラインCSSは、style属性を使用してHTML要素に直接CSSスタイルを追加する方法です。この手法により、外部または内部のスタイルシートを必要とせずに、個々の要素に独自のスタイルを適用できます。インラインスタイルは、単一の要素に対して迅速かつ特定のスタイル変更を行うのに役立ちます。
インラインCSSを使用するための基本的な構文は次のとおりです。
<element style="property: value;"></element><element>: スタイルを適用したいHTML要素です。style: CSS宣言を含む属性です。
property: 設定したいCSSプロパティ（例：color、font-size）。value: プロパティに設定したい値（例：blue、16px）。
例えば：
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>この例では、段落要素にテキストの色を青に、フォントサイズを16ピクセルに設定するインラインスタイルが適用されています。これらのスタイルは、この特定の段落要素にのみ適用されます。
チャレンジ
簡単段落要素を持つHTMLドキュメントが与えられます。インラインCSSを使用して、以下のプロパティで段落のスタイルを設定してください：
- テキストの色を "red" に設定します。
- フォントサイズを "18px" に設定します。
やり方については、レッスンの例を確認してください！
チートシート
style属性を使用して、CSSをHTML要素に直接適用します：
<element style="property: value;"></element>複数のプロパティを使用した例：
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
