cssimg

最近は CSS にも機能が増えてます
その中でブログで便利そうなものもありました

ブログの記事内で特別にスタイルをつけたいところってときどきあります
これまでは・・・

その記事だけなら記事内に style タグや style 属性
複数箇所で使うなら共通 CSS に追加
こんな感じで対処してました

共通 CSS を使うと

後者の共通 CSS は便利ですが、記事固有のものも含めてしまうと CSS が重たくなりますし、それを不要なページでも読み込むことになって、あまり良いと思えません
なので共通にするのに適してるものだけにしてます

また、ライブドアブログだとブログシステムの制限で、共通 CSS は PC 用表示でしか読み込まれません
スマホ用表示だとスタイルなしで見づらくなります
なので一番上に注意書きで、見づらいときは PC 版に切り替えてねって書いてたりします

記事内に CSS を入れる

記事内に入れる方法ですが、 style 属性なら簡単です
「<div style="color:red">ここが赤文字</div>」みたいなやつです

ただこれって HTML が複雑化して見づらいです
さらに同じスタイルを複数箇所で使うときも扱いづらいです
全部に同じスタイルを書かないといけないですし
変更したいときに全部を変更しないといけないですし
例えば、 table タグを使うとき全部の td タグ全部にスタイルを当てたいとか

最近はセレクタを階層化できるそうですが、できるのは CSS の記述だけです

↓はできますが
<style>
table {
td {
text-align: center;
}
}
</style>
<table>
<tbody><tr><td>A</td></tr></tbody>
</table>

↓はできません
<table style="td { text-align: center }">
<tbody><tr><td>A</td></tr></tbody>
</table>

そのためこれまでどおり style タグを書かないといけないです
style タグの問題点はページ全体に影響するところです
カテゴリページみたいに 1 ページに複数の記事が入るところで、関係ない記事にも影響してしまいます

それの対処のために、他記事と重複しないように記事の ID を調べて、 id 属性にしてスコープを作っています

<style>
#article-12345 td { text-align: center }
</style>
<article id="article-12345">ここに本文など</article>

これが地味に面倒なんですよね~

便利な CSS

・・・だったのですが、便利なものを見つけました

@scope です

<div>
<style>
@scope {
div { color: red }
}
</style>
<div>赤色</div>
</div>
<div>初期色</div>

@scope の内側のスタイルは、その style タグの親タグの内側だけが対象になります
スタイルを反映させたい範囲を div で囲むだけで済みます
簡単!

ブログの各記事単位のスタイルなら、ブログの本文の HTML は article などのタグの内側に埋め込まれるはずなので、単に本文の最初 style タグを入れて、そこで @scope の中にスタイルを書くだけです

便利になったものですねー