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

ステップ 3: スタイルシートの静的リソースを追加する

Warehouse アプリケーションの外観を洗練させるために、カスタムスタイルシート (CSS ファイル) を使用して、色、フォント、およびページのテキスト配置を指定します。大部分の Web ページおよび Web デザイナは、この目的のために標準の Web テクノロジである CSS を使用するため、これはすでに作成されています。ページでスタイルシートを参照するには、静的リソースとしてアップロードする必要があります。静的リソースは、Salesforce に保存されるファイルまたはファイルの集合です。スタイルシートが静的リソースとして追加されると、Visualforce ページから参照できるようになります。

スタイルシートを静的リソースとして追加する手順は、次のとおりです。

ブラウザで developer.force.com/workbook/styles にアクセスします。ファイルをデスクトップにダウンロードします。ファイルが自動的にダウンロードされる場合、.zip ファイルとして保存してください。
アプリケーションに戻り、[設定] から [クイック検索] ボックスに「静的リソース」と入力し、[静的リソース] を選択して [新規] をクリックします。
[名前] 項目に「styles」(スタイル) と入力します。
[ファイルを選択] または [参照...] をクリックし、ダウンロードした styles.zip ファイルを探します。
[キャッシュコントロール] ドロップダウンリストで、[公開] を選択します。
$[名前] 項目が「styles」(スタイル)、[ファイル] 項目が「C:\Documents and Settings\mkorf\Desktop\styles.zip」、[キャッシュコントロール] ドロップダウンリストが [公開] に設定された [新規静的リソース] ページ$
[保存] をクリックします。

次に、スタイルシートを参照するように Visualforce ページを変更する必要があります。

ページを作成したときのように、テキスト /apex/CountSheet を Salesforce インスタンスの URL に追加します。
<apex:page> タグの属性を変更し、次のコードを入力して標準のスタイルシート、ヘッダー、およびサイドバーを削除します。
1<apex:page standardStylesheets="false" showHeader="false" sidebar="false">
次に、スタイルシートの検索場所をページに通知する必要があります。そのため、最初の <apex:page> タグの下に新しい行を追加し、「<apex:」と入力します。
エディタにはコード入力支援が搭載されており、このコンテキストで使用できる要素のドロップダウンリストが表示されます。「stylesheet」と入力し始めると、apex:stylesheet が表示されるので、それを選択します。
次に、次のようにスタイルシートの場所を指定します。
1<apex:stylesheet value="{!URLFOR($Resource.styles, 'styles.css')}" />

コードが、次のようになっていることを確認します。

1<apex:page standardStylesheets="false" showHeader="false" sidebar="false"> 
2
3<apex:stylesheet value="{!URLFOR($Resource.styles, 'styles.css')}" />
4
5<h1>Inventory Count Sheet</h1> 
6
7</apex:page>

ページエディタの上部にある [Save (保存)] アイコンをクリックします。

ページの外観が大きく変わりました。タイトルのフォントと場所が異なっており、標準のヘッダーとサイドバーが表示されなくなっています。

もうひとこと...

このスタイルシートのコードをもう少し詳しく見ていきましょう。

$Resource は、Visualforce ページでアクセスできるグローバル変数です。$Resource.styles を使用して、前に作成した「styles」(スタイル) と呼ばれるリソースを参照します。
URLFOR() 関数は、静的リソースおよびそのリソース内のファイルを特定し、最終ページで生成される URL を計算します。構文に見覚えがある場合、その理由は、Visualforce ページの表示時に動的に値を評価するためにこの構文をすでに見ているためです。
小さいスタイルシートが 1 つしかない .zip ファイルをダウンロードした理由は何でしょうか? 通常、スタイルシート (およびその他の静的リソース) は、複数のバンドルで形成されているため、.zip ファイルにアクセスするコードを参照する方が便利です。単純に styles.css をアップロードした場合は、<apex:stylesheet value="{$Resource.styles}" /> を使用してコードを参照できます。そのコードの方が単純ですが、アーカイブのファイルを参照する方法がありません。静的リソースの .zip ファイルとしてスタイルシートをアップロードしたら、一重引用符の間にスタイルシートの名前を入力するだけで済みます (<apex:stylesheet value="{!URLFOR($Resource.styles, 'enter_stylesheet_name.css')}" />)。

Force.com ワークブック

ステップ 3: スタイルシートの静的リソースを追加する

もうひとこと...