## heading見出し

## heading2 見出し２

## heading2見出し

## heading2 link見出し2リンク

    <h2>heading2 見出し２</h2>
    <h2><span>heading2<span>見出し</span></span></h2>
    <h2><a href="">heading2 link<span>見出し2リンク</span></a></h2>

### heading3 見出し３

### heading3見出し

### heading3 link見出し3リンク

    <h3>heading3 見出し３</h3>
    <h3><span>heading3<span>見出し</span></span></h3>
    <h3><a href="">heading3<span>見出し</span></a></h3>

h1～h3タグは背景文字可能です。spanタグとaタグで対応しています。

#### heading4 見出し４

##### heading5 見出し５

    <h4>heading4 見出し４</h4>
    <h5>heading5 見出し５</h5>

## decoration装飾

bold 太字 em 強調 strong 重要

水平線↓

### 背景に文字

Tomorrow is another day.明日は明日の風が吹く
Tomorrow is another day.明日は明日の風が吹く
Tomorrow is another day.明日は明日の風が吹く
Tomorrow is another day.明日は明日の風が吹く
背景に入れる文字数が全面より少ないほうが見栄えが良いです。
背景色は文字色に準拠しています。

    <b>bold 太字</b>
    <em>em 強調</em>
    <strong>strong 重要</strong>
    <hr>
    <span>Tomorrow is another day.<span class="back">明日は明日の風が吹く</span></span>
    <span>Tomorrow is another day.<span class="back up">明日は明日の風が吹く</span></span>
    <span>Tomorrow is another day.<span class="back right">明日は明日の風が吹く</span></span>
    <span>Tomorrow is another day.<span class="back right up">明日は明日の風が吹く</span></span>

## linkﾘﾝｸ

リンク
ボタンリンク
ボタンブロックリンク

    <a href="">リンク</a>
    <a href="" class="btn">ボタンリンク</a>
    <a href="" class="btn block">ボタンブロックリンク</a>

### 新規タブで開く

リンク
ボタンリンク
ボタンブロックリンク

    <a href="" target="_blank">リンク</a>
    <a href="" target="_blank" class="btn">ボタンリンク</a>
    <a href="" target="_blank" class="btn block">ボタンブロックリンク</a>

### リンクがない（hrefがない）

リンク
ボタンリンク
ボタンブロックリンク リンク
ボタンリンク
ボタンブロックリンク

    <aリンク</a>
    <a class="btn">ボタンリンク</a>
    <a class="btn block">ボタンブロックリンク</a>
    <a target="_blank">リンク</a>
    <a target="_blank" class="btn">ボタンリンク</a>
    <a target="_blank" class="btn block">ボタンブロックリンク</a>

## listﾘｽﾄ

### リスト

#### 通常

- リスト
- リスト
- リスト

#### １列

##### スラッシュ

- リスト
- リスト
- リスト
- リスト
- リスト
- リスト

##### 黒丸

- リスト
- リスト
- リスト
- リスト
- リスト
- リスト

    <ul>
        <li>リスト</li>
    </ul>
    <ul class="row slash">
        <li>リスト</li>
    </ul>
    <ul class="row disc">
        <li>リスト</li>
    </ul>

### ナンバーリスト

1. リスト
2. リスト
3. リスト

### 定義リスト

#### 通常

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

#### 下線

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

#### 下線 + ボーダー

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

    <dl>
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>
    <dl class="underline">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>
    <dl class="underline border">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>

#### １列

スマホでは通常と同じ表示です。

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

##### 黒丸

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

##### 下線

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

##### 下線 + ボーダー

リスト
  テキスト
リスト
  テキスト
リスト
  テキスト

    <dl class="row">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>
    <dl class="row disc">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>
    <dl class="row underline">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>
    <dl class="row underline border">
        <dt>リスト</dt>
        <dd>テキスト</dd>
    </dl>

## formﾌｫｰﾑ

必須項目

テキスト
テキストエリア
ボタン
チェックボックス
  チェック チェック チェック
ラジオボタン
  ラジオ ラジオ ラジオ

    <form>
        <dl>
            <dt class="required">テキスト</dt>
            <dd><input type="text" placeholder="text"></dd>

            <dt>テキストエリア</dt>
            <dd><textarea placeholder="text"></textarea></dd>

            <dt>ボタン</dt>
            <dd><button>button</button>
                <input type="button" value="input button">
                <input type="submit" value="input submit">
            </dd>

            <dt>チェックボックス</dt>
            <dd><label><input type="checkbox" name="check">チェック</label>
                <label><input type="checkbox" name="check">チェック</label>
                <label><input type="checkbox" name="check">チェック</label>
            </dd>

            <dt>ラジオボタン</dt>
            <dd><label><input type="radio" name="radio">ラジオ</label>
                <label><input type="radio" name="radio">ラジオ</label>
                <label><input type="radio" name="radio">ラジオ</label>
            </dd>
        </dl>
    </form>

## otherその他

### フォント

hタグ英語フォント：Playball by Google Fonts
hタグ日本語フォント：Klee One by Google Fonts
本文：Zen Old Mincho by Google Fonts

デフォルトは上記ですが、classを設定すると他のタグでもフォント変更できます。
Playball：Tomorrow is another day. 明日は明日の風が吹く
Yomogi：Tomorrow is another day. 明日は明日の風が吹く
Klee One：Tomorrow is another day. 明日は明日の風が吹く
Zen Kaku Gothic New：Tomorrow is another day. 明日は明日の風が吹く
Zen Kaku Gothic New by Google Fonts

    <span class="playball">Playball</span>
    <span class="kleeone">Klee One</span>
    <span class="zenoldmincho">Zen Old Mincho</span>
    <span class="zenkaku">Zen Kaku Gothic New</span>

### 配置

通常表示

中央表示

右端表示

### 枠

通常の枠

通常の枠 - 太め

ドットの枠

ドットの枠 - 太め

破線の枠

破線の枠 - 太め

    <p>通常表示</p>
    <p class="center">中央表示</p>
    <p class="right">右端表示</p>

    <p class="border">通常の枠</p>
    <p class="border border-2">通常の枠 - 太め</p>
    <p class="dotted">ドットの枠</p>
    <p class="dotted border-2">ドットの枠 - 太め</p>
    <p class="dashed">破線の枠</p>
    <p class="dashed border-2">破線の枠 - 太め</p>

sectionタグは自動で枠が付きます
小説本文部分は枠を消せます。

    <section>sectionタグは自動で枠が付きます</section>
    <section id="NOVEL-MAIN">小説本文部分は枠を消せます。</section>