メディアクエリで変数を使用するCSS
メディアクエリでの変数の使用
次に、メディアクエリ内の変数値を変更します。
ヒント:メディアクエリは、さまざまなデバイス(画面、タブレット、携帯電話など)に対してさまざまなスタイルルールを定義することを目的としています。メディアクエリの詳細については、メディアクエリの章をご覧ください。
ここでは、最初にクラスの--fontsizeという名前の新しいローカル変数を宣言します
.container
。その値を25ピクセルに設定します。次に、それを
.container
さらに下のクラスで使用します。次に、
@media
「ブラウザの幅が450px以上の場合、クラスの--fontsize変数値
.container
を50pxに変更する」というルールを作成します。
完全な例は次のとおりです。
例
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
}
@media
ルールの--blue変数の値も変更する別の例を次に示します。
例
/* Variable declarations */
:root {
--blue: #1e90ff;
--white: #ffffff;
}
.container {
--fontsize: 25px;
}
/* Styles */
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container
{
color: var(--blue);
background-color: var(--white);
padding: 15px;
font-size: var(--fontsize);
}
@media screen and (min-width:
450px) {
.container {
--fontsize: 50px;
}
:root {
--blue: lightblue;
}
}
ブラウザのサポート
表の数字は、この
var()
機能を完全にサポートする最初のブラウザバージョンを示しています。
Function | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var()関数
Property | Description |
---|---|
var() | Inserts the value of a CSS variable |