Lightning コンポーネント開発者ガイド
jコンポーネント内の CSS
CSS を使用してコンポーネントのスタイルを設定します。
CSS をコンポーネントのバンドルに追加するには、開発者コンソールのサイドバーで [STYLE] ボタンをクリックします。
外部 CSS リソースの場合は、「アプリケーションのスタイル設定」を参照してください。
コンポーネントのすべての最上位要素には、特殊な THIS CSS クラスが追加されています。これにより、事実上 CSS に名前空間設定が追加されます。これは、コンポーネントの CSS が別のコンポーネントのスタイル設定を上書きすることを回避するのに役立ちます。CSS ファイルがこの規則に従わない場合、フレームワークはエラーを発生させます。
サンプルの helloHTML.cmp コンポーネントを見てみましょう。CSS は helloHTML.css 内にあります。
コンポーネントのソース
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <div class="white">
19 Hello, HTML!
20 </div>
21
22 <h2>Check out the style in this list.</h2>
23
24 <ul>
25 <li class="red">I'm red.</li>
26 <li class="blue">I'm blue.</li>
27 <li class="green">I'm green.</li>
28 </ul>
29</aura:component>
30
31CSS ソース
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS {
18 background-color: grey;
19}
20
21.THIS.white {
22 background-color: white;
23}
24
25.THIS .red {
26 background-color: red;
27}
28
29.THIS .blue {
30 background-color: blue;
31}
32
33.THIS .green {
34 background-color: green;
35}
36出力
最上位要素は THIS クラスと一致し、灰色の背景で表示されます。
<div class="white"> 要素は .THIS.white セレクタと一致し、白の背景で表示されます。このルールは最上位要素用であるため、セレクタにはスペースがありません。
<li class="red"> 要素は .THIS .red セレクタと一致し、赤の背景で表示されます。これは下位のセレクタであり、<li> は最上位要素ではないため、スペースが含まれます。