Bricksの子テーマ「SNN-BRX」を有効化すると利用できるエレメントの中から今回は、Code HTML JS CSS をご紹介します。
Code HTML JS CSSの機能
Code HTML JS CSS は、その名のとおり「コードを直接入力できるエレメント」です。
下図のように、CSS は <style> タグで囲み、JavaScript は <script> タグで囲む必要があります。
また、このエレメントは Bricks 標準の「エレメントにあるカスタムCSS」とは異なり、ブレークポイントを切り替えてもコード内容が変化しません。
そのため、レスポンシブ指定が必要な場合は次のように記述する必要があります。
- JavaScript →
window.matchMedia()を使う - CSS →
@mediaを使う
まとめ
現状、このエレメントで HTML と CSS を使う場面はあまり多くありません。
しかし JavaScript は非常に便利です。
Bricks の「カスタムコード」に JavaScript を登録すると、全ページで読み込まれてしまうという欠点があります。
一方、この Code HTML JS CSS エレメントを使えば、必要なページだけに JavaScript を読み込ませることが可能です。
ページ単位でスクリプトを制御したい場合に、とても役立つエレメントです。
