room

<button data-target="mainMenu" class="manu-toggler" data-open="false"></button>
<nav id="mainMenu" class="menu">
    <ul>
        <li><a href="#">メニュー1</a></li>
        <ul class="child">
            <li><a href="#">子階層</a></li>
        </ul>
        <li><a href="#">メニュー2</a></li>
    </ul>
</nav>

• <nav>には必ずid="mainMenu"を設定してください。
  ※idを変更する場合は、<button>のdata-targetも変更してください。
• <button>には以下の設定をしてください。
• id="mainMenuBtn"
• data-target="mainMenu"
  ※data-targetは必ず<nav>のidと同じにしてください。
• class="manu-toggler"
• data-open="false"
• メニューの<ul>の中にclass="child"を設定した<ul>を入れると子階層としてレイアウトされます

<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="#" class="image"><img src="画像URL" alt="画像説明"></a>

• リンクの<a>にclass="image"を設定するとマウスを乗せた時の背景色が消えます

<b>要素

<em>要素

<strong>要素

↓<hr>水平線

---

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

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

文字を右寄せにします

文字を中央寄せにします

組み合わせも可能です

<p class="text-bold">要素内の文字を全て太字にできます</p>
<p class="text-right">文字を右寄せにします</p>
<p class="text-center">文字を中央寄せにします</p>
<p class="text-bold text-center">組み合わせも可能です</p>

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

<div class="list-image">
    <a href="#">
        <img src="画像URL">
        <div>テキスト</div>
    </a>
    <span>
        <img src="画像URL">
        <div>テキスト</div>
    </span>
</div>

日記や一言メモのように使用しても可愛いコンテンツブロックです。

画像やプロフィール項目を表示したい場合は、この基本の表示に要素を追加していきます。
見出しなどの要素も自由に追加することができます。

<div class="list-content">
    <div>
        <h5>タイトルなど入れられます</h5>
        <div class="line">
            <p>
                テキストのみのコンテンツ
            </p>
        </div>
    </div>
</div>

<div class="list-content">
    <div>
        <div class="head">
            <img src="画像URL">
            <dl>
                <dt class="text-bold">項目名</dt>
                    <dd>内容</dd>
                <dt class="text-bold">項目名</dt>
                    <dd>内容</dd>
            </dl>
        </div>
        <div>
            <p>
                テキスト
            </p>
        </div>
    </div>
</div>

<div class="list-content">
    <div>
        <div class="head image-block">
            <img src="画像URL">
            <dl>
                <dt class="text-bold">項目名</dt>
                    <dd>内容</dd>
                <dt class="text-bold">項目名</dt>
                    <dd>内容</dd>
            </dl>
        </div>
        <div>
            <p>
                テキスト
            </p>
        </div>
    </div>
</div>

<img src="img/contents/sample1.png" class="w-sm">

<div class="list-content">
    <div>
        <div class="head image-block">
            <img src="画像URL" class="w-xl">
        </div>
        <div>
            <p>
                テキスト
            </p>
        </div>
    </div>
</div>

<nav class="bottom-menu">
    <ul>
        <li><a href="#" class="icon icon-prev"></a></li>
        <li><a href="#" class="icon icon-list"></a></li>
        <li><a href="#" class="icon icon-next"></a></li>
    </ul>
</nav>

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

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

• <li>の中に<span class="description"></span>を入れることで、説明などを書くことができます

タイトル

内容

<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 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>内の要素がフォームエリア幅一杯に広がります

name

message

送信

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

<div class="collapse">
    <button class="card-title toggler toggler-inline" data-content_type="collapse" data-target="openSample">
        タイトル
    </button>
    <div id="openSample" class="collapse-body" data-open="false">
        コンテンツ
    </div>
</div>

• ボタンのdata-targetとコンテンツ部分のidが一致するコンテンツを開きます。
• data-target="openSample"とid="openSample"の値を一致させてください
• 親要素にclass="collapse"を必ず設定してください
• ボタンにclass="toggler", data-content_type="collapse"を必ず設定してください
• コンテンツにclass="collapse-body", data-open="false"を必ず設定してください

<div class="collapse">
    <button class="card-title toggler toggler-block" data-content_type="accordion" data-target="accordionSample">タイトル</button>
    <div id="accordionSample" class="collapse-body" data-open="false">
        コンテンツ
    </div>
</div>

• ボタンのdata-targetとコンテンツ部分のidが一致するコンテンツを開きます。
• data-target="accordionSample"とid="accordionSample"の値を一致させてください
• 親要素にclass="collapse"を必ず設定してください
• ボタンにclass="toggler", data-content_type="accordion"を必ず設定してください
• コンテンツにclass="collapse-body", data-open="false"を必ず設定してください