よくある質問のセクション【ポートフォリオ作成】

バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#28  よくある質問のセクション【ポートフォリオ作成】

web兄さん

＼SHARE／

１｜HTMLのコーディングをしよう

動画内で書いたコード

<!-- よくある質問 -->
<div class="question">
    <div class="question__inner">
        <h2 class="question__headline">
            <span class="question__headline-en">Question</span>
            <span class="question__headline-jp">よくある質問</span>
        </h2>
        <dl class="question__list">
            <div>
                <dt>Q.営業日はいつですか？</dt>
                <dd>A.平日の9時〜18時です。緊急の場合は土日祝日でも対応可能ですのでご相談ください。</dd>
            </div>
            <div>
                <dt>Q.まとめて依頼するので値引きは可能ですか？</dt>
                <dd>A.可能です。まとめてご依頼いただく場合はお値引き可能ですが、契約書・発注書が必要となります。</dd>
            </div>
        </dl>
    </div>
</div>
<!-- /よくある質問 -->

dl / dt /ddについて（参考記事）

特定のテーマに対して、「項目+項目の説明」という情報が繰り返し行われる箇所はdl、dd、dtのタグが使用されることが多いです。

dl / dt / dtの使用イメージ

tableと構造的に似ていますが、tableとの使い分けとしては以下のようになります。

  • table：表形式のデータの集合の場合に使用
  • dl：表形式ではないが、特定のテーマに沿った「項目名+内容」という形式の情報になっている

２｜CSSのコーディングをしよう

border-radiusの角丸の制御について

border-radius: 10pxというコードは実はショートハンドになっていて、それぞれ以下のような内訳になっています。

  • border-top-left-radius: 10px;（左上）
  • border-top-right-radius: 10px;（右上）
  • border-bottom-right-radius: 10px;（右下）
  • border-bottom-left-radius: 10px;（左下）

そのため、特定の角のみを丸くしたい場合は上記のように記述をすることでコントロールが可能です。

動画内で書いたコード

/* ===========================

よくある質問

=========================== */

.question{
  background-color: #7768ED;
  padding: 130px 0;
}

.question__inner{
  max-width: 1140px;
  margin: 0 auto;
}

.question__headline{
  margin-bottom: 60px;
}

.question__headline-en{
  font-family: 'Montserrat';
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  display: block;
  margin-bottom: 10px;
}

.question__headline-jp{
  font-weight: 700;
  font-size: 32px;
  color: #fff;
}

.question__list div + div{
  margin-top: 30px;
}

.question__list dt{
  padding: 50px 40px;
  margin-bottom: 2px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.question__list dd{
  padding: 50px 40px;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-weight: bold;
}