【HTML Living Standard】style属性の使い方
style属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
styleプロパティは、HTML要素に直接スタイル情報（CSS）を適用するために使用されるプロパティです。これはHTMLのすべての要素に指定できる「グローバル属性」の一つであり、要素の見た目を個別に調整する目的で利用されます。例えば、テキストの色、背景色、フォントサイズ、配置など、さまざまな視覚的スタイルを設定できます。
style属性に記述されたCSSは「インラインスタイル」と呼ばれ、その要素にのみ適用されるため、特定の要素に対してピンポイントでスタイルを適用することが可能です。記述は、要素の開始タグ内に style="プロパティ名: 値;" の形式で行います。複数のスタイルを適用する場合は、セミコロンで区切って記述します。
このプロパティは、主に特定の要素に対して一時的にスタイルを適用したい場合や、JavaScriptを用いて動的に要素のスタイルを変更したい場合などに役立ちます。しかし、ウェブサイト全体のデザインを統一したり、多くの要素に共通のスタイルを適用したりする場合には、保守性や再利用性の観点から、外部のCSSファイルやHTMLドキュメントの<head>セクションに記述する<style>要素を使用することが一般的に推奨されます。styleプロパティによるインラインスタイルは、他のスタイル定義よりも高い優先度を持つため、後から外部CSSなどでスタイルを変更しようとした場合に上書きが難しい場合があることにも留意が必要です。
構文(syntax)
1<element style="property: value; property: value;">コンテンツ</element>
引数(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>HTML style属性のサンプル</title> 7</head> 8<body> 9 <h1>HTML style属性の「直書き」サンプル</h1> 10 11 <!-- 12 style属性は、HTML要素に直接CSSスタイルを適用するためのグローバル属性です。 13 「直書き」と呼ばれることもあり、特定の要素にのみスタイルを適用したい場合に便利です。 14 属性値には、CSSのプロパティと値をセミコロンで区切って記述します。 15 --> 16 17 <p style="color: blue; font-size: 18px;"> 18 この段落はstyle属性を使って、テキストの色を青、文字サイズを18pxに設定しています。 19 </p> 20 21 <div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;"> 22 このdiv要素は、背景色、パディング（内側の余白）、境界線をstyle属性で指定しています。 23 </div> 24 25 <span style="font-weight: bold; text-decoration: underline;"> 26 このテキストは太字で下線が引かれています。 27 </span> 28 これは通常のテキストです。 29 30</body> 31</html>
HTMLのstyle属性は、HTML要素に直接CSS（Cascading Style Sheets）のスタイルを適用するためのグローバル属性です。これは、すべてのHTML要素で使用できる共通の属性であることを意味します。
style属性を使用すると、特定のHTML要素に対して、色、文字サイズ、背景、余白などの見た目を個別に指定できます。スタイルをHTMLファイル内に直接記述することから「直書き」とも呼ばれ、特定の要素にのみスタイルを適用したい場合に便利です。
属性値には、CSSのプロパティとその値をコロンで区切り、複数のスタイルはセミコロンで区切って記述します。例えば、「color: blue; font-size: 18px;」のように指定します。
style属性はHTML要素の見た目を設定する属性であり、引数を受け取ったり、戻り値を返したりする関数のような役割は持ちません。属性値を設定することで、その要素の見た目が直接変更される挙動を示します。
サンプルコードでは、<p>要素に文字色とサイズを、<div>要素に背景色、パディング、境界線を、<span>要素に太字と下線をそれぞれstyle属性で直接指定しています。これにより、各要素の表示が個別に制御されていることがわかります。
style属性は、HTML要素に直接CSSスタイルを適用する「直書き」の方法で、非常に高い優先順位でスタイルが適用されます。そのため、外部のCSSファイルや<style>タグで定義したスタイルを意図せず上書きしてしまう可能性がある点に注意が必要です。
この方法は、スタイルと構造が混在し、コードの可読性や保守性を低下させる原因となります。複数の要素に同じスタイルを適用したい場合、一つ一つに記述するのは非効率的で、変更があった際の修正が大変になります。
通常は、HTMLの構造とCSSの装飾を分離し、外部CSSファイルやHTMLドキュメント内の<style>タグでスタイルを定義し、HTML要素にはclass属性やid属性でスタイルを適用することが推奨されます。style属性は、JavaScriptで動的にスタイルを変更する場合や、ごく限定的かつ一時的なスタイル調整に留めるのが良いでしょう。
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>HTML style属性のサンプル</title> 7</head> 8<body> 9 <!-- style属性は、HTML要素に直接インラインでCSSスタイルを適用するために使用されます。 --> 10 <!-- これはグローバル属性であり、ほとんどのHTML要素で使用できます。 --> 11 12 <h1 style="color: blue; text-align: center;">これは青色のセンタリングされた見出しです</h1> 13 14 <p style="font-size: 18px; color: green;">この段落は18ピクセルの緑色のテキストで表示されます。</p> 15 16 <div style="background-color: lightgray; padding: 20px; border: 1px solid gray;"> 17 <p style="color: purple;">このdiv要素の背景は薄い灰色で、内側のテキストは紫色です。</p> 18 <span style="font-weight: bold; color: red;">このテキストは赤色の太字で表示されます。</span> 19 </div> 20</body> 21</html>
style属性は、HTML要素に直接CSS（カスケーディング・スタイル・シート）のスタイルを適用するために使用されるグローバル属性です。この属性を利用することで、Webページの見た目（色、文字の大きさ、配置、背景など）を柔軟に制御できます。style属性は特定の引数を取らず、戻り値もありません。HTML要素の視覚的な表現をその場で変更したい場合に利用します。
サンプルコードでは、style属性がHTML要素の見た目をどのように変更するかを示しています。例えば、<h1>タグにstyle="color: blue; text-align: center;"と記述することで、見出しの文字色を青色にし、内容を中央に配置しています。<p>タグではstyle="font-size: 18px; color: green;"により、段落の文字サイズを18ピクセル、色を緑色に設定しています。
また、<div>タグにはstyle="background-color: lightgray; padding: 20px; border: 1px solid gray;"が適用されており、背景色が薄い灰色になり、内側に20ピクセルの余白（パディング）が追加され、1ピクセルの灰色の実線ボーダーが表示されます。さらに、その<div>内の<p>タグと<span>タグにもそれぞれ異なる文字色や太字のスタイルが個別に適用されています。
このように、style属性を使用すると、個々のHTML要素に対して直接、視覚的なスタイルを細かく指定できるため、特定の要素の見た目を手軽に調整することが可能です。
style属性は、HTML要素に直接CSSスタイルを適用する「インラインスタイル」です。これは手軽に要素の見た目を変更できますが、コードの可読性や保守性を考慮すると、一般的には推奨されません。
HTMLとCSSの記述が混在するため、コードが複雑になりやすく、複数の要素に同じスタイルを適用する場合に重複記述が必要となります。その結果、デザイン変更時の管理が煩雑になる点が注意点です。
安全で効率的なウェブ開発のためには、通常、<head>タグ内に<style>要素を記述するか、または外部のCSSファイルにスタイルをまとめて、class属性やid属性を使って要素に適用することが望ましいです。style属性は、JavaScriptで動的にスタイルを変更する際など、ごく限定的な用途でのみ利用を検討してください。