はじめに
最近業務で書き始めたSalesforceのVisualforceについて記載します。
まだ始めたばかりの初心者なので、もし認識違い等あればコメントでご連絡いただけますと助かります。
本記事の対象
- Visualforceを始めたばかりの1週間前の私
- Visualforce初心者
- VisualforceでCSSを簡単に反映したいと思っている方
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:stylesheetvalue="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system.min.css')}"/>たとえば余白（margin）を付けたい場合
①「Search」に「margin」と入力して検索します
https://www.lightningdesignsystem.com/
②使いたいMarginを選んで、divタグをコピー
赤枠で囲った部分をクリックしてもコピーはできる🙆
③先程コピーしたdivタグを使用したい部分に記載する
普段書くClass名と同じように指定すればOK
なので、pタグなどに指定してもOK
（記載例）
<divclass="slds-m-around_xxx-small"><h1>テスト</h1></div>よく使うやつ
個人的に良く使うやつ
Margin（外側の余白）
https://www.lightningdesignsystem.com/utilities/margin/#site-main-content
Pdding（内側の余白）
https://www.lightningdesignsystem.com/utilities/padding/#site-main-content
ccenter（画像とかテキストを中央に揃える）
https://www.lightningdesignsystem.com/utilities/alignment/
grid（画像の横並び レスポンシブにも対応）
https://www.lightningdesignsystem.com/utilities/grid/#site-main-content
table（みんな大好き？テーブルさん）
https://www.lightningdesignsystem.com/components/data-tables/#site-main-content
最後に
これを知っているだけで、開発工数が縮まると思います
Salesforceに興味がある方は、trailheadがおすすめみたいです！
https://trailhead.salesforce.com/ja/home