Accent red

<div class="header-image">
    <img src="画像URL">
</div>

• <main>～</main>の外でclass="header-image"を設定した要素に<img>を入れると、トップ画像としてレイアウトします

<div class="header-image type-square">
    <img src="画像URL">
</div>

• header-imageクラスを設定した要素に以下の型設定クラスを設定すると、トップ画像の形が変更されます
• 未設定長方形（コンテンツ幅に収まるサイズ）
• type-block長方形（画面幅いっぱい）
• type-rounded長方形（コンテンツ幅に収まるサイズ・角丸）
• type-square正方形
• type-circle円形
• type-roundedとtype-squareを両方設定すると、正方形の角丸になります

<div class="header-image size-sm">
    <img src="画像URL">
</div>

• header-imageクラスを設定した要素に以下のサイズ設定クラスを設定すると、トップ画像のサイズが変更されます
• 未設定デフォルトサイズ
• size-sm小さいサイズ
• size-xs最小サイズ

<div class="area area-thumbnail">
    <div>サムネイル</div>
    <div class="new">サムネイル</div>
</div>
<div class="area area-thumbnail area-center">
    <div>サムネイル</div>
</div>

• class="area area-thumbnail"を設定した要素の中に<div>～</div>を入れるとサムネイルとして扱います
• class="area area-thumbnail"を設定した要素にarea-centerを設定すると、サムネイルが中央寄せになります
• <div>～</div>にclass="new"を設定すると新着マークがつきます

<div class="area area-thumbnail thumb-border">
    <div>サムネイル</div>
</div>

• area area-thumbnailクラスを設定している要素にthumb-borderを設定すると、サムネイルに枠線が付きます
• thumb-roundedと併用できます

<div class="area area-thumbnail thumb-rounded">
    <div>サムネイル</div>
</div>

• area area-thumbnailクラスを設定している要素に以下の形設定クラスを設定すると、サムネイルが角丸になります
• thumb-rounded角丸
• thumb-circle円
• thumb-borderと併用できます

<article class="width-sm">
    ここにコンテンツ
</article>

• articleにwidth-smクラスを設定すると、小説ページサンプルのように、コンテンツ幅が狭くなります
• スマホ表示では、通常のページと同じ幅でコンテンツが表示されます

<div class="column">
    <div>1つめのコンテンツ</div>
    <div>2つめのコンテンツ</div>
    <div>3つめのコンテンツ</div>
    <div>4つめのコンテンツ</div>
</div>
<div class="column column-border">
    <div>1つめのコンテンツ</div>
    <div>2つめのコンテンツ</div>
    <div>3つめのコンテンツ</div>
    <div>4つめのコンテンツ</div>
</div>

• divにcolumnクラスを設定すると、コンテンツが2列表示になります
• divにcolumnと一緒にcolumn-borderを設定すると、枠線が付きます
• divにcolumnと一緒にcolumn-bgを設定すると、背景が付きます
• スマホ表示では1列表示になります

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

• <span>が必要です

リンク

↓画像リンク

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

<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"を設定すると、マークが「→」になります

1. リスト
2. リスト説明など書けます

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