Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】style属性の使い方

style属性の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

styleプロパティは、HTML要素に直接スタイル情報(CSS)を適用するために使用されるプロパティです。これはHTMLのすべての要素に指定できる「グローバル属性」の一つであり、要素の見た目を個別に調整する目的で利用されます。例えば、テキストの色、背景色、フォントサイズ、配置など、さまざまな視覚的スタイルを設定できます。

style属性に記述されたCSSは「インラインスタイル」と呼ばれ、その要素にのみ適用されるため、特定の要素に対してピンポイントでスタイルを適用することが可能です。記述は、要素の開始タグ内に style="プロパティ名: 値;" の形式で行います。複数のスタイルを適用する場合は、セミコロンで区切って記述します。

このプロパティは、主に特定の要素に対して一時的にスタイルを適用したい場合や、JavaScriptを用いて動的に要素のスタイルを変更したい場合などに役立ちます。しかし、ウェブサイト全体のデザインを統一したり、多くの要素に共通のスタイルを適用したりする場合には、保守性や再利用性の観点から、外部のCSSファイルやHTMLドキュメントの<head>セクションに記述する<style>要素を使用することが一般的に推奨されます。styleプロパティによるインラインスタイルは、他のスタイル定義よりも高い優先度を持つため、後から外部CSSなどでスタイルを変更しようとした場合に上書きが難しい場合があることにも留意が必要です。

公式リファレンス: HTML style global attribute

構文(syntax)

1<element style="property: value; property: value;">コンテンツ</element>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ