【Salesforce】SLDSもっと学びたい

この記事は新社会人のSalesforce学習記録とその他 Advent Calendar 2025の23日目の記事です。
SLDSについて、Visualforceでclassに指定できることまで学びました。いろんな種類があるようなので、これを学習していきます。まとめ的なものがなかったので、初心者がまとめておきました。
ベース⇩

<apex:page >
    <p>Merry Christmas!</p>
    <p>クリスマスだよ</p>
    あけおめ
</apex:page>

sldsの基本

slds-〇〇でsldsを使用することができます。

見た目整える系

並べ方として、縦はcolで横はgridを使用します。
slds-grid
横並びに並びます

<div class="slds-grid">

⇩結果

slds-col
縦並び。最初の画像と同じ状態になります。

slds-grid_align-spread
横全体に広がる。

<apex:page >
    <apex:slds/>
        <div class="slds-grid slds-grid_align-spread">
            <div class="slds-grid">
                <p>Merry Christmas!</p>
            </div>
            <div class="slds-grid">
                <p>クリスマスだよ</p>
            </div>
        あけおめ
    </div>
</apex:page>

これについて、slds-gridと一緒に使用する必要があるみたいです。3行目を見るとわかる通り、""の中に一緒にslds-gridをつけると発動します。
slds-grid_align-center
横中央に並びます。

<div class="slds-grid slds-grid_align-center">

余白系

slds-m-top_medium

微妙に分かりづらいですが、上が一行分開いています。

パディング

slds-p-horizontal_medium
左右ちょっとずれる（一文字分の余白）

slds-p-vertical_large
上下の余白。今回は上に一行余白が空きます。

枠付ける系

でかい枠を使用して、枠の中に入れることができます。
slds-card

 <div class="slds-card">

salesforceの画面で見かけるような画面を１儀容で作成することができます。

さらにそれっぽい(背景に色ついてる系)枠⇩

 <div class="slds-page-header">

その他

枠に好きな好きな色付ける

sldsでは、枠の色を自由に選ぶためにはcssを使用する必要があるっぽいです。
一応3色、
うすい灰色

slds-theme_shade

白

slds-theme_default

クリスマスの棒状のキャンディっぽいデザイン（本来は注意用）
灰色＋白

"slds-theme_alert-texture"

があります

まとめ

文字の場所を自由に設定することができる。枠もつけることができる。ただし、色は自由度がそこまで高くない。