More than 3 years have passed since last update.

【Salesforce】簡単にCSSを反映する方法

Last updated at 2020-04-22Posted at 2020-04-21

#はじめに

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

#本記事の対象

#VisualforceにCSSを反映する

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')}"/>

たとえば余白（margin）を付けたい場合

①「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