今回はWEBサイトで頻繁に使われる「プライバシーポリシー」の作り方について紹介します。

コーディング初心者の人でも簡単に作れる内容になっているので、是非参考にしてください！

【HTML/CSS】プライバシーポリシーの作り方

プライバシーポリシーの完成形はこちらです。

See the Pen
Untitled by webis (@webis-co)
on CodePen.

よくWEBサイトで見る縦にスクロールできるプライバシポリシーです。

それでは早速作って行きましょう！

HTML

<div class="privacy-policy">
    <div class="privacy-policy__item">
        <p class="privacy-policy__item__title">第1条（個人情報）</p>
        <p class="privacy-policy__item__desc">「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>
    </div>
    <div class="privacy-policy__item">
        <p class="privacy-policy__item__title">第1条（個人情報）</p>
        <p class="privacy-policy__item__desc">「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>
    </div>
    <div class="privacy-policy__item">
        <p class="privacy-policy__item__title">第1条（個人情報）</p>
        <p class="privacy-policy__item__desc">「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>
    </div>
    <div class="privacy-policy__item">
        <p class="privacy-policy__item__title">第1条（個人情報）</p>
        <p class="privacy-policy__item__desc">「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>
    </div>
    <div class="privacy-policy__item">
        <p class="privacy-policy__item__title">第1条（個人情報）</p>
        <p class="privacy-policy__item__desc">「個人情報」とは，個人情報保護法にいう「個人情報」を指すものとし，生存する個人に関する情報であって，当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の保険者番号などの当該情報単体から特定の個人を識別できる情報（個人識別情報）を指します。</p>
    </div>
</div>

CSS

Sassの記法を使って書きました。

.privacy-policy {
  max-width: 300px;
  margin: 50px auto;
  height: 300px;
  overflow: scroll;
  padding: 25px;
  border: 1px solid black;
  background-color: #e5e5e5;
  line-height: 1.5;
  &__item {
    p {
      margin-bottom: 25px;
    }
  }
}

CSSのポイントは、高さを絶対値（今回は300px）で決めて、「overflow: scroll;」で縦にスクロールさせたら完成です！

コピペで簡単に出来ちゃいますね。

まとめ

以上が、「プライバシーポリシー」の作り方でした。