HTMLタグにstyle属性の指定方法 style=

スタイルシートは外部に「.cssファイル」を作成して独立させるのが一般的です。
けれども、その箇所にだけスタイルを適用する場合には、htmlタグにstyle属性を指定して直接スタイルシートを記述することができます。

例えば、見出しタグのh1を赤色にしたい場合、通常は外部にスタイルシートを作成して以下のよう指定します。


・htmlファイル側での記述例

<h1>見出し</h1>

・スタイルシート側での記述例

h1 {color:#ff0000;}


これで見出しタグのh1の箇所が赤くなります。

この外部スタイルシートに記述するのが面倒くさい場合、以下のようにhtmlタグにstyle属性を指定して、直接そのまま記述することができます。


・htmlファイル側での記述例

<h1 style="color:#ff0000;">見出し</h1>


どちらで記述しても同じように表示されます。

■style属性は携帯サイトで使用されることが多い

このstyle属性は、スタイルシートを使えるPCサイトではあまり使われることがありません。けれども、携帯サイト(ガラケー)のように、外部スタイルシートを使えない環境ではこのstyle属性が頻繁に使用されています。

■<font>タグは非推奨

上記のようなスタイルシートを使用する方法のほか、フォントの大きさや色彩を指定する<font>というhtmlタグも存在します。このhtmlタグを用いて記述するとすれば、以下のようになります。

<h1><font color="#ff0000">見出し</font></h1>

けれども、この<font>タグはhtml5では既に廃止されており、非推奨となっております。この<font>タグは使わずに、上記のようにスタイルシートを使用するようにしましょう。

<div>要素でのstyle属性の使用例

同じように、段落に指定したい場合には、<p style="color:#ff0000;">を、div要素に使いたい場合には<div style="color:#ff0000;">などと記述します。

文字の色だけではなく、paddingやmarginなども指定できます。

例えば、以下のようなdiv要素があったとします。


・htmlファイル側での記述例

<div class="sample">サンプル</div>

・スタイルシート側での記述例

.smaple {
color:#ff0000;
padding-top:10px;
margin-bottom:10px;
}


これをstyle属性を使い、htmlタグにそのまま記述する場合は以下のようになります。


・htmlファイル側での記述例

<div style="color:#ff0000;padding-top:10px;margin-bottom:10px;">サンプル</div>


ただ、このようにhtmlファイルに直接記述するとごちゃごちゃしてしまいますので、できるだけ、スタイルシートを外部化して作成することをおすすめします。

もし使うとすれば、携帯サイトなどCSSを外部化できない環境での使用になるかと思います。あるいは、サイト内のたった1か所にのみデザインを適用させたい場合など、いちいちスタイルシート側で指定していたら.cssファイル自体が長くなってしまい、サイト全体の読み込み速度に影響しそうな場合などに限定して使用するとよいでしょう。

ちなみに、div要素はブロック要素ですのでその前後で改行されてしまいますが、その文字にだけ適用させたい場合には<span style="">を使うと便利です。

<span style="">の詳細についてはこちらのページをご参照ください。
span styleで文字色と背景色の指定方法