2022.06.01

よく使うSLDSの紹介

SLDSとは?

SLDSとは、Salesforce社が提供しているCSSフレームワークのことです。
SLDSを利用することで、1からCSSを記述せずに Lightning Experience のデザインを踏襲した画面開発ができます。
※SLDSで提供されているCSSクラスを利用するだけ!

正式名称は「Salesforce Lightning Design System」です。

メリットは?

①CSSに対する知識が乏しくても、Lightning Experienceのデザインを崩さず、違和感のない画面開発をすることができます。(複数人で画面開発をしてもデザインの一貫性が維持されますね!)
②1からCSSを定義する必要が無いので、開発コストを削減することができます。
③継続的に更新されるので、最新バージョンを利用している限り、Lightning Experienceのデザインの一貫性が確保されます。

よく使うSLDSは?(本題)

Lightning Experienceにおいて画面開発する際は、LWC(Lightning Web Components)を利用することがスタンダードなので、
LWCの標準コンポーネントを利用する分には、意識せずともLightning Experienceのデザインとなります。
ただし、標準コンポーネントでは実現できない画面開発をする場合は、SLDSを利用するケースは多いと思いますので、参考にしていただければと思います。

1.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
<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
■参考URL
Padding

2.Box

メッセージ領域など、ちょっとしたコンポーネントを作成する際に便利!

Box

■参考URL
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

■参考URL
Themes

3.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

■参考URL
Grid

4.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

■参考URL
Modals

さいごに

今回ご紹介できなかったですが、他にもSLDSではCSSクラスが提供されています。
眺めているだけでも、参考になるので、ぜひリファレンスを見ていただければと思います。

また、画面開発をする際のポイントとして「LWCの標準コンポーネントで実現できるか?」が重要になってくるので、是非、コンポーネントリファレンスも見ていただければと思います。
36 件
     
  • banner
  • banner

関連する記事