CSSで変数を使いたいと思わんかね

CSSで楽をしたい！ただそれだけ！

出来ないよな～って調べたらあるじゃん！変数が！

開発段階らしいけど、これが一般的になったらかなり面白とおもうぞ！

きっかけ

変数とは

まず変数ってなに？というところから簡単に説明させていただきます。

例えば、上の雑談で、イメージ画像が出てきますが、この画像名を変更したい場合、普通だったら、記事に埋め込まれた画像名をすべて変更しなくてはいけません。

ですが、もし画像名をとある宇宙空間で「image_ma」などと独自に名前を付けて管理し、記事上では「image_ma」だけを呼び出して使用していた場合、画像名の変更があっても宇宙空間に保存された「image_ma」の画像名だけ変更すればすべて解決します。

変数は、よく「箱」で説明されます。変数という「箱」に好きな数字や文字列を入れることができ、プログラム内で「箱」の中身を書き換えたりもできます。

ここでいう、宇宙空間で画像名を管理する＝変数に値を入れる　と同じ行為になります。

今回挑戦するCSS変数

CSS変数で検索すると、プリプロセッサー変数というのも出てくるのですが、今回扱うのはCSS Variables(カスタムプロパティ)というものを使っていこうと思います。
こちら、実験段階の機能らしいので、本格的に実装できるようになるのはまだ先になりそうです。
参考 CSS のカスタムプロパティ (変数) の利用MDN Web Docs

さきほど簡単に変数の説明をさせていただきましたが、いつも使っているCSSを記述する部分に、変数を使って工数を減らそうという運営者の魂胆に加担します。

今回は試しに、この開発カテゴリの背景色だけを変えることができるか？という簡単な部分からやってみたいと思います。どうぞお付き合いください。

本当は記事を書いた人ごとに変えよう、という話でしたが、そうは問屋が卸さないってことを丸一日かけて理解しました。

カテゴリIDをclassに追加する

まず、今この記事ページがなんのカテゴリか、HTML内で明確に判断できるような状態にしたいと思います。

こちらのサイトさんを参考にさせていただきました。

詳しい説明は省きますが、丸一にかけてこちらのサイトさんの記述を参考に、autherのIDを取得してclassに追加するところまではわかったのですが、PHPの記述方法をろくに理解していない素人にループ処理はちときついので、他の機会でやります。

こちらでbodyのclassにカテゴリIDを追記して、CSSの部分で変数を使っていきます。

今回のこのやり方だと変数を使う意味は全くありません。ただ今後の参考としてのチャレンジですので真似される方はいないと思いますが、無意味ですのでご了承ください。

ちなみに開発カテゴリで追加されたclass名は「categoryid-43」です。

CSS変数を使う

やり方は簡単です。今回対応ブラウザのみに向けてやりますので、ご了承ください。

:root {
 --main-wa-color: #d7ebfe;
}

body .categoryid-43 {
 background-color: var(--main-wa-color);
}

style.cssに上記のを入力するだけです。

今こちらの記事の背景色と僕の吹き出しの色が水色になってればCSS変数に対応した状態です。※未対応ブラウザで確認できなかったので、未対応の場合どうなるかはわかりません。

簡単に説明しますと、「–main-wa-color」の部分が変数になります。自分で好きなnameを付けることができます。決まり事として、先頭に「–」を入れなければいけません。「–main-wa-color」という箱に、「#d7ebfe」を入れています。それを:rootでHTML全体に適用させています。

:rootはルート要素にスタイルシートを適用するためのセレクタだ。ルート要素とは最上位階層に位置する要素のことで、HTML文書では全体をマークアップしているがルート要素となる。

引用元：builder

その変数を呼び出すための記述方法が「var(変数名)」となります。「background-color: var(–main-wa-color)」の部分は、「background-color: #d7ebfe」と同じ意味になります。

ちなみに今回、開発カテゴリと僕の吹き出しカラーで上記の変数を使用しています。ですので、「–main-wa-color」の中身を変更するだけで、背景色も吹き出しの色も同時に変わります。面白いでしょ？

まとめ

※12/13　内部の部分を美しくしました！
2017年12月14日自作のショートコードを作るのが意外と大変だったから聞いてくれ