[comment]: # aside:4

[comment]: # ({3c100212-cd954d56})

# アセット

*assets*フォルダーには、他のディレクトリに属さないファイルやサブフォルダーを含めることができます。次の目的で使用できます:

- JavaScriptスタイル (*[assets/js](#assetsjs)*内にある必要があります)
- CSSスタイル (*[assets/css](#assetscss)*内にある必要があります)
- 画像
- フォント
- その他、含める必要のあるもの

[comment]: # ({/3c100212-cd954d56})

[comment]: # ({2b4831f8-08585fb9})

### assets/js

*assets/js*ディレクトリは予約されており、JavaScriptファイルのみを含める必要があります。
ウィジェットで使用するには、これらのファイルを*[manifest.json](/devel/modules/file_ Structure/manifest)*で指定します。

例:

```json
"assets": {
    "js": ["class.widget.js"]
}
```

[comment]: # ({/2b4831f8-08585fb9})

[comment]: # ({1da3de82-18641225})

### assets/css

*assets/css*は予約されており、CSSスタイルファイルのみを含める必要があります。
ウィジェットで使用するには、これらのファイルを*[manifest.json](/devel/modules/file_ Structure/manifest)*で指定します。

例:

```json
"assets": {
    "css": ["mywidget.css"]
}
```

[comment]: # ({/1da3de82-18641225})

[comment]: # ({0e4fe7cf-aedbe0c5})
##### CSSスタイル

CSSファイルには、特定のWebインターフェーステーマに対して異なるスタイルを定義するためのカスタム属性 `theme` を含めることができます。

利用可能なテーマとその属性値:

-   **Blue** - [theme='blue-theme']
-   **Blue (classic)** - [theme='blue-classic-theme']
-   **Dark** - [theme='dark-theme']
-   **Dark (classic)** - [theme='dark-classic-theme']
-   **High-contrast light** - [theme='hc-light']
-   **High-contrast dark** - [theme='hc-dark']

例:

```css
.widget {
    background-color: red;
}
 
[theme='dark-theme'] .widget {
    background-color: green;
}
```

[comment]: # ({/0e4fe7cf-aedbe0c5})