sakura桜

heading

heading2 見出し２

heading3 見出し３

heading4 見出し４

heading5 見出し５
<h2>heading2 見出し２</h2>
<h3><span>heading3 見出し３</span></h3>
<h4><span>heading4 見出し４</span></h4>
<h5><span>heading5 見出し５</span></h5>

decoration

bold 太字 em 強調 strong 重要

水平線↓

背景に文字

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

<span>前面文字<span class="back">背景文字</span></span>
<span>前面文字<span class="back up">背景文字上</span></span>
<span>前面文字<span class="back right">背景文字右</span></span>
<span>前面文字<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>

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

リンク
ボタンリンク
ボタンブロックリンク リンク
ボタンリンク
ボタンブロックリンク 
<a>リンク</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></dd>
        
        <dt>ラジオボタン</dt>
        <dd><label><input type="radio" name="radio">ラジオ</label></dd>
    </dl>
</form>

other

パーティクル

下記コードをbody閉じタグ直前に追記すると、背景に桜のパーティクルを追加できます。
小説ページでパーティクルなし版を見れます。
jsファイルのパスは適宜書き直してください。 

<!-- 桜パーティクル -->
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/particle.js"></script>

フォント

headingタグ 英語：Glass Antiqua byGoogle Fonts
heading1タグ 日本語：Kaisei Opti byGoogle Fonts
heading2～5タグ 日本語：Zen Kurenaido byGoogle Fonts
本文：Klee One byGoogle Fonts

<span class="glass">Glass Antiqua;</span>
<span class="kaisei">Kaisei Opti</span>
<span class="zenkurenoido">Zen Kurenaido</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>