2023 卯 | espace

ヘッダー
メニュー

<body class="fix-menu"><!-- 省略 --></body>

<body>にclass="fix-menu"を設定すると、ページを開いた直後からスクロール時と同じコンパクトなメニューの表示になります

下部固定メニュー

<nav class="fixed-menu">
    <ul>
        <li class="prev"><a href="【URL】"></a></li>
        <li class="next"><span></span></li>
        <li id="pageTop" class="pagetop"><button></button></li>
    </ul>
</nav>

<nav class="fixed-menu">～</nav>内に<ul>～</ul>を設定してください
<li>に下部固定ボタンクラスを設定すると、<li>内の<a>または<span>固定ボタンとして表示します
トップへ戻るボタンは上記のままご使用ください

下部固定ボタンクラス

prev前へ
next次へ
homeホーム
toc目次
charactersキャラクター
images画像

ｈ２デザイン

h3デザイン

h4デザイン

h5デザイン

<h2><span>h2デザイン</span></h2>
<h3><span>h3デザイン</span></h3>
<h4><span>h4デザイン</span></h4>
<h5><span>h5デザイン</span></h5>

リンク

↓画像リンク

<a href="#">リンク</a>
<a href="#"><img src="画像URL" alt="画像説明"></a>

装飾

<b>要素

<em>要素

<strong>要素

↓<hr>水平線

<b>b要素</b>
<em>em要素</em>
<strong>strong要素</strong>
<hr>

要素内の文字を全て太字にします

要素内の文字を全て小さいサイズにします

要素内の文字を全て大きいサイズにします

<p class="text-bold">要素内の文字を全て太字にします</p>
<p class="text-small">要素内の文字を全て小さいサイズにします</p>
<p class="text-large">要素内の文字を全て大きいサイズにします</p>

文字を左寄せにします

文字を中央寄せにします

文字を右寄せにします

組み合わせも可能です

<p class="text-left">文字を左寄せにします</p>
<p class="text-center">文字を中央寄せにします</p>
<p class="text-right">文字を右寄せにします</p>
<p class="text-bold text-center">組み合わせも可能です</p>

太字にしたい要素にclass="text-bold"を設定すると、要素内の文字をすべて太字にできます
class="text-right"を設定すると、要素内の文字を右寄せにします
class="text-center"を設定すると、要素内の文字を中央寄せにします

枠線ありブロック

<div class="box">
    <p>枠線ありブロック</p>
</div>

枠線を表示したい要素にclass="box"を設定すると、枠線を表示する
文字寄せ等と併用できます

スクロール可能ブロック
2行目
3行目
4行目
5行目

<div class="scrollbox">
    <p>スクロール可能ブロック</p>
</div>

class="scrollbox"を設定すると、高さを制限してスクロールバーを表示する

1行表示ブロックテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="onlyrow">1行表示ブロック</p>

class="onlyrow"を設定すると、1行のみ表示し、超過テキストは「…」で省略表示する

1つめのブロック

2つめのブロック

3つめのブロック

<div class="column column-3 column-sp-2">
    <div>1つめのブロック</div>
    <div>2つめのブロック</div>
    <div>3つめのブロック</div>
</div>

ブロック要素にcolumnと列設定クラス(column-{2~3})を設定すると、子要素を横並びに表示します
スマホ列設定クラス(column-sp-{1~3})で、スマホ表示時の列設定が可能です
設定されていない場合、列設定クラスの設定をスマホ表示時も使用します

form

横並びのフォーム

<form class="form-inline">
    <input type="text" placeholder="お名前">
    <input type="text" placeholder="一言">
    <button type="submit">送信</button>
</form>

<form>にclass="form-inline"を設定すると、<form>内の要素が横並びになります

大きなフォーム

<form class="form-block">
    <input type="text" placeholder="お名前">
    <textarea  placeholder="本文"></textarea>
    <button type="submit">送信</button>
</form>

<form>にclass="form-block"を設定すると、<form>内の要素がフォームエリア幅一杯に広がります

大きなフォーム（項目名あり）

<form class="form-block">
    <dl class="inline">
        <dt>name</dt>
            <dd><input type="text" placeholder="お名前"></dd>
        <dt class="required">message</dt>
            <dd><textarea  placeholder="本文"></textarea></dd>
    </dl>
    <button type="submit">送信</button>
</form>

横並びのフォームと大きなフォームを組み合わせると、項目名とフォーム要素を横並びにできます
<dt>にclass="required"を設定すると必須マークが付きます

卯

ヘッダー
メニュー

下部固定メニュー

下部固定ボタンクラス

ｈ２デザイン

h3デザイン

h4デザイン

h5デザイン

リンク

装飾

リスト

通常のリスト

リスト（数字）

リスト（小さい）

タイトルと説明

タイトルと説明（横並び）

タイトルと説明（枠あり）

form

横並びのフォーム

大きなフォーム

大きなフォーム（項目名あり）

ヘッダーメニュー

下部固定メニュー

下部固定ボタンクラス

ｈ２デザイン

h3デザイン

h4デザイン

h5デザイン

リンク

装飾

リスト

通常のリスト

リスト（数字）

リスト（小さい）

タイトルと説明

タイトルと説明（横並び）

タイトルと説明（枠あり）

form

横並びのフォーム

大きなフォーム

大きなフォーム（項目名あり）

ヘッダー
メニュー