この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

コンポーネントの CSS のヒント

Lightning ページ、Lightning アプリケーションビルダー、またはコミュニティビルダーで使用するコンポーネントの CSS を設定する場合のいくつかのヒントを次に示します。

コンポーネントの幅は 100% に設定する必要がある

コンポーネントは Lightning ページの別の場所に移動されることがあるため、固有の幅や左右の余白は設定しないでください。コンポーネントが表示されるコンテナの幅の 100% に設定する必要があります。左右の余白を追加すると、コンポーネントの幅が変更されてページのレイアウトが崩れる可能性があります。

ドキュメントのフローから HTML 要素を削除しない

一部の CSS ルールは、ドキュメントのフローから HTML 要素を削除します。以下に例を示します。

1float: left;
2float: right;
3position: absolute;
4position: fixed;

コンポーネントはページの別の場所に移動されることがあるだけでなく、完全に異なるページで使用されることもあるため、通常のドキュメントフローに従う必要があります。フロートと絶対位置または固定位置を使用すると、コンポーネントが配置されたページのレイアウトが崩れます。自分が表示しているページのレイアウトが崩れていないとしても、コンポーネントを配置できる他のページのレイアウトは崩れる可能性があります。

子要素にはルート要素よりも大きいスタイルを設定しない

Lightning ページはコンポーネント間のスペースを一定に保ちますが、子要素がルート要素よりも大きい場合はスペースを一定にできません。

たとえば、次のパターンは使用しないでください。

1<div style="height: 100px">
2  <div style="height: 200px">
3    <!--Other markup here-->
4  </div>
5</div>

1<!--Margin increases the element’s effective size-->
2<div style="height: 100px">
3  <div style="height: 100px margin: 10px">
4    <!--Other markup here-->
5  </div>
6</div>

Lightning コンポーネント開発者ガイド

コンポーネントの CSS のヒント