- [Instructor] Custom properties introduce

- 講師紹介】カスタムプロパティ紹介

a new level of configuration and customization to CSS

CSSに新しいレベルの設定とカスタマイズを提供します。

and being able to hook into

とフックできるようになりました。

and manipulate these custom properties using JavaScript,

を作成し、JavaScriptを使用してこれらのカスタムプロパティを操作することができます。

opens up a whole new dimension of possibilities.

は、まったく新しい次元の可能性を切り開きます。

In this example, I've used custom properties

この例では、カスタムプロパティを使用しています。

to set the color and background color

で色と背景色を設定します。

of each of the link items.

の各リンク項目の

You'll notice here, I'm setting up the color

ここで、カラーを設定していることにお気づきでしょう。

to use the custom property color,

を指定すると、カスタムプロパティの色が使用されます。

and then there's a fallback value, black,

で、フォールバック値としてブラックがあります。

if we don't have color defined,

色を定義していない場合

and the same thing for background color.

で、背景色も同様です。

There's a variable or a custom property called BG color

BGカラーという変数やカスタムプロパティがあります

and then a fallback call for transparent

を呼び出した後、フォールバックコールで透明な

if there is no custom property defined.

カスタムプロパティが定義されていない場合

I'm using these fallbacks because in the main style sheet,

これらのフォールバックを使っているのは、メインのスタイルシートの中にあるからです。

there is no custom properties to find.

は、カスタムプロパティを検索することはできません。

These two colors here,

こちらの2色です。

the color and background color are never defined.

の場合、色と背景色は定義されない。

There are some other custom properties

その他、いくつかのカスタムプロパティがあります。

defined at the very top.

を一番上に定義しています。

If we go look, we have max width and white space,

見てみると、幅と空白が最大になっています。

but there's no color and no BG color.

が、色もBGの色もない。

This is one example of how we can use custom properties

これは、カスタムプロパティを使用する方法の一例です。

to do really advanced styling for individual items

個々のアイテムの高度なスタイリングを行うために

because although color and BG color are not defined

というのも、カラーとBGカラーは定義されていないのですが

in the style sheet,

をスタイルシートの中に入れてください。

they are defined in line on one of the elements.

は、いずれかの要素に一列に並んで定義されています。

You can see it here.

こちらでご覧いただけます。

We have the element, then a style attribute,

要素があり、次にstyle属性があります。

and then we have color and BG color defined

そして、カラーとBGカラーが定義されています。

and as a result,

となり、結果的に

these custom properties kick in for this one element here.

このカスタムプロパティは、この1つの要素に適用されます。

So that means we can define

ということは、定義できるのは

how the styling is going to happen in our style sheet

スタイルシートでどのようにスタイリングを行うか

and then use custom properties only where necessary

そして、必要な場合のみカスタムプロパティを使用します。

in line in the elements themselves,

を、要素自体に並べています。

which is really cool

というのは、とてもクールです。

and we can see how this could easily be extended

であり、これを簡単に拡張することができることがわかる。

using JavaScript by injecting custom property values

カスタムプロパティ値を注入することで、JavaScriptを使用して

into elements when needed.

を必要な時に要素に変換します。

So this begs the obvious question,

そこで、当然の疑問が湧いてくる。

how do we access custom properties using JavaScript?

JavaScriptを使用してカスタムプロパティにアクセスするにはどうすればよいですか？

The answer is the same way we've been doing it so far.

答えは、これまでと同じ方法です。

So here's an example of how to access

では、どのようにアクセスするのか、その例を挙げてみましょう。

the in line custom properties for that element.

その要素のインラインカスタムプロパティを指定します。

We first go grab the element itself,

まず、要素そのものを取りに行く。

and then we say console.log(listItem), so the element,

で、console.log(listItem)と言っているので、その要素です。

style, and then use getPropertyValue

スタイルで、getPropertyValue を使用します。

and call for the property value.

とプロパティ値を呼び出す。

Run this in the browser and you see in the console,

これをブラウザで実行すると、コンソールに表示されます。

we have the value for that property.

は、そのプロパティの値を持っています。

And this is the value of the custom property

そして、これがカスタムプロパティの値です。

defined in line.

行で定義されています。

We can go back and look at it.

戻って見ることができます。

It's this value right here.

それは、ここにあるこの価値です。

You'll also notice I'm using get property value here

また、ここではプロパティ値の取得を使っていることに気がつくでしょう。

because the custom property name starts with two dashes

カスタムプロパティ名が2つのダッシュで始まるため

and as we've now learned,

と今更ながら知った次第です。

two dashes as a JavaScript property name does not work.

JavaScriptのプロパティ名としてダッシュを2つ指定してもうまくいきません。

If we try to say listItemstyle.--color,

もし、listItemstyle.-colorと言おうものなら。

it simply wouldn't work.

というのは、単純にうまくいかないんです。

It would be a syntax error,

構文エラーになる。

so here we have to use get property value.

ということで、ここではプロパティ値の取得を使うことにします。

It also means we can't do some of this traversing

また、このトラバースの一部を行うことができないことを意味する

that we've been doing previously

前にやっていたこと

because the custom properties are just different.

カスタムプロパティが違うだけだからです。

So that's in line styles and it makes sense.

だから、それはインラインスタイルであり、理にかなっているのです。

What about style sheets?

スタイルシートについてはどうでしょうか？

You'll remember in my style sheet,

私のスタイルシートで覚えておいてください。

I've defined some custom properties here at the very top.

ここでは、一番上にいくつかのカスタムプロパティを定義しています。

So this is the first rule.

だから、これが最初のルールです。

That means if I go and say document.styleSheets[0],

つまり、document.styleSheets[0]と書いてくると。

I get the first style sheet.

最初のスタイルシートが表示される

Then I can go in and grab the CSS rules

そして、CSSルールを取得することができます。

on the first element from that.

を、その最初の要素に追加します。

So I'll say console.log(styleSheet).

ということで、console.log(styleSheet)とします。

That gives me the current style sheet

これにより、現在のスタイルシートが得られます。

and then I'll say cssRules.

で、cssRulesとします。

And here I want the first rule

そして、ここで私が欲しいのは、最初のルール

so that has index number zero.

ということで、インデックスナンバーは0です。

And then I want to know about the custom properties.

そして、カスタムプロパティについて知りたい。

So here I have max width and white space.

そこで、ここでは幅と空白を最大にしています。

So let's say style.getPropertyValue and --max=width.

そこで、style.getPropertyValueで-max=widthとします。

Save, back in the browser, 70 VW.

保存、ブラウザに戻り、70VW。

And that's really all there is to it.

そして、本当にそれだけなんです。

Custom properties behave exactly the same way

カスタムプロパティの動作は全く同じです

as any other CSS property.

を他の CSS プロパティと同様に使用することができます。

The only thing you need to keep in mind is that

ただ、気をつけなければならないのは

there are no JavaScript defined property names for these.

には、JavaScript で定義されたプロパティ名はありません。

So these camel case property names,

つまり、これらのキャメルケースのプロパティ名です。

because the custom properties always start with dash dash.

カスタムプロパティは常にダッシュダッシュで始まるからです。

So here you have to use getPropertyValue

そのため、ここでは getPropertyValue を使用する必要があります。

to get at the property value.

を使用してプロパティ値を取得します。

(upbeat electronic music)

(アップビートな電子音楽)