更新日
01｜CSSカスタムプロパティ｜変数を使って変更に強いCSSを書こう
web兄さん
今後は講座ごとにベースファイルをダウンロードして使用します
初級編はポートフォリオサイトをベースに課題に取り組むことが多々あるため、課題ごとに都度ファイルをダウンロードしていきます。
今回は以下のファイルをダウンロードしてください！
今回の講座は以下の流れで進めていきます。
- この講座でやることを確認
- カスタムプロパティの書き方を覚える
- ポートフォリオサイトのCSSを置き換える
まずはこちらの動画を確認しましょう。
動画を見終えたらカスタムプロパティの書き方について学習していきます。
カスタムプロパティの書き方
01｜変数を定義する
まずはカスタムプロパティの変数の定義をします。
書き方はシンプルで以下のルールをもとに記述をしましょう。
- 先頭は必ず
--（半角のハイフン2つ）から始まる - class名の命名規則と同じルール
- 大文字・小文字の区別がある（ex.
--blackと--Blackは別ものと認識される）
02｜変数を参照する
続いて定義した変数を参照します。
- プロパティ: 値←ここを変数にする
var()関数で変数を参照する
「参照」ってなに？
先ほどから何度か出てきている「参照」という用語ですが、プログラミング言語でよく使用する言い回しです。
今回の変数を例にすると、
❶ブラウザが--color-blackという変数を見つけると、
❷--color-blackが定義コードを探しにいきます。
❸--color-black: #000定義されている箇所の値である#000を参照します。
つまり、参照とは「元となる箇所から情報を取得する」ことを指します。
03｜カスタムプロパティの適用範囲を決める
まずカスタムプロパティは通常のCSSと同様にセレクタを用意した上で、変数名と値をセットで記述します。
セレクタの:rootですが、これは全ての要素の親という意味です。
カスタムプロパティで使う変数は全ての要素で使用できるようにする必要があるため、一般的にはセレクタを大元である:rootに設定します。
もう少しわかりやすく解説しましょう。例えば、以下のようなHTMLがあったとします。
<div class="container">
<div class="headline">
<h2>見出しがはいります</h2>
<div>
<div class="text">
<p>テキストですテキストですテキストです</p>
<div>
左のように.textをセレクタにして変数を定義した場合は.headlineでは変数を使用することができません。
なぜなら--blackという変数は.textというセレクタの範囲で定義されているからです。
このように特定の範囲で変数を定義すると都合が悪いことが多いので、全ての箇所で変数を使用できるように:rootをセレクタにします。
ちなみにこの:rootは全ての要素の親を指すため<html>とほぼ同義です。
カスタムプロパティの活用例
カラーコード｜color・background-color・border
/* 定義 */
:root{
--color-text: #111;
--color-primary: #1d47dd;
--color-secondary: #9b78ff;
--color-bg: #f5f5f5
}
/* 参照 */
.elem{
color: var(--color-text);
background-color: var(--color-bg);
}特に活用例が多いのがカラーコードです。
都度カラーコードをデザインカンプからコピペするのは面倒ですよね。
変数名をできる限り抽象的にしておくことがポイントです。
変数名の付け方はこちらの記事が参考になります。
グラデーション｜linear-gradient
カラーコードと合わせて設定しておくと良いのがカラーコードです。
変数名をできる限り抽象的にしておくことがポイントです。
/* 定義 */
:root{
--gradient: linear-gradient(135deg, #770ADD 6.25%, #BC17B0 95%);
}
/* 参照 */
.elem{
background: var(--gradient);
}変数名の付け方はこちらの記事が参考になります。
フォント｜font-family
英語部分と日本語部分で適宜font-familyを分けたい場合に変数で管理しておくと便利です。
/* 定義 */
:root{
--font-family-jpn: "Noto Sans JP", sans-serif;
--font-family-eng: "Montserrat", sans-serif;
}
/* デフォルト */
body{
font-family: var(--font-family-jpn);
}
/* 英語 */
.eng{
font-family: var(--font-family-eng);
}シャドウ｜box-shadow
シャドウ系もデザインデータの中で統一されていることの多い項目です。
/* 定義 */
:root{
--shadow: 0 0 15px 5px rgba(0,0,0,0.15);
}
/* 参照 */
.elem{
box-shadow: var(--shadow);
}サイズ｜width・max-width
コンテナサイズはページ全体を通して共通のサイズの使用頻度が高い値です。
一般的に変数で管理することの多い値です。
/* 定義 */
:root{
--width-container: 960px;
}
/* 参照 */
.container{
max-width: var(--width-container);
margin: 0 auto;
}ポートフォリオサイトへカスタムプロパティを記述する
ダウンロードしたファイルを元にして、動画の解説と一緒にコードを書いていきましょう。
動画で解説したコード
:root{
/* 色 */
--color-black: #000000; /*テキストと背景*/
--color-primary: #7D15DE; /*メインカラー*/
--color-primary-rgb: 125, 21, 222; /*メインカラーのRGB形式*/
--color-accent: #FCFF58; /*強調*/
--color-gray: #DDDDDD; /*ボーダー*/
--bg-light: #F9F9FF; /*背景色*/
/* フォント */
--font-eng: 'Montserrat';
/* コンテナ */
--width-inner: 1140px;
}