Higasa

コンテンツエリア

ブロック表示

コンテンツタイトル

コンテンツ本文

コンテンツタイトル

コンテンツ本文

<div class="area area-block">
    <div>
        <div class="title">コンテンツタイトル</div>
        <div class="thumbnail"><img src="画像URL"></div>
        <div class="body">
            コンテンツ本文
        </div>
    </div>
    <div>
        <div class="thumbnail"><img src="画像URL"></div>
        <div class="title">コンテンツタイトル</div>
        <div class="body">
            コンテンツ本文
        </div>
    </div>
</div>

• class="area area-block"を設定した要素の中に<div>～<div>を入れると1ブロックとして扱います
• <div>～<div>の中には以下の要素が使用可能です
  ※div内の構成はリスト表示と同じです
• class="title"
• class="thumbnail"
• class="body"

コンテンツタイトル

コンテンツ本文

コンテンツタイトル

コンテンツ本文

コンテンツタイトル

コンテンツ本文

<div class="area area-block area-block-3">
    <div>～</div>
</div>

• areaクラスを設定した要素にarea-block-3を設定すると、PC表示の場合ブロックを3列にして表示します

リスト表示

コンテンツタイトル

コンテンツ本文

コンテンツタイトル

コンテンツ本文

<div class="area area-list">
    <div>
        <div class="title">コンテンツタイトル</div>
        <div class="thumbnail"><img src="画像URL"></div>
        <div class="body">
            コンテンツ本文
        </div>
    </div>
    <div>
        <div class="thumbnail"><img src="画像URL"></div>
        <div class="title">コンテンツタイトル</div>
        <div class="body">
            コンテンツ本文
        </div>
    </div>
</div>

• class="area area-list"を設定した要素の中に<div>～<div>を入れると1ブロックとして扱います
• <div>～<div>の中には以下の要素が使用可能です
  ※div内の構成はリスト表示と同じです
• class="title"
• class="thumbnail"
• class="body"

枠線設定

<div class="area area-block area-border">
    <div>～<div>
    <div>～<div>
</div>
<div class="area area-list area-border">
    <div>～<div>
    <div>～<div>
</div>

• areaクラスを設定した要素にarea-borderを設定すると、各ブロックに枠線が表示されます

新着マーク

コンテンツタイトル

コンテンツ本文

<div class="area area-block">
    <div>
        <div class="thumbnail new"><img src="画像URL"></div>
    </div>
    <div>
        <div class="title new">コンテンツタイトル</div>
    </div>
    <div>
        <div class="body new">コンテンツ本文</div>
    </div>
</div>

• class="thumbnail", class="title", class="body"にnewを設定すると新着マークがつきます

見出し

h2デザイン

h3デザイン

h4デザイン

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

ボタン

<a href="#" class="btn">ボタン</a>

• <a>や<button>タグのclassにbtnが必要です

サイズ設定

<a href="#" class="btn btn-sm">ボタン(S)</a>
<a href="#" class="btn">ボタン(M)</a>
<a href="#" class="btn btn-lg">ボタン(L)</a>
<a href="#" class="btn btn-block">ボタン(Block)</a>

• btnを設定した要素にサイズ設定用クラスを指定することで、サイズの変更が可能です
• サイズ設定用クラスがない場合、Mサイズのボタンを表示します
• Sサイズbtn-sm
• Mサイズ指定なし
• Lサイズbtn-lg
• Blockサイズbtn-block

色設定

<a href="#" class="btn">ボタン(デフォルト)</a>
<a href="#" class="btn btn-color1">ボタン(色1)</a>
<a href="#" class="btn btn-color2">ボタン(色2)</a>

• btnを設定した要素に色設定用クラスを指定することで、色の変更が可能です
• サイズ設定用クラスがない場合、デフォルトのボタンを表示します
• デフォルト指定なし
• 色1btn-color1
• 色2btn-color2

グループ設定

<div class="btn-group">
    <a href="#" class="btn">ボタン</a>
    <a href="#" class="btn">ボタン</a>
    <a href="#" class="btn">ボタン</a>
</div>

• classにbtn-groupを設定した要素でボタンを囲むと、グループとして扱います
• 最大2つまで横並びにし、3つ以上の場合は折り返します

装飾

<b>b要素</b>
<em>em要素</em>
<strong>strong要素</strong>
<hr>
<span class="sp-hidden">★</span>

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

表示非表示

通常の表示非表示

<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"を必ず設定してください