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でスタイルを適用したい要素の開始タグに使う「属性」です。HTMLファイルにCSSを記述する<style>タグと間違えないようにします。
また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の書き方に使用するプロパティと値を使います。
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属性を指定します。ついでに文字をセンターに配置しています。
これまでの説明ですでに理解できている方もいるかと思いますが、style属性はHTML文書内にマークアップしてるタグに直接style属性を記述する使い方をするため、そのスタイル設定は「指定対象だけ」に限られます。
style属性でCSSを記述する流れで単純なボックスを作成してみましたが、実際にHTMLのstyle属性について理解できたことが二つあります。
- HTMLコードが見づらくなる
- 記述が大変
というデメリットを発見できてしまいました。
HTMLのstyle属性を使用する一つの疑問
実際にstyle属性を使ってCSSを記述してみると「HTMLがごちゃごちゃして見づらい」「HTML文書内でCSSを書くのが大変」というstyle属性のデメリットまで理解できてしまいましたが、まさかデメリットばかりなのでは?という疑問が湧きます。
少し調べてみました。
調べた結果は人それぞれの使用目的や考え方によりますが、メリットにもなりデメリットにもなる場合があるということです。
style属性を使ってCSSを記述するということは、1つのリクエストでHTMLとスタイルをまとめて送ることになります。そのため通信コストが減り、ブラウザのレンダリングパフォーマンスが良くなるメリットがあります。
そして外部ファイル化していないのでキャッシュによる表示の崩れがおこらない。
だからと言ってHTMLページ全てstyle属性でCSSを記述していたら時間がかかりすぎて投げ出したくなる上にソースが複雑でごちゃごちゃになり再利用やメンテナンスが困難になるというデメリットと共に負の連鎖に突入します。
なんかstyle属性に対しての気持ちが微妙になってきましたが、私なりの疑問の答えは以下です。
- 通信コストが減るからとstyle属性を多用しない
- 多用するとHTMLがごちゃごちゃするから部分的に使用する
やはりstyle属性でCSSを書くのはHTML文書の中で部分的に長くならない記述のために使用することを目的とするのが私の疑問に対しての答えでした。
HTMLのstyle属性でCSSを記述する場面
HTMLのstyle属性でCSSを記述する使い方はどんな場面があるのか考えました。
style属性でCSSを書くのはHTML文書の中で部分的に記述のために使用することを目的とする。そしてレンダリングパフォーマンスが良くなるということを考えると、Webページを表示するファーストビューに関わるCSSだけをインラインにしてみるという場面に活躍してくれそうなHTMLのstyle属性です。
そのほかには単純にWebページの中で一時期だけ表示する要素とスタイルなら、わざわざ外部ファイルに記述しないで、HTML文書内でまとめて作成という場面でも役立つstyle属性になってくれそうです。
求人とかイベントなどの部分に使えそうです。
もしくは本日の占いとか?