SANGOになれた喜びをかみしめています

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

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

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

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

きっかけ

あああ
マイクテストマイクテスト
始まった。すまんね、急に呼び出して。
いえ、マイクテストする余裕くらいはあったのでいいですよ。
ちょっとやってみたいことあってさ。お力を借りたいなーと思いまして。
この前言ってたことですよね。
そうなの。最初さ、カテゴリごとにページの雰囲気変えたいなーと思ってたんだけど。
あのサイトのパクリね。
パクリじゃない!影響を受けたんだ!
そのセリフも芸人のパクリ。
その時思ったのよ。カテゴリごとにさ、CSSでclass指定すればカテゴリごとに好きなように変えれるけどさ。同じようなCSS書くのって美しくないじゃない。
まぁ、どんな言語でも、同じようなコード繰り返し書くのは美しくないっていうらしいですからね。
でしょ?だから、CSSもいちいちカラーとか指定するのめんどくさいから、変数に入れれば楽できるのになーって思って探したら、あったのですよ。
さすがエクセルVBA出身ですね、たぶん純粋なデザイナー出身だとその考え方には至らないかも。
プログラムの基本はめんどくさいから始まるからね。VBAも楽したいって思ったら気づいたらガシガシ書けるようになってたわ。
じゃあVBAの記事書けばいいのに。

変数とは

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

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

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

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

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

宇宙空間。

今回挑戦するCSS変数

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

さきほど簡単に変数の説明をさせていただきましたが、いつも使っている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」の中身を変更するだけで、背景色も吹き出しの色も同時に変わります。面白いでしょ?

まとめ

PHPループ処理ありましたか。
ありましたね。何回かサイト壊しました。
しゃーない。CSS変数、意外と簡単やん・・・って思ってた。すまぬ。
いえ、今回扱ったCSS変数自体は簡単でしたよ。CSS変数自体は。背景青くなったときは面白かったですね。
面白かったね。やっぱそっちのほうが好きだわ、CSSでデザインするより。だからPHPは好きなんだけどさ、そのあとCSSで整えるのが苦手ですわ。
その為に召集されたんだっけ。次回は何を?
いやー。わざわざ開発カテゴリ作ったから、例のアレやりたいんだけど、まだPHPいじらないといけないから、しばらくはカスタマイズかなー。CSS関係はちょっとお願いしたい。
PHPじゃなければ。
まかせた!次は吹き出しの部分、function.php使って(内部の部分を)美しくしたいな

 

 

※12/13 内部の部分を美しくしました!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください