galaxy銀河

heading見出し

heading2 見出し2

heading2見出し

heading2 link見出し2リンク

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

heading3 見出し3

heading3見出し

heading3 link見出し3リンク

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

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

heading4 見出し4

heading5 見出し5
<h4>heading4 見出し4</h4>
<h5>heading5 見出し5</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リスト

リスト

通常

  • リスト
  • リスト
  • リスト

1列

スラッシュ
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
黒丸
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
<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>

1列

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

リスト
テキスト
リスト
テキスト
リスト
テキスト
黒丸
リスト
テキスト
リスト
テキスト
リスト
テキスト
下線
リスト
テキスト
リスト
テキスト
リスト
テキスト
下線 + ボーダー
リスト
テキスト
リスト
テキスト
リスト
テキスト
<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>