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

ビジュアルデザインの考慮事項

作成する Visualforce ページの外観を Salesforce1 に近づけるには、CSS スタイル設定や、応答性の高い設計を使用して、HTML を最小限に抑えます。

フォントとスタイル

Salesforce1 のビジュアルデザインには、Salesforce1 に特別ライセンスが供与されている、Proxima Nova というサンセリフ書体が使用されています。組織の各ユーザのデバイスにこのフォントがインストールされていないことがありますが、次の CSS フォントスタックは利用可能な中で最も近いフォントを使用します。

1p { 
2    font-family: "ProximaNovaSoft-Regular", Calibri, 
3        "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI", 
4         Arial, sans-serif; 
5}

ページの適切なテキストブロックおよびスタイルと一致するようにセレクタを変更します。

また、通常のテキスト要素やフォーム要素に使用するフォントサイズを若干大きくすることもお勧めします。フォントが大きいと文字が読みやすくなり、フォーム要素をタップしやすくなります。最初に記述する完全なスタイルブロックを次に示します。

1<style>
2    html, body, p { 
3        font-family: "ProximaNovaSoft-Regular", Calibri, 
4            "Gill Sans", "Gill Sans MT", Candara, Segoe, 
5            "Segoe UI", Arial, sans-serif; 
6        font-size: 110%;
7    }
8    input { font-size: 95%; }
9</style>

ページで Salesforce1 スタイルシートを直接参照することや、その中のスタイルに依存することはサポートされていません。Salesforce1 の進化に伴ってスタイルが予想外の方向に変化する可能性があります。ページがサポート対象外のスタイルに依存している場合、将来ページが壊れる可能性があります。

警告

HTML マークアップ

組織の Visualforce ページを Salesforce フルサイトのデザインと一致させる場合は、多くのケースで、Salesforce のヘッダー、サイドバー、スタイル設定や、<apex:pageBlock> および子コンポーネントが使用されています。<apex:page showHeader="false" standardStylesheets="false" ...> を設定してこれらの要素を明示的に無効にしないでください。これらの要素は、Salesforce1 内でページを実行するときに自動的に無効になります。

ただし、<apex:pageBlock> および子コンポーネントの使用は見直すことをお勧めします。これを使用すると、Salesforce フルサイトのデザインに一致させることを明示的に指示することになるため、標準のスタイルシートがオフの場合でも、これらが生成するマークアップが Salesforce1 に引き継がれます。この場合は、マークアップがさらに複雑になり、Salesforce1 と一致するスタイル設定を適用することが難しくなります。

代わりに、シンプルな静的 HTML マークアップ、または選択したモバイルツールキットで必要なマークアップを使用します。次のセクションでマークアップのサンプルを示します。

応答性の高い設計

Salesforce1 ページでは、応答性の高い設計技法を使用して、デバイスに合わせてレイアウトを最適化します。たとえば、携帯電話端末には縦並びの 1 列レイアウト、タブレットには横並びの 2 列レイアウトを使用します。Salesforce1 で使用する Visualforce ページにも��様の技法を使用できます。

最初に、ページにデフォルトのレイアウトを作成します。

1/* Default CSS: 2 columns */
2.content-block {
3    width: 50%;
4    float: left;
5}

次に、CSS スタイル設定およびメディアクエリを使用して、応答性を備えたレイアウトにします。

1/* CSS phone */
2@media screen and (max-width: 767px) {
3    .content-block {
4        width: 100%;
5        float: none;
6    }
7}

次の HTML を実際に Visualforce ページで試してみます。上記の CSS スニペットを、HTML と同じ Visualforce ページ上の <style> タグ間に配置し、続いてブラウザウィンドウの角をドラッグしてレイアウトの応答性を確認します。

1<!-- HTML for two blocks of content -->
2<!-- On a phone they live underneath each other -->
3<!-- On bigger screens they live next to each other -->
4
5<div class="content-block">
6    top on the phone, left on big screens
7</div>
8
9<div class="content-block">
10    bottom on the phone, right on big screens
11</div>

Salesforce1 モバイルアプリケーション開発者ガイド

ビジュアルデザインの考慮事項

フォントとスタイル

HTML マークアップ

応答性の高い設計