ステップバイステップでLightningコンポーネントを楽しもう！ - モジュール5

CSSを使ってみよう

コンポーネントにCSSをあてます。

画面イメージ

ソース

m05_CSS.cmp

<aura:component implements="force:appHostable">

    <div class="white">白</div>
    <h3>黒</h3>
    <ul>
        <li class="red">赤</li>
        <li class="blue">青</li>
        <li class="green">緑</li>
    </ul>
</aura:component>

CSSは開発コンソール内の右サイドバーで[STYLE]をクリックしてファイルを作成します。

m05_CSSStyle.css

.THIS {
    background-color: black;
}

.THIS.white {
    background-color: white;
}

.THIS .red {
    background-color: red;
}

.THIS .blue {
    background-color: blue;
}

.THIS .green {
    background-color: green;
}

ポイント

THISクラス

コンポーネントの最上位要素のクラスです。
これでコンポーネント同士のスタイルの上書きを回避します。

外部スタイルシート

コンポーネント外部のCSSを使用するには静的リソースに追加する必要があります。
<link href="resource/bootstrap" rel="stylesheet"/>

ちなみに外部JavaScriptライブラリも静的リソースに追加する必要があります。
<script src="/resource/resourceName" type="text/javascript"></script>

ベンダープレフィックス

-moz, -webkitのベンダープレフィックスはLightningで自動的に追加されます。

補足

• P48 コンポーネント内のCSS
• P153 CSSリソースの参照、ベンダープレフィックス
• P179 スタイルの追加と削除

---

• P152 マークアップでのJavaScriptライブラリへのアクセス
• P156 JavaScriptライブラリの使用

---

モジュール4へ | モジュール6へ