box(ボックス)を２重線で囲んで、その線の間隔を変更するのが簡単に出来る。この方法ならいろんなカスタマイズが可能【サンプルコードあり】

boxの周囲を２重線で囲む場合で、２本の線の間隔を自分の好きな
広さに設定する方法が簡単。
方法は、outline:;とoutline-offset:;を使うと出来る。

この記事でサンプルコードあり。
完成は下記のような感じで実装出来ます。

実際に書いたコード
フリーランス案件

実際に書いたコード

今回作成したコード

HTML

<body>
  <section class="out-wrap">
    <div class="box">
      ここに文字を記入
      </div>
  </section>
</body>

<body>

ここに文字を記入

</div>

</section>

</body>

CSS

.out-wrap{
　padding: 100px 0;
　max-width: 500px;
　margin: auto;
}
.box {
　border: 3px solid #1ece50;
　outline: 3px solid #6b5f5f;
　outline-offset: 5px;
　text-align: center;
　padding: 10px 0;
}

.out-wrap{

　padding: 100px 0;

　max-width: 500px;

　margin: auto;

}

.box {

　border: 3px solid #1ece50;

　outline: 3px solid #6b5f5f;

　outline-offset: 5px;

　text-align: center;

　padding: 10px 0;

}

border: 3px solid #1ece50;
要素の周囲に3ピクセル幅の緑色の境界線（border）を指定。

outline: 3px solid #6b5f5f;
要素に3ピクセル幅の灰色のアウトライン（outline）境界線の外側。

outline-offset: 25px;
アウトラインの外側に余白（offset）要素とアウトラインの間にスペース指定。

下図は説明用でoutline-offsetの数値大きくしてます。

こんな感じになります。

是非参考にしてみてください。

画像とテキストコンテンツを横並び 1枚の画像を少し上にズラして配置。親要素の幅越えて画面いっぱい表示。positionとz-index 疑似要素使用【サンプルコードあり】

画像とテキストボックスを横並びにして重ね１枚の画像を少し上にずらした感じで配置。後ろにラインを入れたデザインをコーディングしてみました。後半では、親要素の幅を超えて画面いっぱいに表示させる方法も書いてます。今回は、positio...

フリーランス案件

フリーランスにもIT技術にも詳しいコンサルタントだから安心！【ポテパンフリーランス】

フリーランスコンサルタント・エンジニア伴走型マッチングサービス【RIRIKU】