logo

【重要】固定ページパーツ一覧

これはh2タグです。大見出しで使用します。

<h2>これはh2タグです。大見出しで使用します。</h2>

これはh3タグです。小見出しで使用します。

<h3>これはh3タグです。小見出しで使用します。</h3>

これはpタグです。基本的なテキストはこのタグで記述します。改行は<br>で表現します。 文字の途中にリンクを含めることができます。※<p>には必ず「class=”text”」をつけてください。」


<p class="text">これはpタグです。基本的なテキストはこのタグで記述します。改行は<br>で表現します。
文字の途中にaタグ(<a href="###">リンク</a>)を含めることができます。※pには必ず「class="text"」をつけてください。」</p>
    

<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>
    

別ページに遷移するボタンは下記ボタンで表現します。(pタグの中に含めてください。)

テストボタン


<p class="text"><a class="btn-01" href="###">テストボタン</a></p>
    

前ページに戻るボタンは下記ボタンで表現します。(pタグの中に含めてください。)

前のページに戻る


<p class="text"><a href="" class="btn-02" onclick="window.history.back(); return false;">前のページに戻る</a></p>
    
見出し 見出し 見出し
テキスト1 テキスト1 テキスト1
テキスト2 テキスト2 テキスト2
テキスト3 テキスト3 テキスト3
テキスト4 テキスト4 テキスト4

        <table class="table-01">
        <tbody>
            <tr>
                <!-- このスタイルで各見出しの幅を調整できます -->
                <th style="width: 20%;">見出し</th>
                <th style="width: 40%;">見出し</th>
                <th style="width: 40%;">見出し</th>
            </tr>
            <tr>
                <td>テキスト1</td>
                <td>テキスト1</td>
                <td>テキスト1</td>
            </tr>
            <tr>
                <td>テキスト2</td>
                <td>テキスト2</td>
                <td>テキスト2</td>
            </tr>
            <tr>
                <td>テキスト3</td>
                <td>テキスト3</td>
                <td>テキスト3</td>
            </tr>
            <tr>
                <td>テキスト4</td>
                <td>テキスト4</td>
                <td>テキスト4</td>
            </tr>
        </tbody>
    </table>
    
見出し テキスト1 テキスト1 テキスト1 テキスト1
見出し テキスト2 テキスト2 テキスト2 テキスト2
見出し テキスト3 テキスト3 テキスト3 テキスト3
見出し テキスト4 テキスト4 テキスト4 テキスト4
見出し テキスト5 テキスト5 テキスト5 テキスト5

        <table class="table-02">
        <tbody>
            <tr>
                <th style="width: 30%;">見出し</th>
                <td style="width: 30%;">テキスト1</td>
                <td style="width: 20%;">テキスト1</td>
                <td style="width: 10%;">テキスト1</td>
                <td style="width: 10%;">テキスト1</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>テキスト2</td>
                <td>テキスト2</td>
                <td>テキスト2</td>
                <td>テキスト2</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>テキスト3</td>
                <td>テキスト3</td>
                <td>テキスト3</td>
                <td>テキスト3</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>テキスト4</td>
                <td>テキスト4</td>
                <td>テキスト4</td>
                <td>テキスト4</td>
            </tr>
            <tr>
                <th>見出し</th>
                <td>テキスト5</td>
                <td>テキスト5</td>
                <td>テキスト5</td>
                <td>テキスト5</td>
            </tr>
        </tbody>
    </table>
    

余白を調整したい場合は、汎用クラスを使用してください。「margin-top: 5px〜50px」「margin-bottom: 5px〜50px」を5pxずつ用意しています。

margin-top命名規則:mt5、mt10、mt30、mt50など

margin-bottom命名規則:mb5、mb10、mb30、mb50など


<h2 class="mt10">〜〜〜〜</h2>
<p class="text mt30">〜〜〜〜</p>
<table class="table-02 mb20">〜〜〜〜</table>