Pukuri | espace

header / menu

メインメニューの固定

<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画像

h2 design

h3デザイン

h4デザイン

h5デザイン

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

link

リンク

↓画像リンク

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

decoration

<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})で、スマホ表示時の列設定が可能です
設定されていない場合、列設定クラスの設定をスマホ表示時も使用します

list

通常のリスト

リスト
リスト説明など書けます
続きなど

<ul>
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
    <li class="next">続きなど</li>
</ul>

<li>の中に<span class="description"></span>を入れることで、説明などを書くことができます
<li>にclass="next"を設定すると、マークが「→」になります

リスト（数字）

リスト
リスト説明など書けます

<ol>
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
</ol>

リスト（小さい）

リスト
リスト
リスト
続きなど
リスト内リンク

<ul class="small">
    <li>リスト</li>
    <li>リスト<span class="description">説明など書けます</span></li>
    <li class="next">続きなど</li>
</ul>

<ul>にclass="small"を設定すると、リストが横並びになり、項目間にマークが入ります
<li>にclass="next"を設定すると、マークが「→」になります

タイトルと説明

タイトル: 内容

<dl>
    <dt>タイトル</dt>
        <dd>内容</dd>
</dl>

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

スマホ表示の場合横幅が狭くなるため、縦並びと同じように表示します。

タイトル: 内容
改行OK
タイトル: 内容

<dl class="inline">
    <dt>タイトル</dt>
        <dd>横並びになります</dd>
</dl>

<dl>にclass="inline"を設定すると、<dt>と<dd>が横並びになります

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

タイトル: 線が付きます
タイトル: 線が付きます

タイトル: 横並びにもできます
タイトル: 横並びにもできます

<dl class="border">
    <dt>タイトル</dt>
        <dd>線が付きます</dd>
</dl>
<dl class="border inline">
    <dt>タイトル</dt>
        <dd>横並びにもできます</dd>
</dl>

<dl>にclass="border"を設定すると外枠が付きます
class="inline"との組み合わせも可能です

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"を設定すると必須マークが付きます