【HTML Living Standard】style要素の使い方
style要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
styleオブジェクトは、HTMLドキュメント内にCSSスタイルシートを直接埋め込むための要素を表すオブジェクトです。この要素は、ウェブページの見た目やレイアウトを定義するCSSルールを、HTMLファイル内に直接記述する際に使用されます。通常、HTMLファイルの<head>セクション内に配置され、ページ全体のスタイルを統一したり、特定の要素のデザインを制御したりする役割を担います。
外部のCSSファイルを読み込むlink要素とは異なり、styleオブジェクトは一つのHTMLファイル内でスタイル情報を完結させることが可能です。これにより、特定のウェブページにのみ適用したい一時的なスタイルや、JavaScriptによって動的に生成されるスタイルを定義する際に特に便利です。
style要素の内部には、セレクタ、プロパティ、値を組み合わせたCSSルールを記述します。例えば、見出しの色や段落のフォントサイズ、画像のマージンなどを詳細に設定できます。また、media属性を用いることで、スタイルを適用するメディアの種類（例：スクリーン表示、印刷、モバイルデバイスなど）を限定することが可能です。type属性はスタイルシートの言語を指定しますが、CSSが標準であるため、通常はtext/cssがデフォルト値として扱われます。ウェブページの視覚的な表現力を高め、ユーザーエクスペリエンスを向上させる上で不可欠な要素です。
構文(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)
戻り値なし
戻り値はありません
サンプルコード
HTML style 直書きでスタイルを適用する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Style要素の直書きサンプル</title> 7 <!-- 8 <style>要素は、HTMLドキュメント内に直接CSSスタイルを記述するために使用されます。 9 一般的には<head>タグ内に配置され、このドキュメント全体または一部の要素にスタイルを適用します。 10 --> 11 <style> 12 /* ここにCSSコードを記述します */ 13 body { 14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* フォントを指定 */ 15 background-color: #e0f2f7; /* ボディの背景色を設定 */ 16 color: #333333; /* ボディの文字色を設定 */ 17 margin: 0; 18 padding: 20px; 19 } 20 21 h1 { 22 color: #0056b3; /* h1要素の文字色を設定 */ 23 text-align: center; /* h1要素を中央揃えに */ 24 margin-bottom: 30px; 25 } 26 27 p { 28 background-color: #ffffff; /* p要素の背景色を設定 */ 29 border: 1px solid #b3e5fc; /* p要素に枠線を追加 */ 30 padding: 15px; /* p要素の内側の余白を設定 */ 31 margin: 10px auto; /* p要素の外側の余白を設定し、中央寄せ */ 32 max-width: 600px; /* p要素の最大幅を設定 */ 33 box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* p要素に影を追加 */ 34 line-height: 1.6; /* 行の高さを設定 */ 35 } 36 37 .highlight { 38 color: #d32f2f; /* .highlightクラスが適用された要素の文字色を変更 */ 39 font-weight: bold; /* 文字を太字に */ 40 } 41 </style> 42</head> 43<body> 44 <h1>HTML Style要素の直書き例</h1> 45 <p> 46 この段落は、<code><head></code>タグ内に直接記述された 47 <code><style></code>要素内のCSSによってスタイルが適用されています。 48 </p> 49 <p> 50 背景色、文字色、フォント、余白などが、このHTMLファイルに<span class="highlight">直接埋め込まれたCSS</span>で定義されています。 51 外部ファイルを用意することなく、手軽にスタイルを適用できる方法です。 52 </p> 53</body> 54</html>
HTMLの<style>要素は、ウェブページの見た目を定義するCSS（Cascading Style Sheets）のコードを、HTMLドキュメント内に直接記述するために使用されます。この要素は通常、HTMLファイルの<head>タグ内に配置され、そのHTMLドキュメント全体、または特定の要素に対してスタイルを適用します。リファレンス情報にあるように、<style>要素自体には引数や戻り値はありません。これは、<style>要素がプログラム関数のように特定の入力を受け取ったり、結果として値を返したりする役割ではなく、あくまでCSSコードを格納するための領域として機能するためです。
このサンプルコードでは、<body>要素のフォントや背景色、<h1>要素の文字色や配置、<p>要素の背景色、枠線、余白、影などのスタイルが、<style>タグ内に直接記述されたCSSによって定義されています。キーワードである「直書き」とは、外部のCSSファイルを読み込むのではなく、HTMLファイル自体にCSSコードを埋め込む手法を指します。この方法は、外部ファイルを用意することなく、手軽に少量のスタイルを適用したい場合や、単一のHTMLファイルで完結させたい場合に便利です。例えば、段落の背景色や文字色、フォントなどが、このHTMLファイルに直接書かれたCSSによって設定されていることが確認できます。
このサンプルコードは、HTMLドキュメント内に直接CSSを記述する<style>要素の利用例です。手軽にスタイルを適用できる利点がありますが、初心者の方はその特性を理解しておくことが重要です。複数のHTMLファイルで共通のスタイルを使用する場合、各ファイルに同じCSSを記述することになり、更新や管理が煩雑になります。そのため、HTMLとCSSの役割を分離し、外部CSSファイルを<link>タグで読み込む方法が、一般的に推奨されるベストプラクティスです。<style>要素は、特定のページにのみ適用したいスタイルや、ごく小規模な場合での利用に限定するのが適切です。また、ウェブページの表示崩れを防ぐため、原則として<head>タグ内に配置してください。
HTML styleタグでCSSを記述してスタイルを適用する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML styleタグのサンプル</title> 7 8 <!-- 9 <style>タグは、HTMLドキュメント内に直接CSS（カスケーディングスタイルシート）を記述するために使用されます。 10 このタグ内に書かれたCSSは、現在のHTMLドキュメント内の要素にスタイルを適用します。 11 通常は<head>要素内に配置されます。 12 --> 13 <style> 14 /* h1要素の文字色を青色に設定します */ 15 h1 { 16 color: #0000FF; /* 青色 */ 17 } 18 19 /* p要素の文字色を緑色に、背景色を薄い黄色に設定します */ 20 p { 21 color: #008000; /* 緑色 */ 22 background-color: #FFFFE0; /* 薄い黄色 */ 23 padding: 10px; /* 内側の余白 */ 24 border: 1px solid #ccc; /* 枠線 */ 25 } 26 </style> 27</head> 28<body> 29 <h1>スタイルが適用された見出し</h1> 30 <p>この段落には、styleタグ内で定義されたCSSによって文字色（緑色）と背景色（薄い黄色）が適用されています。</p> 31 <p>styleタグを使うことで、外部CSSファイルを用意することなく、簡単に要素の見た目を変更できます。</p> 32</body> 33</html>
HTMLの<style>タグは、HTMLドキュメント内に直接CSS（カスケーディングスタイルシート）を記述するために使用されます。これにより、HTML要素の見た目（文字色、背景色、配置、サイズなど）を定義し、Webページの視覚的な表現を制御できます。このタグは通常、HTMLドキュメントの<head>要素内に配置され、そのドキュメント全体に対してスタイルを適用します。<style>タグ自体には特定の引数や戻り値はありません。
提供されたサンプルコードでは、<style>タグ内にh1要素とp要素に対するCSSが記述されています。h1要素にはcolor: #0000FF;と設定されており、これによりページ内のすべての見出しが青色の文字で表示されます。p要素にはcolor: #008000;で文字色が緑色に、background-color: #FFFFE0;で背景色が薄い黄色に、さらにpaddingで内側の余白が、borderで枠線がそれぞれ設定されています。これらの定義により、HTMLドキュメント内の対応する段落要素に指定されたスタイルが適用され、その見た目が変化していることがわかります。
このように<style>タグを利用することで、外部のCSSファイルを用意することなく、手軽にHTML要素のスタイルを制御することができます。これは、特定のHTMLドキュメント内で一時的にスタイルを適用したい場合や、簡単なスタイリングを行う際に非常に便利です。
<style>タグは、HTMLドキュメント内で直接CSSを記述し、要素の見た目を変更するために使用します。通常は<head>要素内に配置し、記述されたスタイルはそのHTMLファイル全体に適用されます。
初心者は、手軽さからこのタグを使いがちですが、CSSの記述量が増えるとHTMLが読みにくくなり、コードの管理が複雑になる点に注意が必要です。スタイルが多くのページで共通であったり、複雑になったりする場合は、CSSを外部ファイルとして分離し、<link>タグでHTMLに読み込む方法を推奨します。これにより、HTMLとデザインの役割が明確に分かれ、コードの可読性と保守性が向上します。また、複数のスタイル定義がある場合の適用順序、いわゆる優先順位も考慮に入れる必要があります。