開始

はじめに

このプロジェクトでは、Lightning Design System と Visualforce を使用して、取引先責任者をタイルコンポーネントとして表示するページを作成します。このページには Lightning の新しい UI のデザインをそのまま使用するため、作成中に CSS を 1 行も記述する必要がありません。

Lightning Design System は、次の数種類の要素で構成されています。

  • CSS フレームワーク
  • HTML コンポーネント
  • アイコン
  • 設計トークン
  • 設計ガイドライン

このプロジェクトでは CSS フレームワークと HTML コンポーネントを中心に説明し、アイコンについても簡単に言及します。Lightning Design System についての詳細は、Trailhead の詳しいモジュールや、Lightning Design System サイトのドキュメントをご覧ください。

「Lightning Design System」では長いので、ここでは「Design System」と呼ぶことにします。

取引先責任者リストの作成

操作内容

  • 取引先責任者のリストを表示する Visualforce ページを作成する

これから次のようなシンプルなワイヤーフレームを作成していきます。このワイヤーフレームは、先頭にページヘッダー、その後に取引先責任者タイルのリスト、最後にフッターという構造です。

作成する Visualforce ページのワイヤーフレーム

リソース

設定の確認は行いません。[Verify Step (ステップを確認)] をクリックして、プロジェクトの次のステップに進みます。