本文へ移動

TIPS

実装時の判断や、各パーツだけでは説明しきれない補助的なルールをまとめています。
CTA、FAQ、ページ内リンクなど、ページ全体の使いやすさに関わる調整項目を扱います。。

目次

<ul class="toc">
<li><a href="#section1">目次</a></li>
<li><a href="#section2">目次</a></li>
<li><a href="#section3">目次</a></li>
</ul>

CTA

お問い合わせ

ここにテキストがはいります。

ここに補足がはいります。

<div class="summary line cta">
<p class="text-xl mb-2">見出し</p>
<p>ここにテキストがはいります。</p>
<button type="button" class="labelType main w-full mb-2"><span class="icon xxxxx"></span>ボタンテキスト</button>
<p class="text-center text-sm">ここに補足がはいります。</p>
</div>

ボタンの設定(ルール)については、ボタンをご覧ください。

FAQ

対応エリアの制限はありますか?
zoomなどのツールを使いオンラインでのコミュニケーションが可能であれば全国どこでも対応可能です。もちろん都内及び近隣地域であれば訪問での対応も可能です。
社内に広報担当者やウェブ担当者がいないのですが大丈夫でしょうか?
ご安心ください。WEBサイトの運営を代行する『WEB運営サポート』がございます。また、お客様で運営できるようになるまでの運営支援及び教育プランもございます。まずは、お気軽にご相談ください。
WEBサイト更新の手間を何とかしたいのですが何か良いサービスはありますか?
WEBサイトを特別な技術がなくてもブログのように更新出来るCMS(コンテンツ管理システム)がございます。他にも、WEBサイトの運営を私たちが代行する『WEB運営サポート』がございます。
<dl class="qa">
<dt class="question">質問です?</dt>
<dd class="answer">回答です</dd>
</dl>

補足・注釈

補足

アクセシビリティを前提にした設計

読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。

サンプル画像
<div class="summary line radius mb-8">
中身
</div>

注釈

アクセシビリティを前提にした設計

読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。

サンプル画像
<div class="summary line radius mb-8">
中身
</div>