ページフッターの追加

操作内容

  • ページにフッターを追加する

ステップ 1: フッターを追加する

最後の重要なステップとして、フッターを別のグリッドシステムコンポーネントとして追加します。

<!-- FOOTER --> コメントの間に次のコードを挿入します。

<!-- FOOTER -->
<footer role="contentinfo"  class="slds-p-around_large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid_align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

ステップ 2: プレビューする

ページを保存して、[Preview (プレビュー)] ボタンをクリックします。

ページフッターを追加後の Visualforce ページのプレビュー

サマリーと次のステップ

これで完了です。Design System を使用して、CSS を 1 行も記述することなく、取引先責任者リストページを作成しました。

Design System には、このプロジェクトで取り上げたもの以外にも多数のコンポーネントがあります。コンポーネントの一覧を確認し、取引先責任者リストページをさらに改良していく場合は、www.lightningdesignsystem.com をご覧ください。

Design System の使用に関する詳細な説明は、Trailhead の詳しいモジュールを参照してください。

このワークショップやその他 Design System に関するフィードバックをお待ちしております

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる