カテゴリー
【CSS/Sassで作るミニゲーム】CSS変数(カスタムプロパティ)とシンプルなJSコードでHTML要素をコントロール
※ 当ページには【広告/PR】を含む場合があります。
2023/12/15
『$...』
CSS変数(カスタムプロパティ)の基本的な使い方
<body id="main">
<p>ようこそ、カスタムプロパティ！</p>
</body>
#main {
--color: red;
}
p {
color: var(--color);
}
--color: redvarvar(--color) --> redgetComputedStyle/getPropertyValueから変数を読み込む
<div id="main">
<p>この文字は何色ですか？</p>
</div>
#main {
--color: green;
}
p {
color: var(--color);
}
<script>
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
const div = document.getElementById("main");
const styles = getComputedStyle(div);
const value = styles.getPropertyValue('--color');
console.log(`文字は ${value} に設定されています`);
}
else {
console.log('お使いのブラウザはカスタムプロパティ非対応です');
}
//カスタムプロパティがサポートされている場合、isSupportedはtrueが返る
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
getComputedStylegetComputedStyleメソッド<要素オブジェクト>.styleプロパティ
+ getComputedStyle:
返されたオブジェクトは読み取り専用。
<style>タグや外部スタイルシートで設定されたものも含めて、
要素に付与されているCSSスタイルを取得する
+ <element>.style:
JavaScriptの操作やグローバルのstyle属性から直接追加された
CSSスタイルを取得できる。
もしくは、その要素(element)に新しいCSSスタイルを設定する
<style>getComputedStylegetComputedStylegetPropertyValue
//...
const styles = getComputedStyle(div);
const value = styles.getPropertyValue('--color');
//...
getPropertyValue
setPropertyから変数の値を変更する
setPropertysetProperty
<div id="main">
<p>色を変えてみよう</p>
<button id="btn">色をチェンジ</button>
</div>
#main {
--color: black;
}
p {
color: var(--color);
}
<script>
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
const btn = document.getElementById("btn");
btn.addEventListener('click', changeTextColor);
}
else {
console.log('お使いのブラウザはカスタムプロパティ非対応です');
}
function changeTextColor(e) {
const div = document.getElementById("main");
div.style.setProperty('--color', 'red');
}
div#main--color
//...
const div = document.getElementById("main");
div.style.setProperty('--color', 'red');
//...
setProperty応用編〜画像をカスタムプロパティで動かす
<div id="main">
<div id="mentaco"></div>
<input type="range" id="slider1" min="0" max="100" value="0">
<input type="range" id="slider2" min="0" max="100" value="100" orient="vertical">
</div>
inputのrangeタイプ<div>
#main {
width: calc(100% - 40px);
height: 300px;
margin: 20px;
background-color: darkgray;
box-sizing: border-box;
position:relative;
--mentaco-x: 0;
--mentaco-y: 0;
}
#mentaco {
position: absolute;
display: block;
padding: 0 0 0 0;
top: max(var(--mentaco-y) - 80px, 0%);
left: max(var(--mentaco-x) - 72px, 0%);
width: 80px;
height: 72px;
background: transparent url('https://raw.githubusercontent.com/tacoskingdom/commonBlogMaterial/main/deep-tacopots/blog116/mentaco.png') no-repeat 0 0;
background-size: 80px 72px;
}
#slider1, #slider2{
position: absolute;
display: block;
z-index: 1;
cursor: pointer;
}
#slider1 {
top: -20px;
margin: 0 20px;
width: calc(100% - 40px);
}
#slider2 {
left: -20px;
margin: 5px auto;
height: calc(300px - 10px);
}
--mentaco-x--mentaco-y
...
#mentaco {
...
top: max(var(--mentaco-y) - 80px, 0%);
left: max(var(--mentaco-x) - 72px, 0%);
...
}
...
<script>
const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0);
if (isSupported) {
const sldr1 = document.getElementById("slider1");
const sldr2 = document.getElementById("slider2");
sldr1.addEventListener('input', xSlider);
sldr2.addEventListener('input', ySlider);
}
else {
console.log('お使いのブラウザはカスタムプロパティ非対応です');
}
function xSlider(e) {
const x_pos = e.target.value;
const div = document.getElementById("main");
div.style.setProperty('--mentaco-x', x_pos + '%');
}
function ySlider(e) {
const y_pos = 100 - e.target.value;
const div = document.getElementById("main");
div.style.setProperty('--mentaco-y', y_pos + '%');
}
inputsetPropertyまとめ
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー