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>
に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"
を設定すると、要素内の文字を中央寄せにします<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>
スマホ表示の場合横幅が狭くなるため、縦並びと同じように表示します。
<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"
を設定すると必須マークが付きます