この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

SLDS を使用した反応型ページの設計

反応型設計は、さまざまな画面サイズで最良の表示環境 (読みやすさや操作のしやすさなど) を提供するオンラインユーザインターフェースを作成することを目的とする Web 設計方法です。

反応型ユーザインターフェースは、流動的なアスペクト比ベースのグリッド、柔軟な画像、CSS3 メディアクエリを使用して、レイアウトを画面サイズに適応させます。反応型設計を使用して、携帯電話やタブレットでも見やすく滑らかに動作する Visualforce ページを作成できます。

標準の Salesforce1 ページでは、反応型設計を使用してデバイスに合わせて最適化されたレイアウトを提供します。主な技法として、携帯電話には縦並びの 1 列レイアウト、タブレットには横並びの 2 列レイアウトがあります。ページはすべてのデバイスで同じであり、表示される画面サイズに適応します。

SLDS グリッドシステム

Lightning Design System (SLDS) は Flexbox に基づくグリッドを使用して、柔軟性があり、モバイル優先の、デバイスに依存しないスキャフォールディングシステムを提供します。グリッドシステムを使用すると、ページをいくつかの行と列に分割し、さまざまなサイズの画面に合わせてレイアウトのバリエーションを定義できます。グリッドをネストして複雑なレイアウトを作成できます。

グリッドシステムには、グリッドラッパー (slds-grid クラス) とその中の列 (slds-col クラス) の 2 つの部分があります。デフォルトでは、列のサイズはそのコンテンツを基準にして設定されます。

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

SLDS を使用した反応型設計のページの作成

開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「SLDSResponsivePage」と入力します。

エディタで、任意のマークアップを次のように置き換えます。

1<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
2
3  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
4    <head>
5      <meta charset="utf-8" />
6      <meta http-equiv="x-ua-compatible" content="ie=edge" />
7      <title>SLDS ResponsiveDesign Visualforce Page in Salesforce1</title>
8      <meta name="viewport" content="width=device-width, initial-scale=1" />
9
10       <!-- Import the Design System style sheet -->
11       <apex:slds />
12    </head>
13    <body>
14
15      <!-- REQUIRED SLDS WRAPPER -->
16      <div class="slds-scope">
17
18        <!-- PRIMARY CONTENT WRAPPER -->
19
20          <!-- RESPONSIVE GRID EXAMPLE -->
21          <div class="myapp">
22            <div class="slds-grid slds-wrap">
23              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
24                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 1</div>
25              </div>
26              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
27                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>
28              </div>
29            </div>
30          </div>
31          <!-- / RESPONSIVE GRID EXAMPLE -->
32      </div>
33    </body>
34  </html>
35</apex:page>

このコードは、2 列のグリッドを作成し、2 つの列を次のように設定します。

モバイル画面の全幅および縦方向
(480 ピクセルを超える) 小さい画面では 1 対 1 サイズ、横並び
(768 ピクセルを超える) 大きい画面では 3 対 1 サイズ、横並び

デスクトップとモバイルデバイスでこのページを表示して、反応型設計が機能していることを確認します。

Visualforce 開発者ガイド

SLDS を使用した反応型ページの設計

SLDS グリッドシステム

SLDS を使用した反応型設計のページの作成