利用規約ページのコーディング①【Webサイト制作案件でよく使うサンプルコード】

利用規約ページのコーディング①【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • HTML、CSSで利用規約ページのコーディングをする方法が知りたい
  • Webサイト制作案件でよくあるシンプルな利用規約ページのサンプルコードが見たい

という方のお悩みを解決します!

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

利用規約ページはコーポレートサイトやサービスサイトで作る機会が多く、複雑なデザインは求められていない場合がほとんど。

それでもある程度、綺麗に整っているページにしたいですよね。

そんな時にコピペで使えるコードをご用意しました!

利用規約ページのコーディングで躓いている方のお役に立てれば幸いです!

完成イメージ

今回紹介するコードで実現できる利用規約ページのデザインはこちら!

▼▼▼

利用規約ページのコーディングサンプル

超絶シンプルなデザインですね、というかだいたいどこのサイトの利用規約ページもこんな感じでしょう。

こちらを構成する要素としては、

  • 見出し
  • 箇条書き
  • 箇条書きの中の箇条書き

となります。

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます!

それでは見ていきましょう〜〜

利用規約ページのサンプルコード

こちら、CodePenで作った見本です!

もちろん、レスポンシブ対応しておりますよ!

See the Pen
QWyQgXa
by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら今回のHTML構造です!

文言等は適宜変更してお使い下さい〜

項目の塊を増やしたい場合は、「Inner-Box」を増やしてあげればOKです!

HTML
<div class="Inner">
  <h2 class="Inner-Headline">利用規約</h2>
  <p class="Inner-Text first">本規約は、株式会社〇〇(以下「当社」といいます。)が提供するサービスを利用するお客様(以下「利用者」といいます。)において、当社が提供するサービスを利用する上での合意事項となります。ご利用になる前に、必ずご確認、ご承諾頂きますようお願い申し上げます。</p>
  <div class="Inner-Box">
    <h3 class="Inner-Box-Headline">個人情報保護方針</h3>
    <ol class="Inner-Box-List">
      <li class="Inner-Box-List-Item">利用者は、本サービスの利用により取得した個人情報(個人情報の保護に関する法律に規定される「個人情報」をいいます。)を、個人情報の保護に関する法律及び同法施行令ならびに関係省庁による同法に関するガイドライン等、個人情報保護に関する一切の法規に従い適正に取り扱い、善良なる管理者の注意義務を持って管理するものとします。</li>
      <li class="Inner-Box-List-Item">利用者は、前項の個人情報を、本人の同意なく、第三者に提供すること及び利用者が定める個人情報の利用目的以外の目的で使用しないものとします。</li>
      <li class="Inner-Box-List-Item">当社は、第三者の提供するコールトラッキングサービスを使用し、当該サービスがお客様の個人情報を取得する場合があります。その場合の個人情報の取り扱いについては、当規約に加え、サービス提供元の<a href="#" class="Inner-Box-List-Item-Link">個人情報保護方針</a>に従うものとします。</li>
      <li class="Inner-Box-List-Item">利用者が前各項に違反し、利用者又は当社が第三者から権利侵害の主張をされた場合には、利用者の費用と責任においてこれを解決するものとします。</li>
    </ol>
  </div>
  <div class="Inner-Box">
    <h3 class="Inner-Box-Headline">秘密保持</h3>
    <ol class="Inner-Box-List">
      <li class="Inner-Box-List-Item">当社及び利用者は、相手方から秘密である旨明示のうえ受領し又は開示を受けた情報(以下「機密情報」という。)を、本契約の有効期間中及び本契約終了後も、第三者に開示又は漏洩してはならないものとします。ただし、監督官公庁又は法令に基づき開示が要請された場合を除きます。</li>
      <li class="Inner-Box-List-Item">個人情報を除き、前項にかかわらず次の各号の一に該当するものは機密情報にあたらないものとします。
        <ol class="Inner-Box-List-Item-Ol">
          <li class="Inner-Box-List-Item-Ol-Item">受領時に、既に公知であったもの</li>
          <li class="Inner-Box-List-Item-Ol-Item">
開示後、受領者の責に帰さない事由により公知となったもの</li>
          <li class="Inner-Box-List-Item-Ol-Item">
開示の時、受領者が既に保有していたもの</li>
          <li class="Inner-Box-List-Item-Ol-Item">
第三者から機密保持義務を負うことなく正当に入手したもの</li>
        </ol>
      </li>
    </ol>
  </div>
  <div class="Inner-Box">
    <h3 class="Inner-Box-Headline">反社会的勢力の排除</h3>
    <ol class="Inner-Box-List">
      <li class="Inner-Box-List-Item">利用者及び当社は、自己(法人の場合は、代表者、役員又は実質的に経営を支配する者。)が暴力団、暴力団員、暴力団関係企業、総会屋、社会運動標ぼうゴロ、政治運動標ぼうゴロ、特殊知能暴力集団、その他反社会的勢力(以下「暴力団等反社会的勢力」という。)に該当しないこと、及び次のいずれにも該当しないことを表明し、かつ将来にわたっても該当しないことを確約するものとします。
        <ol class="Inner-Box-List-Item-Ol">
          <li class="Inner-Box-List-Item-Ol-Item">暴力団等反社会的勢力が経営を支配していると認められる関係を有すること</li>
          <li class="Inner-Box-List-Item-Ol-Item">暴力団等反社会的勢力が経営に実質的に関与していると認められる関係を有すること</li>
          <li class="Inner-Box-List-Item-Ol-Item">自己、自社若しくは第三者の不正の利益を図る目的又は第三者に損害を加える目的をもってするなど、不当に暴力団等反社会的勢力を利用していると認められる関係を有すること</li>
          <li class="Inner-Box-List-Item-Ol-Item">暴力団等反社会的勢力に対して資金等を提供し、又は便宜を供与するなど関与をしていると認められる関係を有すること</li>
          <li class="Inner-Box-List-Item-Ol-Item">役員又は経営に実質的に関与している者が暴力団等反社会的勢力と社会的に非難されるべき関係を有すること</li>
        </ol>



      </li>
      <li class="Inner-Box-List-Item">利用者は、当社が前項の該当性の判断のために調査を要すると判断した場合、その調査に協力し、これに必要と判断する資料を提出しなければならないものとします。</li>
      <li class="Inner-Box-List-Item">利用者及び当社は、相手方が暴力団等反社会的勢力に属すると判明した場合、催告をすることなく、本サービス利用契約を解除することができるものとします。</li>
      <li class="Inner-Box-List-Item">利用者及び当社は、前項の規定により本サービス利用契約を解除した場合に相手方に損害が生じてもこれを賠償する責任を負わないものとします。</li>
    </ol>
  </div>
  <div class="Inner-Box">
    <h3 class="Inner-Box-Headline">知的財産権</h3>
    <ol class="Inner-Box-List">
      <li class="Inner-Box-List-Item">本サービス内における画像、動画、文章、キャラクター、プログラムその他一切の情報(以下、「画像等」といいます。)に関する知的財産権は、利用者が自ら作成したポップアップ広告に関する知的財産権を除き、当社又は当社にその利用を許諾した者(以下、「権利者」といいます。)に帰属します。利用者は、法令に基づき認められる場合を除き、当社又は権利者による事前の許可なく、画像等を複製、送信その他の態様で使用することはできません。</li>
      <li class="Inner-Box-List-Item">本サービスの名称その他本サービス内で表示される商品名、サービス名等には、当社又は第三者が商標権その他の使用権を有する名称が含まれます。本規約は、利用者その他の第三者に対し、知的財産権を譲渡又は使用許諾するものではありません。また、本サービスに関する知的財産権について、利用者がその登録の出願又は移転の申請を行ってはならないものとします。</li>
    </ol>
    <div class="Inner-Box-Contact">
      <p class="Inner-Box-Contact-Text">個人情報保護方針、個人情報の取り扱い及び苦情及び相談に関するお問い合わせ先については、以下にご連絡下さい。</p>
      <p class="Inner-Box-Contact-Text">株式会社〇〇</p>
      <p class="Inner-Box-Contact-Text">〒000-0000 東京都〇〇区〇〇1丁目000-0</p>
      <p class="Inner-Box-Contact-Text">Email info@sample.com</p>
    </div>
  </div>
</div>

CSS

こちらスタイリングです!

文字サイズや上下の余白などはよしなに変更してお使いください。

CSS
.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

p{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}

.Inner-Headline {
  font-weight: bold;
  font-size: 32px;
}
@media screen and (max-width: 480px) {
  .Inner-Headline {
    font-size: 24px;
  }
}
.Inner-Text {
  letter-spacing: 0.05em;
  line-height: 1.8;
  font-size: 15px;
}
.Inner-Text.first {
  margin-top: 36px;
}
.Inner-Box {
  margin-top: 16px;
}
.Inner-Box-Headline {
  font-weight: bold;
  font-size: 28px;
}
@media screen and (max-width: 480px) {
  .Inner-Box-Headline {
    font-size: 20px;
  }
}
.Inner-Box-List {
  margin: 20px 0 0 40px;
}
.Inner-Box-List-Item {
  margin-top: 10px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  list-style-type: decimal;
}
.Inner-Box-List-Item-Ol {
  margin: 20px 0 0 40px;
}
.Inner-Box-List-Item-Ol-Item {
  margin-top: 10px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  list-style-type: decimal;
}
.Inner-Box-List-Item-Link {
  text-decoration: underline;
  display: inline-block;
  color: red;
}
.Inner-Box-Contact {
  margin-top: 36px;
}
.Inner-Box-Contact-Text {
  letter-spacing: 0.05em;
  line-height: 1.8;
  font-size: 15px;
}
.Inner-Box-Contact-Text:nth-child(2) {
  margin-top: 16px;
}
.Inner-Box-Item {
  letter-spacing: 0.05em;
  line-height: 1.8;
  font-size: 15px;
}
@media screen and (max-width: 480px) {
  .Inner-Box-Item {
    letter-spacing: inherit;
    font-size: 14px;
  }
}

まとめ

以上、実務でよく使われる利用規約ページのコーディングのサンプルコードを紹介しました。

コーポレートサイト/メディアサイトの制作案件をする際にきっと役立つスキルとなりますのでぜひ覚えていきましょう〜!

 

コーディングスキルアップシリーズはこちら!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です