CSSをHTMLに直接適用する方法

CSSをHTMLに適用する際、headや外部ファイルから読み込むだけでなく、style属性を使用して直接記述する方法があります。
あとあと修正する時に煩雑になりやすいのでぜんぜん推奨されない方法なんですが、ちょっと思いついたことを試したい場合、この一箇所だけ特定のデザインを適用したい場合、うちのサイトみたいに思いつきで突然CSSの記事を書く場合などに重宝するテクニックです。

style属性でCSSを適用する

ではやってみましょう。通常であればp属性に背景を付ける場合、

(CSS)
.kiiro{
background: #yellow;
}

(HTML)
<span class=”kiiro”>黄色くする</span>

とかなんとかやって黄色くするんですが、これをそのままHTMLに書き込むと、

<span style = “background:yellow;>黄色くする</span>

ということになり、これを使って実際に黄色くすることができます。

複数の属性も可能

複数の場合は; の後に追記します。

即興で作ることができます。

要するにstyleの後ろにCSSを直接代入すれば成立します。CSSはバージョン更新により前は使えてた表記が使えなくなったり、記述のルールが変更されたりします。単体使用でも後日修正する必要が出る可能性がありますのでご了解ください。

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27