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ライブラリの使用
