yozora夜空

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>
リンク
ボタンリンク
ボタンブロックリンク 
<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タグ英語フォント：Prata by Google Fonts
hタグ日本語フォント：Kaisei Decol by Google Fonts
本文：Klee One by Google Fonts

デフォルトは上記ですが、classを設定すると他のタグでもフォント変更できます。
Prata：Tomorrow is another day. 明日は明日の風が吹く
Kaisei Decol：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="prata">Prata</span>
<span class="kaiseidecol">Kaisei Decol</span>
<span class="kleeone">Klee One</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>