グリッドシステムについて

学習の目的

この単元を完了すると、次のことができるようになります。

  • グリッドシステムコンポーネントがどのように機能するのかを説明する。
  • グリッドシステムを使用してオブジェクトホーム/リストビューページのレイアウトを行う。

グリッドシステムとは?

最も簡単なページおよびコンポーネント以外はすべて、何らかのレイアウトグリッドを土台にしています。Design System はこの目的のために、グリッドシステムと呼ばれる専用のコンポーネントを提供しています。Bootstrap など他の CSS フレームワークを使用したことがあれば、グリッドの概念については熟知されていることでしょう。簡単に言えば、グリッドでページを行と列に分割することができます。特定の行/列に表示されるようにマークアップを配置できます。複雑なレイアウトの場合はグリッドをネストできます。

Design System のグリッドは CSS Flexbox に基づいており、デバイスに依存しない柔軟でモバイルファーストのスキャフォールディングシステムを提供します。また、Design System にはヘルパークラスも含まれており、これを使用してグリッドの外観と動作 (配置、順序、フロー、パディングなど) を変更できます。

グリッドシステムでは、小、中、大の画面サイズに合わせてレイアウトのバリエーションを定義して反応型ページを作成できます。これらはそれぞれ 480px、768px、1024px のブレークポイントで定義されます。このチュートリアルでは反応型ページの調整については説明しませんが、詳細はサイズ設定ユーティリティのページを参照してください。

グリッドシステムの使用方法

グリッドシステムは、グリッドラッパー (slds-grid クラスで指定) とラッパー内の列 (slds-col クラスで指定) という 2 つの重要なビルディングブロックに基づいています。次に例を示します。

始めに、外部ラッパー要素に slds-grid クラスを追加します。その中の子要素に slds-col を追加して必要な数の列を追加します。この場合は <div> 要素を使用します。たとえば、3 列の簡単なグリッドは次のようになります。

<div class="slds-grid">
 <div class="slds-col">Column 1</div>
 <div class="slds-col">Column 2</div>
 <div class="slds-col">Column 3</div>
</div>

コピー

このマークアップから次のレイアウトが作成されます。

サンプルの簡単なグリッド

デフォルトで列はそのコンテンツに応じてサイズ設定されます。この簡単な例では、各列は同じコンテンツ量を保持するので、3 列の間隔は同一になります。列の 1 つにコンテンツをさらに追加すると、その列は他の列より大きくなります。

また、サイズ設定ヘルパークラスを使用して、手動で列のサイズを指定することもできます。サイズ設定ヘルパーでは、slds-size_X-of-Y 形式を使用します。X は合計スペース Y に対する割合を表します。たとえば、slds-size_1-of-2 は、使用可能なスペースの 50% の幅であることを表します。手動のサイズ設定クラスヘルパーを使用することで、2、3、4、5、6、および 12 のグリッド数における列の比率を指定できます。

1 列目が画面の 2/3 になるように上記の例を変更すると、次のようになります。

<!-- BASIC GRID EXAMPLE -->
<div class="slds-grid">
 <div class="slds-col slds-size_4-of-6">Column 1</div>
 <div class="slds-col slds-size_1-of-6">Column 2</div>
 <div class="slds-col slds-size_1-of-6">Column 3</div>
</div>

コピー

幅の比率が 4:1:1 の列

サイズ設定ヘルパーを使用して、画面のサイズに応じて異なるレイアウトを指定することもできます。たとえば、次のような 2 列グリッドを作成してみましょう。

  • モバイル画面上に全幅で縦並び
  • 小さな画面上 (> 480 ピクセル) に 1:1 のサイズで横並び
  • 大きな画面上 (> 768 ピクセル) に 3:1 のサイズで横並び

反応型の例

対応するマークアップは次のとおりです。

<!-- RESPONSIVE GRID EXAMPLE -->
<div class="slds-grid slds-wrap">
 <div class="slds-col slds-size_1-of-1 slds-small-size_1-of-2 slds-medium-size_3-of-4">A</div>
 <div class="slds-col slds-size_1-of-1 slds-small-size_1-of-2 slds-medium-size_1-of-4">B</div>
</div>

コピー

このモバイルファーストのアプローチを使用して、必要に応じて特定のブレークポイントで要素の幅を制御できます。これでモバイルページが途中で切れることがなくなります。

ここではグリッドの基本事項について取り上げました。グリッドについての詳細は、Design System の Web サイトでグリッドシステムサイズ設定に関するページを参照してください。次はコードについて説明します。

ページヘッダーの作成

リストビューページを作成してみましょう。おそらく Salesforce の至るところで見たことがあるでしょう。次のワイヤーフレームは、作成しようとしているページを示しています。

  • 上部のヘッダー (適切に配置)
  • メインリスト領域
  • ベースフッター

リストビューのワイヤーフレーム

次のコードを使用して、Trailhead_SLDS_Listview という名前で新しい Visualforce ページを作成します。

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
 <meta charset="utf-8" />
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
 <title>Salesforce Lightning Design System Trailhead Module</title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <!-- Import the Design System style sheet -->
 <apex:slds />
</head>
<body>
 <!-- REQUIRED SLDS WRAPPER -->
 <div class="slds-scope">
 <!-- MASTHEAD -->
 <p class="slds-text-heading_label slds-m-bottom_small">
 Salesforce Lightning Design System Trailhead Module
 </p>
 <!-- / MASTHEAD -->
 <!-- PAGE HEADER -->
 <!-- / PAGE HEADER -->
 <!-- PRIMARY CONTENT WRAPPER -->
 <div class="myapp">
 </div>
 <!-- / PRIMARY CONTENT WRAPPER -->
 <!-- FOOTER -->
 <!-- / FOOTER -->
 </div>
 <!-- / REQUIRED SLDS WRAPPER -->
 <!-- JAVASCRIPT -->
 <!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>

コピー

これがリストビューページのスケルトンアウトラインです。次に、ページヘッダーコンポーネントを追加して、もっと面白味のあるものにしてみます。このコンポーネントには新しいマークアップとクラスが多数ありますが、順に説明していくので心配はいりません。マークアップの <!-- PAGE HEADER --> 部分を次のコードで置き換えます。

<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
 <div class="slds-grid">
 <div class="slds-col slds-has-flexi-truncate">
 <!-- HEADING AREA -->
 <p class="slds-text-title_caps slds-line-height_reset">Accounts</p>
 <h1 class="slds-page-header__title slds-truncate" title="My Accounts">My Accounts</h1>
 <!-- / HEADING AREA -->
 </div>
 <div class="slds-col slds-no-flex slds-grid slds-align-top">
 <button class="slds-button slds-button_neutral">New Account</button>
 </div>
 </div>
 <div class="slds-grid">
 <div class="slds-col slds-align-bottom slds-p-top_small">
 <p class="slds-text-body_small">COUNT items</p>
 </div>
 </div>
</div>
<!-- / PAGE HEADER -->

コピー

ここでページをプレビューすると、開花し始めた (上部だけですが) リストビューページが表示されます。ここで「この美しくスタイル設定されたページヘッダーコンポーネントを作成するのに、どれぐらいの CSS を記述する必要があったのか?」という疑問がわいてくるでしょう。

ヘッダーが完成したリストビュー

これは高度な Design System コンポーネントなので、一行ずつ見ていきます。お気に入りの開発環境でソースコードを開いておくことをお勧めします。

外部ラッパー <div> には、ページヘッダーのスタイル設定を適用するクラス slds-page-header が指定されています。その内部に 2 列のグリッドシステムがあります。

グリッドの 1 列目には 2 つの要素が含まれています。1 つはテキストヘッダーユーティリティクラス、もう 1 つはコンポーネント固有の CSS クラス slds-page-header__title が指定されています。

2 列目は少々複雑です。slds-col slds-no-flex、slds-grid slds-align-top という複数のクラスが適用されています。slds-no-flex は Design System のレイアウトユーティリティクラスの 1 つです。flex プロパティを削除することで、自動的に列のサイズが変更されないようにします。slds-align-top は列のコンテンツが上端に揃うように縦方向の配置を調整する配置ユーティリティクラスです。

2 列目には、最小限のスタイル設定を適用する修飾子クラス slds-button--neutral が指定されたボタンコンポーネントがあります。

グリッドの下にあるページヘッダーの 2 行目は、リストビューの項目数を示すプレースホルダです。

残りのリストビューアウトラインへの入力

次に、作成されるデータテーブルのプレースホルダとして、簡単な順序付きでないリストを追加します。マークアップの <!-- PRIMARY CONTENT WRAPPER --> 部分を次のコードで置き換えます。

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">
 <ul class="slds-list_dotted slds-m-top_large">
 <li>Account 1</li>
 <li>Account 2</li>
 <li>Account 3</li>
 <li>Account 4</li>
 <li>Account 5</li>
 <li>Account 6</li>
 <li>Account 7</li>
 <li>Account 8</li>
 <li>Account 9</li>
 <li>Account 10</li>
 </ul>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->

コピー

ページをプレビューすると、基本的なリストビューレイアウトが表示されます。

レイアウトが完成したリストビュー

デフォルトで、コンテンツは画面の幅いっぱいに表示されます。主コンテンツを画面上の横方向に配置する、またはコンテンツを特定の幅に制限する場合は、slds-container_* ヘルパークラスの 1 つを使用します。

Design System のスタイル設定は、slds-list_dotted クラスと slds-m-top_large クラスが指定された <ul> に適用されます。今回はあまり面白みのない主コンテンツですが、次の単元にご期待ください。

話が少しそれますが、Design System は「Web ページのフレームワーク」ではなく、「アプリケーションのフレームワーク」であることに重点を置いています。そのため、デフォルトで余計なスタイル設定を追加しないようにしています。その代わり、この例で示したように、開発者はスタイル設定を手動で追加することができます。より詳細な制御で正確なレイアウトを作成でき、スペースが限られている場合に大きな違いを生みます。Design System に慣れてくると、ボタンなど多くのコンポーネントに、想定されるデフォルトのスタイル設定が適用されないことがわかるでしょう。

リストビューレイアウトのスケルトンを完成するために、別のグリッドシステムコンポーネントを使用してフッターを追加します。この操作についてはすでにエキスパートとなっていることでしょう。さらに次の 2 つの修飾子クラスを使用します。

  • slds-p-around_large はフッター要素にパディングを追加します。
  • slds-grid_align-spread は 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 -->

コピー

ページをプレビューすると、形になっていくリストビューが表示さます。最新の Lightning UI のスタイル設定を適用するのに CSS を記述する必要はありませでした。HTML マークアップで Design System クラスを適用するだけで済みました。次の単元では、実際のデータを取り込みます。

レイアウトが完成したリストビュー

最後に 1 つ留意すべきなのは、特定のレイアウトの実装では、グリッドシステムが常に最適なコンポーネントだというわけではありません。たとえば、画像とテキストを横に並べたいときは、メディアオブジェクトまたはタイルコンポーネントを使用するだけで済む場合があります。

リソース