CSS 画像のURLを変数で記述する - CSS
CSS 画像のURLを変数で記述するコードを紹介します。
概要
CSS内で画像のURLを
url('(urlまたはuri)') の形式で記述してCSSで画像を指定することがあります。
CSSのサイズが小さい場合は問題ないですが、CSSのサイズが大きくなると、URL部分を先頭などの一か所にまとめて管理したい場合があります。
この記事では、CSSで画像のURLを変数で記述する方法を紹介します。
CSSの変数については
こちらの記事を参照してください。
書式
変数宣言は次の書式を利用します。
--[変数名]: url('[urlまたはuri]');
変数の参照は以下の書式を利用します。
記述例
:root {
--image: url('http://www.ipentec.com/image/ipentec.svg');
}
.frame {
background-image: var(--image);
}
実装例
コード
以下のHTMLファイルとCSファイルを作成します。
:root {
--backimg: url('/img/img1.svg');
}
.frame1 {
border: 1px solid #ff6a00;
width: 480px;
height: 320px;
background-image: var(--backimg);
background-size: 64px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ImageUrlVariable.css" />
</head>
<body>
<div class="frame1">
枠1です。
</div>
</body>
</html>
解説
変数の宣言です。今回は
:root内に記述しています。
:root {
--backimg: url('/img/img1.svg');
}
変数を参照するCSS部分です。
background-imageプロパティの値に先に宣言した
--backimg変数を参照します。
background-sizeを設定し画像のサイズを指定してタイル状に繰り返す表示します。
詳細は
こちらの記事を参照してください。
.frame1 {
border: 1px solid #ff6a00;
width: 480px;
height: 320px;
background-image: var(--backimg);
background-size: 64px;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
背景画像が表示されており、CSS変数に記述したURLの画像が表示できています。
補足
なお、URLの文字列のみを変数として記述する以下の記述では正しく動作しません。
body {
--backimguri: '/img/img2.svg';
}
.frame_ng {
border: 1px solid #ff6a00;
width: 480px;
height: 320px;
background-image: url(var(--backimguri));
background-size: 64px;
}
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
