HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのstyle属性とは？インラインCSSの設定方法をわかりやすく解説

HTMLでは、style属性を使用することで、要素に直接CSSスタイルを指定できます。この方法はインラインCSSと呼ばれ、特定の要素だけにスタイルを適用したい場合に便利です。

外部スタイルシートや<style>タグを使わずに、HTMLタグの中に直接記述できるため、簡単なスタイル調整やテストの際によく利用されます。

style属性の基本構文

<タグ名 style = "プロパティ: 値;">

style属性の値には、通常のCSSと同じ形式でプロパティと値を「コロン（:）」で区切って記述します。複数のスタイルを指定する場合は、「セミコロン（;）」で区切ります。

実装例

以下のコードは、style属性を使って段落の文字色を緑色に変更する例です。

<!DOCTYPE html>
<html>
   <body>
      <h2>Tutorialspoint</h2>
      <p>We provide tutorials.</p>
      <p style = "color:green">We provide learning videos.</p>
   </body>
</html>

表示結果

  • 1つ目の段落「We provide tutorials.」はデフォルトの黒色で表示されます。
  • 2つ目の段落「We provide learning videos.」は、style属性によって緑色の文字で表示されます。

複数のスタイルを指定する場合

セミコロンで区切ることで、1つのstyle属性に複数のCSSプロパティをまとめて指定することも可能です。

<p style = "color:green; font-size:18px; font-weight:bold;">
  緑色・太字・18pxのテキストです。
</p>

注意点

インラインCSSは手軽ですが、スタイルがHTML内に散在すると管理が難しくなるため、本格的なWebサイトでは外部スタイルシートの使用が推奨されます。style属性は、簡易的な調整や動的にスタイルを変更したい場面で活用するとよいでしょう。

  1. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ