アイコン・ボタン

ボタン

お問い合わせ

お問い合わせ

お問い合わせ

お問い合わせ

<p><a href="#" class="btn btn-green"><span>お問い合わせ</span></a></p>
<p><a href="#" class="btn btn-blue"><span>お問い合わせ</span></a></p>
<p><a href="#" class="btn btn-orange"><span>お問い合わせ</span></a></p>
<p><a href="#" class="btn btn-red"><span>お問い合わせ</span></a></p>

アイコン

大きなアイコンの場合は「icon-point」を「icon-point-l」に変更

<p class="icon-point">ポイント</p>
<p class="icon-caution">注意</p>
<p class="icon-new">NEW</p>
<p class="icon-wakaba">初心者</p>
<p class="icon-blank">別ウインドウ</p>
<p class="icon-zip">ZIP</p>
<p class="icon-mail">メール</p>
<p class="icon-cart">ショッピングカート</p>
<p class="icon-search">虫眼鏡</p>
<p class="icon-home">ホーム</p>
<p class="icon-arrow-t">矢印上</p>
<p class="icon-arrow-r">矢印右</p>
<p class="icon-arrow-b">矢印下</p>
<p class="icon-arrow-l">矢印左</p>
<p class="icon-dl">ダウンロード</p>
<p class="icon-pdf">PDF</p>
<p class="icon-folder">フォルダ</p>
<p class="icon-time">時計</p>
<p class="icon-calendar">カレンダー</p>
<p class="icon-building">ビル</p>
<p class="icon-map">マップ</p>

チェックリスト

• チェックリストの項目が入ります。チェックリストの項目が入ります。
• チェックリストの項目が入ります。チェックリストの項目が入ります。

小さなアイコンの場合は「check-list-l」を「check-list」に変更

<ul class="check-list-l">
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
<li>チェックリストの項目が入ります。チェックリストの項目が入ります。</li>
</ul>

Q&A

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。。

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。

<dl class="qa-list">
 <dt>ここには質問文が入ります。</dt>
 <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。。</dd>
 <dt>ここには質問文が入ります。</dt>
 <dd>ここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

SNSボタン

<aside class="sns-list">
<ul>
<li class="sb-tweet">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
</li>
<li class="sb-hatebu">
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</li>
<li class="sb-fb-like">
<div class="fb-like" data-width="110" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</li>
<li class="sb-gplus">
<div class="g-plusone" data-size="medium"></div></li>
</ul>
</aside>