【コピペOK】LPで使える！Q&Aデザイン4パターン【CSS】

2021年11月10日2023年8月9日

LPなどでよく見かける、Q&Aセクションの作り方です。

コピペしてお好みで色を変えるなど、ご自由にお使いください。

もちろんレスポンシブにも対応しています。

パターン1

シンプルなQ&A。

どんなサイトにも使いやすいデザインです。

完成形はこちら

See the Pen QA1 by yusuke-morioka (@yusuke-morioka) on CodePen.

コードはこちら

<body>

    <dl class="Qa-Box">
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
    </dl>

</body>

.Qa-Box {
  width: 80%;
  margin: 0 auto;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 30px 0;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #D65556;
  color: #fff;
  width: 35px;
  height: 35px;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #6699B7;
  color: #fff;
  width: 35px;
  height: 35px;
}

@media screen and (max-width: 960px) {
  .Qa-Box {
    width: 95%;
  }
}

パターン2

QとAのアイコンが丸くなっているデザインパターンです。

パターン1に「border-radius」を追加し、若干サイズを変えただけです。

完成形はこちら

See the Pen QA2 by yusuke-morioka (@yusuke-morioka) on CodePen.

※↑アイコンが縦長の小判型の形に見えることもあるかもしれません。
しかしこれはCodePenサンプルの表示の関係です。
全画面で見ればちゃんと丸なのでご安心ください。

コードはこちら

<body>

    <dl class="Qa-Box">
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
    </dl>

</body>

.Qa-Box {
  width: 80%;
  margin: 0 auto;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 30px 0;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #D65556;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50px;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  background: #6699B7;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50px;
}

@media screen and (max-width: 960px) {
  .Qa-Box {
    width: 95%;
  }
}

パターン3

Qの部分が、薄いグレーであみかけされているパターンです。

完成形はこちら

See the Pen QA3 by yusuke-morioka (@yusuke-morioka) on CodePen.

コードはこちら

<body>

    <dl class="Qa-Box">
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
    </dl>

</body>

.Qa-Box {
  width: 80%;
  margin: 0 auto;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 15px 0;
  padding: 15px;
}

.Qa-Box .Qa dt {
  background: #F5F5F5;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #6699B7;
  width: 2em;
  height: 2em;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #D65556;
  width: 2em;
  height: 2em;
}

@media screen and (max-width: 960px) {
  .Qa-Box {
    width: 95%;
  }
}

パターン4

一つの質問ごとに、線で区切られているパターンです。

完成形はこちら

See the Pen QA4 by yusuke-morioka (@yusuke-morioka) on CodePen.

コードはこちら

<body>

    <dl class="Qa-Box">
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト。</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト？？</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト？？</p>
            </dd>
        </div>
        <div class="Qa">
            <dt>
                <p>テキストテキスト？？</p>
            </dt>
            <dd>
                <p>テキストテキスト？？</p>
            </dd>
        </div>
    </dl>

</body>

.Qa-Box {
  width: 80%;
  margin: 0 auto;
}

.Qa-Box .Qa {
  padding: 20px 0;
  border-bottom: 1px solid #c8c8c8;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
  display: flex;
  align-items: baseline;
  margin: 15px 0;
}

.Qa-Box .Qa dt p {
  margin: 0;
  padding-left: 15px;
  font-weight: bold;
  width: 100%;
}

.Qa-Box .Qa dd p {
  margin: 0;
  padding-left: 15px;
  width: 100%;
}

.Qa-Box .Qa:last-of-type {
  border-bottom: none;
}

.Qa-Box .Qa dt::before {
  content: "Q";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #6699b7;
  width: 2em;
  height: 2em;
}

.Qa-Box .Qa dd::before {
  content: "A";
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #d65556;
  width: 2em;
  height: 2em;
}

@media screen and (max-width: 960px) {
  .Qa-Box {
    width: 95%;
  }
}