コピーボックスの作成方法

概要
参考例

概要

<div>
    <div class="copy-box copy-text">
        <div class="hcb_wrap">
            こちらにコードを入力してください。
        </div>
    </div>
    <div class="btn-copy">
        <span class="btn-copy-text">
            Copy
        </span>
    </div>
</div>

Copy

参考例

<div>
    <div class="copy-box copy-text">
        <div class="hcb_wrap">
            <pre class="prism line-numbers lang-css" data-lang="CSS"><code>/*アプリ―チ*/
.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
  box-shadow:0px 2px 5px 1px #e5e5e5;
}
</code></pre>
        </div>
    </div>
    <div class="btn-copy">
        <span class="btn-copy-text">
            Copy
        </span>
    </div>
</div>

            

            .sidebar h3 {
                background:transparent; /* Cocoon親テーマCSSリセットのため */
                color: #C5E0B4;
                padding: 8px 0px;
                
                border-bottom: 2px #C5E0B4 dotted; /* ドット下線追加 */
                letter-spacing: 0.2em; /* 字間を広げる */
                text-shadow: black;
                font-size: 14px;
                border-radius:3em .5em 2em .5em/.4em 2em .5em 3em;
                border-bottom:5px solid #7be478;
                border-right:5px solid #74d670;
                background-color: cadetblue;
            }

            .header-container-in.hlt-top-menu{
                background-color: cadetblue;
            }
            
            .header {
                height: 100%;
                flex-shrink: 0;
                background: #5f9ea0;
            }

Copy

/*アプリ―チ*/
.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
  box-shadow:0px 2px 5px 1px #e5e5e5;
}

Copy