<h2>これはh2タグです。大見出しで使用します。</h2>
<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>