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

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

HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。

style属性の基本

style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。

構文

style属性の基本的な構文は次のとおりです。

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

それでは、実際にHTMLのstyle属性を使ったサンプルを見てみましょう。

サンプルコード

以下の例では、<ol>要素（番号付きリスト）にstyle属性を指定し、文字サイズを1.2rem、フォントを太字に設定しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML style Demo</h1>
<p>List of subjects: </p>
<ol style="font-size:1.2rem;font-weight:bold;">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Biology</li>
<li>Economics</li>
</ol>
</body>
</html>

実行結果

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

style属性を使う際の注意点

  • インラインスタイルは特定の要素にのみ適用されるため、スタイルの再利用性が低くなります。規模の大きなサイトでは、外部CSSファイルや<style>タグでの一元管理が推奨されます。
  • style属性で指定したスタイルは、セレクタによる通常のCSSルールより優先度（詳細度）が高く、上書きされにくくなります。ただし、!importantが付いた宣言には劣ります。
  • 見た目と構造を分離する観点から、装飾はなるべくCSS側にまとめ、style属性は動的なスタイル変更など限定的な場面で使うのがベストプラクティスです。
  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以