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でスタイルを適用したい要素の開始タグに使う「属性」です。HTMLファイルに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タグにプロパティと値を直書きしているため、タグがCSSの適用先のセレクタになるからです。

<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を記述しながら理解を深める

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

HTML文書内の要素にstyle属性を記述してから、要素の中のサイズや色を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のボックスにCCSで背景色を適用します。

<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属性の値に直書きしている最後のプロパティの値にはセミコロンを付けなくても適用できますが、個人的には後々にCSSを追加することもあるかもしれないのでセミコロンは使うようにしています。

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

文字色は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属性を指定します。ついでに文字をセンターに配置しています。