[第7回] 帳票のメインエリアに顧客会社名と請求金額を出力しよう
本講座はvisualforceを使い、Salesforce帳票の作り方を学んでいく講座です。全13回の講義終了後、商談から帳票を出力できるようになる事をGoalとして講座を進めていきます。
メンバーシップ（Salesforceデベロッパープラン）加入者は無料でご覧いただくことが可能です。
第6回講義でPDF帳票のフッター部分に帳票の出力日を表示できるようになりました。
第7回講義では、帳票のメインエリアに顧客会社名と請求金額を出力できるようにデザイン調整していきましょう。
メインエリアのHTMLを修正する
帳票のメインエリアに商談データを出力していきますが、まずはHTMLで出力する際のデザインを整えていきましょう。
visualforceページの<body></body>間を下記のように修正してみてください。HTMLで、顧客会社名や請求時のメッセージ、合計金額のテーブルデータを作成します。
<body>
<div class="invoiceTitle">請求書</div>
<div class="clientName">株式会社YYYYYY 御中</div>
<div class="invoiceMessage">下記の通り、御請求申し上げます。</div>
<table class="totalAmount">
<tr>
<th>合計</th>
<td>120,000円（税込）</td>
</tr>
</table>
</body>この状況でデベロッパー環境にデプロイしてPDFを確認してみると、下記のようになってデザインが崩れていると思います。
次からはこのデザインを整えていきます。
CSSでデザインを調整する
ここから先は
6,112字
/
3画像
いつもサポートいただきありがとうございます! クリエイター活動の励みになります!