Visualforce Template (SLDS)

#1.基礎知識
**■[Visualforce でのテンプレートの使用](https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_templates_intro.htm)**

- <apex:component>
- <apex:include>
- <apex:insert> および <apex:composition> 
- <apex:composition> および <apex:define>

**■Lightning Design System**
https://lightningdesignsystem.com/

#2.実装例
##メタデータ構成
📁components
　・Comp_Header.component
　・Comp_Footer.component
📁pages
　・Page_CSS.page
　・Page_Javascript.page
　・Page_Template.page
　・xxx_Page_Test.page


##サンプルソース
```php5:Comp_Header.component
<apex:component>
    
</apex:component>
```

```php5:Comp_Footer.component
<apex:component>
    
</apex:component>
```

```php5:Page_CSS.page
<apex:page >
    <style>
        
    </style>
</apex:page>
```

```php5:Page_Javascript.page
<apex:page>
    <script language="javascript">

    </script>
</apex:page>
```

```php5:Page_Template.page
<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">
        <head>
            <title>Visualforce SLDS Sample</title>
            <meta charset="utf-8" />
            <apex:slds />
            <apex:include pageName="Page_CSS" />
            <apex:include pageName="Page_Javascript" />
        </head>
        <body>
            <div class="slds-scope">
                <c:Comp_Header />
                <apex:insert name="content"/>
                <c:Comp_Footer />
            </div>
        </body>
    </html>
</apex:page>
```

```php5:xxx_Page_Test.page
<apex:page>
    <apex:composition template="Page_Template">
        <apex:define name="content">
            <!-- 画面コンテンツ -->
            <ul class="slds-timeline">
                <li class="slds-timeline__item">
                    <span class="slds-assistive-text">Task</span>
                    <div class="slds-media slds-media--reverse">
                    <div class="slds-media__figure">
                        <div class="slds-timeline__actions">
                        <p class="slds-timeline__date">Feb 24</p>
                        <button class="slds-button slds-button--icon-border-filled">
                            <svg aria-hidden="true" class="slds-button__icon">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#switch')}"></use>
                            </svg>
                            <span class="slds-assistive-text">Switch</span>
                        </button>
                        </div>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-media slds-media--timeline slds-timeline__media--task">
                        <div class="slds-media__figure">
                            <svg aria-hidden="true" class="slds-icon slds-icon-standard-task slds-timeline__icon">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#task')}"></use>
                            </svg>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-media slds-tile slds-media--small">
                            <div class="slds-media__figure">
                                <label class="slds-checkbox" for="mark-complete">
                                <input name="checkbox" type="checkbox" id="mark-complete" />
                                <span class="slds-checkbox--faux"></span>
                                <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                                </label>
                            </div>
                            <div class="slds-media__body">
                                <p class="slds-tile__title slds-truncate"><a href="#">Review proposals for EBC deck with larger team and have marketing review this</a></p>
                                <ul class="slds-tile__detail slds-list--horizontal slds-text-body--small">
                                <li class="slds-list__item slds-m-right--large">
                                    <dl class="slds-dl--inline">
                                    <dt class="slds-dl--inline__label">Contact:</dt>
                                    <dd class="slds-dl--inline__detail"><a href="#">Lei Chan</a></dd>
                                    </dl>
                                </li>
                                <li class="slds-list__item">
                                    <dl class="slds-dl--inline">
                                    <dt class="slds-dl--inline__label">Assigned to:</dt>
                                    <dd class="slds-dl--inline__detail"><a href="#">Betty Mason</a></dd>
                                    </dl>
                                </li>
                                </ul>
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
            </ul>
        </apex:define>
    </apex:composition>
</apex:page>
```