ドットインストール 詳解CSS 変数編 【テーマカラーを設定しよう】
ドットインストールまとめ記事、今回は「詳解CSS 変数編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- HTML/CSSを使ってWEBページをいくつか作ってみた方
- プログラミングの基礎学習を始めて1ヶ月~数ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→CSS変数について復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSの基礎について一通り勉強をしてから読まれることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう〜
【CSS変数の基本】
・”--“＋(変数名)で変数名を付け、値を設定…①
・値にvar(変数名)とすると変数の値が適用される…②
・変数の値を変更するだけで複数のプロパティの値を一括で変更できる…③
・値を設定しない場合var関数内で設定…④
h1のborder-colorをvar(--my-color)としている。my-colorの値を画像1枚目(blue,①)から2枚目(orange,③)に変更するとスタイルが変更された
【css変数の継承】
・css変数は継承される
・h1とpの共通の親要素bodyに変数を指定したことで、h1にもpにも変数の値が適用されている…①
・:root(html要素を示す擬似クラス)を用いることで文書全体に変数の値を適用できる…②
:root(文書全体)にCSS変数を適用しているのでそれより下の階層にある要素(全ての要素)にCSS変数が継承されている
【CSS変数が継承されていない例】
h1にCSS変数を設定し(①)h1(②)とp(③)でCSSの値を使用したがh1とpは同階層なのでpにはCSS変数が適用されていない
【CSS変数使用時の注意点-1 単位の扱い】
・単位なしで変数に値を設定し(①)変数を使用する時に後から単位をつける(②)と単位が機能しない。
・プロパティ名に変数を使うことはできず、プロパティの値にのみ使用可能。
①で--my-margin-left: 32; とし、②でmargin-leftの値をvar(--my-margin-left)pxとしている。これでmargin-leftは32pxとはならず、CSS変数が適用されていないことがわかる。③で--my-property: color;とし、④で--my-property: var(--my-color);としているがこれでcolor: var(--my-color);とはならない。
【CSS変数を用いてテーマカラーを指定】
・変数を作成し(①)、colorプロパティのhslの1つ目の値(=色相)として設定(②)
・buttonを目立たせるためにcalcを用いて色相の値を+60…③
※色相の値が+60とは色相環を60度右にずらすということ
【復習】
今回はCSS変数について扱いました。最後に記憶に定着するように復習しましょう。
★CSS変数の基本
- --(変数名): 変数の値で設定。各プロパティの値でvar(--変数名)を用いることで呼び出せる
- CSS変数の値を変えることで変数を設定した全てのプロパティの値を一括で変更できる
- プロパティの値でvar--変数名とすれば直接変数を設定できる
★CSS変数の継承
- CSS変数は親要素から子要素へと継承される。同一階層の要素間では継承されない
★CSS変数使用時の注意点
- 単位は変数の値に含める
- プロパティ名に変数を使用することはできず、プロパティの値にのみ使用可能
CSS変数を用いることで今回のようにテーマカラーを設定することができます。
内容としてはちょっとマニアックなので他のレッスンの内容を完璧に理解してから取り組むと良いでしょう！
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール経過報告】
— 5日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月27日
詳解Javascript オブジェクト編 DOM編(1~8) 完了です👍
ページに動きが生まれて面白くなってきました☺️
何気なく使っていたテクノロジーの裏側を知れるのがプログラミングのやりがいです😄#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい pic.twitter.com/uDt8DvBElv
