Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="content">
  <dl>
    <dt>プライバシーポリシー</dt>
    <dd>〇〇株式会社(以下「当社」といいます)は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。</dd>
  </dl>
  <dl>
    <dt>個人情報の管理</dt>
    <dd>当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。</dd>
  </dl>
  <dl>
    <dt>個人情報の利用目的</dt>
    <dd>お客さまからお預かりした個人情報は、当社からのご連絡や業務のご案内やご質問に対する回答として、電子メールや資料のご送付に利用いたします。</dd>
  </dl>
  <dl>
    <dt>個人情報の第三者への開示・提供の禁止</dt>
    <dd>当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。</dd>
  </dl>
  <dl>
    <dt>個人情報の安全対策</dt>
    <dd>当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。</dd>
  </dl>
  <dl>
    <dt>ご本人の照会</dt>
    <dd>お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。</dd>
  </dl>
</div>
              
            
!

CSS

              
                .content{
  padding: 0 50px;
  margin: 50px;
  border: 1px solid #000;
  box-sizing: border-box;
  /*要素の高さを指定*/
  height: 300px;
  /*上下方向にはみ出した要素ををスクロールさせる*/
  overflow-y: scroll;
  /*スクロールバー非表示(IE・Edge)*/
  -ms-overflow-style: none;
  /*スクロールバー非表示(Firefox)*/
  scrollbar-width: none;
}
/*スクロールバー非表示(Chrome・Safari)*/
.content::-webkit-scrollbar{
  display:none;
}
dl{
  margin: 50px 0;
}
dt,dd{
  line-height: 1.8;
}
              
            
!

JS

              
                
              
            
!
999px

Console