HTML 入門 | HTML 基本要素 | HTML スタイル(style)

Tags:

HTML 要素の style 属性(attribute)を使用すると、CSS スタイルを HTML 要素に直接設定できる。 ただし、このように style 属性を指定すると、スタイルは 1 つの HTML 要素にだけ適用される。

構文

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

背景色の変更

次の例は、style 属性を使用して背景色を変更する例である。

<div style="background-color:yellow">
    style 属性を使用した背景色の変更
</div>

コード実行

文字色の変更

次の例は、style 属性を使用して文字色を変更する例である。

<div style="color:blue">
    style 属性を使用した文字色の変更
</div>

コード実行

文字サイズの変更

次の例は、style 属性を使用して文字サイズを変更する例である。

<div style="font-size:150%">
    style 属性を使用した文字サイズの変更
</div>

コード実行

段落の配置変更

次の例は、style 属性を使用して段落の配置を変更する例である。

<div style="text-align:center">
    style 属性を使用した段落配置の変更
</div>

コード実行

複数スタイルの変更

style 属性を使用すると、複数の CSS スタイルを一度に適用できる。

<div style="background-color:yellow; color:blue; font-size:150%; text-align:center">
    style 属性を使用した複数の変更
</div>

コード実行

style 属性値で使用する CSS プロパティ(property)とプロパティ値は、セミコロン(;)で区切る。

CSS プロパティを 1 つだけ使用する場合や、複数の CSS プロパティのうち最後の CSS プロパティでは、セミコロン(;)を省略できる。