HTMLのstyle属性の使い方をCSSを記述しながら理解する

HTML文書の中に直接CSSを書く方法にはstyle属性を使用して要素のスタイルをインラインcssでデザインする方法があります。

現在主流なのは外部ファイルで記述したCSSを読み込んでHTMLページのスタイルを整えることの方が多いためHTMLのstyle属性で直接cssを記述する場面は少ないです。

ですが使用頻度の少ないHTMLのstyle属性でも、使い方を覚えて理解しておくことはCSSの書き方の一つとして知っておくべきことだと思えます。

私自身も、あまり使うことがないのでHTMLのstyle属性の使い方をCSSを記述しながら理解しておこうと思います。

1. HTMLのstyle属性とは
2. HTMLにCSSを埋め込むstyle属性の使い方
3. style属性とCSSを記述しながら理解を深める
4. HTMLのstyle属性を使用する一つの疑問
5. HTMLのstyle属性でCSSを記述する場面

HTMLのstyle属性とは

HTMLのstyle属性はHTMLページで目的の要素内の開始タグの中でCSSを記述し、直接スタイルを適用することができる属性です。

たとえばHTMLの<div>タグを使用してる要素にstyle属性を記述するなら以下のようにします。

<div style="css記述場所">テキスト</div>

style属性をdivタグの開始タグのあとに半角スペースにしてstyle=””と記述します。記述したstyle属性によりdiv要素は、これからstyle=””の「””」ダブルクォーテーションの間にCSSを書くことができます。

style属性はあくまでもCSSでスタイルを適用したい要素の開始タグに使う「属性」なので<style>タグと間違えないようにします。

HTMLのタグや属性、要素について曖昧な場合は以下のページを参考にしてください。

HTMLの基本的な書式や階層関係を理解する

style属性は上記で説明したようにHTML文書の中の要素に直接CSSを記述してHTMLとCSSが「ひと繋がり」になります。

インラインCSSとかインラインスタイルという用語を聞いたことがあるかと思います。インラインは「直列の、一列に並んだ」という意味があり、今回のstyle属性でいえばHTML文書内の目的のタグにstyle属性を埋め込んで要素とCSSが一列に並ぶようにする使い方がインラインになっているという解釈や理解ができるかと思います。

HTMLにCSSを埋め込むstyle属性の使い方

実際にCSSを埋め込んでいく使い方はCSSをHTMLのstyle属性の値として指定します。style属性でCSSを記述したサンプルをdiv要素で作ったのが以下のHTMLです。

<div style="border: 2px solid #dfff1c">テキスト</div>

div開始タグにstyle属性を記述してイコールとコロンの順で記述します。そして””の中にstyle属性の値としてCSSを書きます。

上のサンプルコードで理解できるかと思いますが、このときのCSS自体は基本的なCSSの書き方に使用するプロパティと値を使います。

CSSの基本的な書き方「セレクタ」「プロパティ」「値」を理解する

style属性の場合にセレクタはHTMLタグに直接埋め込んでいるので記述する必要がありません。その目的のタグがセレクタになるからです。

<div style="margin: 20px auto;border: 5px solid #dfff1c;padding: 10px;width: 300px;max-width: 100%;">テキスト</div>

また、style属性でCSSを「複数」指定するときは一つ一つのCSSを「;」セミコロンで区切ります。

style属性で指定するCSSが複数になる場合、記述するコードが見づらくなってしまうのが少し残念に思えてしまいます。

ちょっとstyle属性を外部CSSの記述と似たように記述してみました。

 /*インライン*/
　<div style="
  margin: 20px auto;
  border: 5px solid #dfff1c;
  padding: 10px;
  width: 300px;
  max-width: 100%;
  text-align: center;
  ">テキスト</div>

　/*外部css*/
  div　{
  margin: 20px auto;
  border: 5px solid #dfff1c;
  padding: 10px;
  width: 300px;
  max-width: 100%;
  text-align: center;
  }

外部CSSの記述と比べると少し理解しやすくなったかもしれません。セレクタの部分が違う書き方になってるだけですね。

style属性とCSSを記述しながら理解を深める

次は実際にCSSを記述しながらHTMLでマークアップした要素にCSSを埋め込んでstyle属性の使い方の理解を深めたいと思います。

HTML文書内で要素にstyle属性を指定し、CSSを埋め込んでボックスを作ってからボックスの中のサイズや色をCSSで記述し整えていく簡単な流れです。

HTML文書内にCSSを埋め込んでボックスを作る

<div>
　<p>style属性でcssを埋め込む</p>
</div>

上記のHTMLは親要素をdiv、子要素をpでマークアップしたサンプルコードです。この要素にstyle属性を記述してCSSを埋め込みボックスを作ります。

<div style="border: 5px solid #dfff1c;margin: 20px auto;padding: 5px;width: 200px;max-width: 100%;">
　<p>style属性でcssを埋め込む</p>
</div>

親要素のdivでボックスを作成して子要素の文章を囲うので、divタグにstyle属性を指定してstyle属性の値にボックスを作るCSSを記述します。

ボーダーの色とサイズ指定をしてから、マージンは上下20px、横は中央寄せ、パディングで5px分のスペース、そしてボックスの横幅200pxにしています。max-width:100%はボックスが伸縮するようにです。

ただ記述場所がHTML文書内で目的の要素にstyle属性の記述とCSSを直書きしてることが外部ファイルにしたCSSと違う部分というだけで、CSS自体は同じです。

一応、外部CSSで記述した同じCSSは以下です。

div {
    border: 5px solid #dfff1c;
    margin: 20px auto;
    padding: 5px;
    width: 200px;
    max-width: 100%;
}

この時点のstyle属性で指定したCSSが適用されるボックスの表示は以下のようになります。

CSSを埋め込んでボックスの背景色を変える

次は親要素に適用できたボックスのdivに、ボックスの背景色を追加します。

<div style="border: 5px solid #dfff1c;margin: 20px auto;padding: 5px;width: 200px;max-width: 100%;background: #22c4b7;">
　<p>style属性でcssを埋め込む</p>
</div>

CSSはbackgroundプロパティを指定して値にカラー値を指定。親要素のdivボックスの背景色にするのでdivのstyle属性を記述してcssを書いている最後にbackground:#22c4b7;を記述して色をグリーンにしています。

要素に直接記述している最後にはセミコロンを付けなくても適用できます。個人的には後々に追加することもあるかもしれないのでセミコロンは使うようにしています。

背景色も適用された実際のボックス表示は以下です。

文字色はstyle属性を子要素に指定

次に子要素の<p>で文章にしている部分の文字色を指定します。

<div style="border: 5px solid #dfff1c; margin: 10px auto; padding: 5px; width: 200px; max-width: 100%; background: #22c4b7;">
　<p style="color: tomato; text-align: center;">style属性でcssを埋め込む</p>
</div>

style属性のcss記述方法は、しっかりとスタイルを適用させる要素ごとにstyle属性を記述します。上のコードなら子要素の<p>タグが使われている文章の文字色を指定するのでpタグにstyle属性を指定します。ついでに文字をセンターに配置しています。