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

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

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

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

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

私自身も、あまり使うことがないので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のタグや属性、要素について曖昧な場合は以下のページを参考にしてください。

 

 

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

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

 

Advertisement

 

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

 

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

 

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

 

div開始タグにstyle属性を記述してイコールとコロンの順で記述します。そして””の中にstyle属性の値として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;
  }

 

Advertisement

 

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

 

 

これまでの説明ですでに理解できている方もいるかと思いますが、style属性はHTML文書内にマークアップしてるタグに直接style属性を記述する使い方をするため、そのスタイル設定は「指定対象だけ」に限られます。

 

Advertisement

 

style属性でCSSを記述する流れで単純なボックスを作成してみましたが、実際にHTMLのstyle属性について理解できたことが二つあります。

 

  • HTMLコードが見づらくなる
  • 記述が大変

 

というデメリットを発見できてしまいました。

HTMLのstyle属性を使用する一つの疑問

 

実際にstyle属性を使ってCSSを記述してみると「HTMLがごちゃごちゃして見づらい」「HTML文書内でCSSを書くのが大変」というstyle属性のデメリットまで理解できてしまいましたが、まさかデメリットばかりなのでは?という疑問が湧きます。

少し調べてみました。

調べた結果は人それぞれの使用目的や考え方によりますが、メリットにもなりデメリットにもなる場合があるということです。

 

style属性を使ってCSSを記述するということは、1つのリクエストでHTMLとスタイルをまとめて送ることになります。そのため通信コストが減り、ブラウザのレンダリングパフォーマンスが良くなるメリットがあります。

そして外部ファイル化していないのでキャッシュによる表示の崩れがおこらない。

だからと言ってHTMLページ全てstyle属性でCSSを記述していたら時間がかかりすぎて投げ出したくなる上にソースが複雑でごちゃごちゃになり再利用やメンテナンスが困難になるというデメリットと共に負の連鎖に突入します。

 

Advertisement

 

なんかstyle属性に対しての気持ちが微妙になってきましたが、私なりの疑問の答えは以下です。

 

  • 通信コストが減るからとstyle属性を多用しない
  • 多用するとHTMLがごちゃごちゃするから部分的に使用する

 

やはりstyle属性でCSSを書くのはHTML文書の中で部分的に長くならない記述のために使用することを目的とするのが私の疑問に対しての答えでした。

 

HTMLのstyle属性でCSSを記述する場面

 

HTMLのstyle属性でCSSを記述する使い方はどんな場面があるのか考えました。

style属性でCSSを書くのはHTML文書の中で部分的に記述のために使用することを目的とする。そしてレンダリングパフォーマンスが良くなるということを考えると、Webページを表示するファーストビューに関わるCSSだけをインラインにしてみるという場面に活躍してくれそうなHTMLのstyle属性です。

そのほかには単純にWebページの中で一時期だけ表示する要素とスタイルなら、わざわざ外部ファイルに記述しないで、HTML文書内でまとめて作成という場面でも役立つstyle属性になってくれそうです。

求人とかイベントなどの部分に使えそうです。

もしくは本日の占いとか?

 

 

 

HTMLカテゴリの最新記事