コンテンツエリアを左右に配置し、2列にすることができます。
スマホ表示の場合横幅が狭くなるため、通常通り縦に表示します。
<div class="column">
<article>
<h2>block 1</h2>
<!-- ここにコンテンツ -->
</article>
<article>
<h2>block 2</h2>
<!-- ここにコンテンツ -->
</article>
</div>article要素を<div class="column">
~ </div>で囲む
article要素を2つ以上格納した場合も自動でレイアウトされる（このページではarticle要素を3つ格納した場合のサンプルを表示）
2つめのブロック。
PC表示では右側に配置。
3つめのブロック。
PC表示では左側に配置。
<h2><span>/h2デザイン<span></h2>
<h3><span>h3デザイン</span></h3>
<h4><span>h4デザイン</span></h4>
<h5><span>h5デザイン</span></h5>
<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"を設定すると必須マークが付きます