## よく頂く質問FAQ

ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

もっと見る

## 「よく頂く質問」ブロックについて

    <!--▼▼▼▼▼ここから「よく頂く質問」-->
    <section class="bg-primary-color" id="faq">

    <div class="c2">

    <div class="title">
    <h2>よく頂く質問<span>FAQ</span></h2>
    </div>
    <!--/.title-->

    <div class="text">

    <dl class="faq">

    <dt class="openclose">ここに質問を書きます。クリックで回答が開きます。</dt>
    <dd>ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。</dd>

    <dt class="openclose">ここに質問を書きます。クリックで回答が開きます。</dt>
    <dd>ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。</dd>

    </dl>

    </div>
    <!--/.text-->

    </div>
    <!--/.c2-->

    <div class="r"><p class="btn1"><a href="#" class="inline-block">もっと見る</a></p></div>

    </section>
    <!--▲▲▲▲▲ここまで「よく頂く質問」-->

### 各ボックススタイルは

cssフォルダのstyle.cssから「faq」でテキスト検索してみて下さい。詳しい解説もあります。

### <section class="bg-primary-color" id="faq">について

bg-primary-colorはテンプレートごとのテーマカラーを背景色にしたタイプです。
cssフォルダのstyle.cssから「bg-primary-color」でテキスト検索してみて下さい。詳しい解説もあります。

idはメニューのリンク先の目印です。
メニュー側は、
<a href="#faq">よく頂く質問</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#faq">よく頂く質問</a>
と書きます。

### <div class="c2">について

左右の２カラムになったボックスの汎用的な雛形です。

この中に、
<div class="title">
と、
<div class="text">
をセットして使います。「会社概要」や「お知らせ」のブロックでもこのセットを利用しています。

<div class="title">
は、左側のタイトル向けブロックです。
<div class="text">
は右側の本文向けブロックです。
style.cssから「.c2」でテキスト検索すると設定箇所が出てきます。

### <dt class="openclose">

class="openclose"がつくとその直後の要素が折りたたまれ、opencloseボックスをクリックすることで開閉するようになります。

ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

### <dt>のみだと、

opencloseがない場合は、以下のように最初から開いた状態になります。

ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに質問を書きます。クリックで回答が開きます。
  ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

### 「Q」のアイコンは

アイコンはFont Awesomeを使用しています。アイコンを変更したい場合はmanual.htmlをお読み下さい。
style.cssの
.faq dt::before {
のcontentの行でアイコンを指定します。