はじめに

最近業務で書き始めたSalesforceのVisualforceについて記載します。
まだ始めたばかりの初心者なので、もし認識違い等あればコメントでご連絡いただけますと助かります。

本記事の対象

VisualforceにCSSを反映する方法は、3通りあります。

①HTMLベタ書き

<head>
  <style type="text/css">
     p{
        color:#fff;
        background-color:#000;
       }
  </style>
</head>

② 外部Stylesheet(自作)を呼び出し

　あることは知っているけど、やり方等詳細はわからないので飛ばします
　公式サイトには書いてあるっぽい…？

③　外部Stylesheet(Salseforce公式)を呼び出す
　この存在を1週間前の私に教えてあげたいってことで、今回のメインです。

　Salseforceには公式のStylesheetなるものが存在しています。
　何者かというと、以下の一文を追加して、後は公式のクラス名を当てはめれば勝手にCSSが反映されます。
　https://www.lightningdesignsystem.com/


<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system.min.css')}"/>

①「Search」に「margin」と入力して検索します
https://www.lightningdesignsystem.com/

②使いたいMarginを選んで、divタグをコピー
　赤枠で囲った部分をクリックしてもコピーはできる🙆

③先程コピーしたdivタグを使用したい部分に記載する
　普段書くClass名と同じように指定すればOK
　なので、pタグなどに指定してもOK

（記載例）

<div class="slds-m-around_xxx-small">
   <h1>テスト</h1>
</div>

個人的に良く使うやつ

ccenter（画像とかテキストを中央に揃える）
https://www.lightningdesignsystem.com/utilities/alignment/

これを知っているだけで、開発工数が縮まると思います

Salesforceに興味がある方は、trailheadがおすすめみたいです！
https://trailhead.salesforce.com/ja/home