「CSS」の版間の差分
削除された内容 追加された内容
CSS関数。手元のパソコンが不安定なので、いったん投稿。 |
CSS変数について。 |
||
221 行
画像とあまり関係なさそうな処理や、複雑な処理は JavaScript 側で行うべきだろう。
== CSS変数 ==
2015年ごろから主要なブラウザに追加されてきた新機能で、CSS変数というのがある。正確には「カスタム プロパティ」という。
<pre>
:root {
--変数名: 値 ;
}
</pre>
といった書式で、グローバル変数を定義できる。
コロン「:」をrootの前につけることを忘れないように。
また、変数名の前には<code>--</code>をつける。ハイフン2個である。
CSS変数を呼び出すには、CSS関数のvar()を使って、
var(--変数名)
の書式で呼び出せる。
;コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSS変数のサンプル</title>
<style type="text/css">
:root {
--hensuu: 20%;
}
.left {
width: var(--hensuu);
float: left;
background-color: #ccccff
}
.kaigyo1 {
word-break: break-all;
overflow-wrap: anywhere;
}
</style>
</head>
<body>
<div class="left">
<div class="kaigyo1">
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</div>
</div>
</body>
</html>
</syntaxhighlight>
;結果
::左端から幅 20% まで「ffff・・・」（以下略）を表示。
| |||