ポスト
SLDSとは？
SLDSとは、Salesforce社が提供しているCSSフレームワークのことです。
SLDSを利用することで、１からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。
※SLDSで提供されているCSSクラスを利用するだけ！
正式名称は「Salesforce Lightning Design System」です。
SLDSを利用することで、１からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。
※SLDSで提供されているCSSクラスを利用するだけ！
正式名称は「Salesforce Lightning Design System」です。
メリットは？
①CSSに対する知識が乏しくても、Lightning Experienceのデザインを崩さず、違和感のない画面開発をすることができます。（複数人で画面開発をしてもデザインの一貫性が維持されますね！）
②１からCSSを定義する必要が無いので、開発コストを削減することができます。
③継続的に更新されるので、最新バージョンを利用している限り、Lightning Experienceのデザインの一貫性が確保されます。
②１からCSSを定義する必要が無いので、開発コストを削減することができます。
③継続的に更新されるので、最新バージョンを利用している限り、Lightning Experienceのデザインの一貫性が確保されます。
よく使うSLDSは？（本題）
Lightning Experienceにおいて画面開発する際は、LWC（Lightning Web Components）を利用することがスタンダードなので、
LWCの標準コンポーネントを利用する分には、意識せずともLightning Experienceのデザインとなります。
ただし、標準コンポーネントでは実現できない画面開発をする場合は、SLDSを利用するケースは多いと思いますので、参考にしていただければと思います。
LWCの標準コンポーネントを利用する分には、意識せずともLightning Experienceのデザインとなります。
ただし、標準コンポーネントでは実現できない画面開発をする場合は、SLDSを利用するケースは多いと思いますので、参考にしていただければと思います。
１．Margin & Padding
コンポーネントの位置を微調整したい場合に便利！
<div class="slds-m-top_xxx-small"></div> <div class="slds-m-left_xxx-small"></div> <div class="slds-m-bottom_xxx-small"></div> <div class="slds-m-right_xxx-small"></div>
Margin
■参考URL
Margin
Margin
<div class="slds-p-top_xxx-small"></div> <div class="slds-p-left_xxx-small"></div> <div class="slds-p-bottom_xxx-small"></div> <div class="slds-p-right_xxx-small"></div>
Padding
２．Box
メッセージ領域など、ちょっとしたコンポーネントを作成する際に便利！
Box
<div class="slds-box"> <p>hello world.</p> </div>
Box
ちなみに、Themesと組み合わせることで、エラーメッセージや警告メッセージなどを再現することできます。
<div class="slds-box slds-theme_error"> <p>hello world.</p> </div>
Themes
BoxとThemes
３．Grid
コンポーネントの位置をきれいに並べたい場合に便利！
<div class="slds-grid slds-gutters">
<div class="slds-col">
<lightning-input type="text" label="テキスト(1)" ></lightning-input>
</div>
<div class="slds-col">
<lightning-input type="text" label="テキスト(2)" ></lightning-input>
</div>
<div class="slds-col">
<lightning-input type="text" label="テキスト(3)" ></lightning-input>
</div>
</div>Grid
Grid
４．Modals
モーダルはSLDSで一択！
<section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">hello world</span>
</button>
<div class="slds-modal__header">
<h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">hello world</h1>
</div>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>hello world.</p>
</div>
<div class="slds-modal__footer"> <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open" role="presentation"></div>Modals
Modals
さいごに
今回ご紹介できなかったですが、他にもSLDSではCSSクラスが提供されています。
眺めているだけでも、参考になるので、ぜひリファレンスを見ていただければと思います。
また、画面開発をする際のポイントとして「LWCの標準コンポーネントで実現できるか？」が重要になってくるので、是非、コンポーネントリファレンスも見ていただければと思います。
眺めているだけでも、参考になるので、ぜひリファレンスを見ていただければと思います。
また、画面開発をする際のポイントとして「LWCの標準コンポーネントで実現できるか？」が重要になってくるので、是非、コンポーネントリファレンスも見ていただければと思います。
36 件
