【HTML Living Standard】style要素の使い方
style要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
styleオブジェクトは、HTMLドキュメント内にCSSスタイルシートを直接埋め込むための要素を表すオブジェクトです。この要素は、ウェブページの見た目やレイアウトを定義するCSSルールを、HTMLファイル内に直接記述する際に使用されます。通常、HTMLファイルの<head>セクション内に配置され、ページ全体のスタイルを統一したり、特定の要素のデザインを制御したりする役割を担います。
外部のCSSファイルを読み込むlink要素とは異なり、styleオブジェクトは一つのHTMLファイル内でスタイル情報を完結させることが可能です。これにより、特定のウェブページにのみ適用したい一時的なスタイルや、JavaScriptによって動的に生成されるスタイルを定義する際に特に便利です。
style要素の内部には、セレクタ、プロパティ、値を組み合わせたCSSルールを記述します。例えば、見出しの色や段落のフォントサイズ、画像のマージンなどを詳細に設定できます。また、media属性を用いることで、スタイルを適用するメディアの種類（例：スクリーン表示、印刷、モバイルデバイスなど）を限定することが可能です。type属性はスタイルシートの言語を指定しますが、CSSが標準であるため、通常はtext/cssがデフォルト値として扱われます。ウェブページの視覚的な表現力を高め、ユーザーエクスペリエンスを向上させる上で不可欠な要素です。
公式リファレンス: <style>: The Style Information element
構文(syntax)
1<style> 2 /* CSSスタイルルールをここに記述します */ 3 body { 4 font-family: sans-serif; 5 color: #333; 6 } 7 h1 { 8 color: blue; 9 } 10</style>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません