h2デザイン
h3デザイン
h4デザイン
h5デザイン
<h2><span>h2デザイン</span></h2>
<h3><span>h3デザイン</span></h3>
<h4><span>h4デザイン</span></h4>
<h5><span>h5デザイン</span></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="#" class="image"><img src="画像URL" alt="画像説明"></a>
<a href="#" class="image-border"><img src="画像URL" alt="画像説明"></a>
<a>
にclass="image"
を設定すると下線が消えます<a>
にclass="image-border"
を設定すると枠線で囲みます
<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"
を設定すると、要素内の文字を中央寄せにします<ul>
<li>リスト</li>
<li>リスト<span class="description">説明など書けます</span></li>
</ul>
<li>
の中に<span class="description"></span>
を入れることで、説明などを書くことができます<dl>
<dt>タイトル</dt>
<dd>内容</dd>
</dl>
<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>
内の要素がフォームエリア幅一杯に広がります<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="card card-s">
<div>
<div class="card-title">カードタイトル</div>
<div class="card-body">
<p>通常のカード</p>
</div>
</div>
<div>
<div class="card-title-image">
<img src="画像URL">
<p>タイトル重ねられます</p>
</div>
<div class="card-body">
<p>タイトルが画像のカード</p>
</div>
</div>
<div>
<div class="card-body">
<p>タイトルがないカード</p>
</div>
</div>
<a href="#">
<div class="card-title">カードタイトル</div>
<div class="card-body">
<p>リンクカード</p>
</div>
</a>
<div>
<a class="card-title" href="#">カードタイトル</a>
<div class="card-body">
<p>カードタイトルがリンクのカード</p>
</div>
</div>
</div>
class="card card-s"
を設定すると、要素内のコンテンツがカードになるclass="card-s"
小class="card-m"
中class="card-l"
大<div>
で囲う<div>
を<a>
にするclass="card-title"
を設定するclass="card-title-image"
を設定する<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"
を必ず設定してください