【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集

<div class="cstm-box-solid">
  <p>シンプルな実線枠</p>
</div>

/* 枠付きボックス */
.cstm-box-solid {
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  border: 2px solid #333; /* 実線 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-solid p { margin: 0;}

<div class="cstm-box-double">
  <p> 二重線でモダンな印象</p>
</div>

/* 二重線 */
.cstm-box-double {
  margin: 2em auto; /* 外側余白 */
  padding: 1em 2em; /* 内側余白 */
  border:5px double #CCCFD6; /* 線の種類・太さ・色 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落（余白なし） */
.cstm-box-solid p { margin: 0;}

<div class="cstm-box-dashed">
  <p>破線で軽い印象</p>
</div>

/* 破線 */
.cstm-box-dashed {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   border: dashed 2px #b3ada4; /* 線の種類・太さ・色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-dashed p { margin:0; }

<div class="cstm-box-dotted">
  <p>ドット状の点線で遊び心を</p>
</div>

/* 点線（ドット） */
.cstm-box-dotted {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   border:2px dotted #CCA99D; /* 点線 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-dotted p { margin:0; }

<div class="cstm-box-bg">
  <p>単色背景でシンプルに強調</p>
</div>

/* 背景色 */
.cstm-box-bg {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background-color:#E5F2F1; /* 背景色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-bg p { margin:0; }

<div class="cstm-box-paper">
  <p>紙の角がめくれたような影付きデザイン</p>
</div>

/* めくれた紙風 */
.cstm-box-paper {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background-color: #f2f3f4; /* 背景色（薄いグレー） */
   position: relative; /* 相対位置指定 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-paper::after {
   position: absolute; /* 絶対位置指定 */
   content: ''; /* 擬似要素にコンテンツを表示しない */
   right: 0px; /* 右端に配置 */
   top: 0px; /* 上端に配置 */
   border-width: 0 25px 25px 0; /* 形状 */
   border-style: solid; /* 線の種類 */
   border-color: #ccc #fff #ccc; /* 線の色 */
   box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影*/
}

/* ボックス内の段落 */
.cstm-box-paper p { margin:0; }

<div class="cstm-box-stripe">
  <p>斜めストライプ背景で洗練された印象</p>
</div>

/* ストライプ */
.cstm-box-stripe {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background-image: repeating-linear-gradient(
   -45deg,   /* ストライプの角度 */
   #f2f3f7 0,   /* ストライプの色（薄いグレー） */
   #f2f3f7 3px,   /* ストライプの太さ（3pxの間隔） */
   transparent 3px,  /* 透明部分 */
   transparent 6px   /* 透明部分（3pxから6pxまで） */
   );
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stripe p { margin:0; }

<div class="cstm-box-sticky">
  <p>付箋のような柔らかいデザイン</p>
</div>

/* ふせん風 */
.cstm-box-sticky {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-left: solid 5px #e9b3a3;  /* 左側の線 */
   background-color: #F9F8F8;   /* 背景色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-sticky p { margin:0; }

<div class="cstm-box-topline">
  <p>上部に太い線で強調</p>
</div>

/* 上にだけ太線 */
.cstm-box-topline {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   border-top:3px solid #F7C16E; /* 上辺に太い線 */
   background-color: #FDFBF6;   /* 背景色 */
   box-shadow: 3px 1px 4px rgb(0 0 0 / .2); /* 影の効果: 右3px、下1px、ぼかし4px */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-topline p { margin:0; }

<div class="cstm-box-topbottom">
  <p>上下に太い線で安定感</p>
</div>

/* 上下に太線 */
.cstm-box-topbottom {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-top: 3px solid #8FAAAD;  /* 上辺に太い線 */
   border-bottom: 3px solid #8FAAAD; /* 下辺に太い線 */
   background-color: #FBFBFB;   /* 背景色 */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-topbottom p { margin:0; }

<div class="cstm-box-offset">
  <p>オフセットで奥行きを演出</p>
</div>

/* 少しずらしたボックス */
.cstm-box-offset {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background: none; /* 元のボックス背景色なし */
   border: 1px solid #ccc; /* 線の太さ（1px）、種類（実線）、色（#ccc） */
   position: relative; /* 配置（基準となる位置） */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-offset:after {
   background-color: #eee; /* ずらしたボックスの背景色 */
   border: none; /* 枠線なし */
   content: ''; /* 擬似要素にコンテンツなし */
   position: absolute; /* 配置（ここを動かす） */
   top: 7px; /* 上から7pxずらす */
   left: 7px; /* 左から7pxずらす */
   width: 100%; /* 幅100%（親要素に合わせる） */
   height: 100%; /* 高さ100%（親要素に合わせる） */
   z-index: -1; /* 背景として後ろに表示 */
}

/* ボックス内の段落 */
.cstm-box-offset p { margin:0; }

<div class="cstm-box-corner-accent">
  <p>線の一部に色を追加</p>
</div>

/* アクセントカラー */
.cstm-box-corner-accent {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   border: 3px solid #eee; /* ベースの実線 */
   position: relative; /* 配置（基準） */
   z-index: 0; /* 重なり順 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-corner-accent:before {
   border-top: 3px solid #8293AA; /* 上辺の線の色（#8293AA） */
   border-left: 3px solid #8293AA; /* 左辺の線の色（#8293AA） */
   content: ''; /* 擬似要素にコンテンツなし */
   display: block; /* 擬似要素をブロック表示 */
   position: absolute; /* 配置（位置を指定） */
   top: -3px; /* 上から-3pxずらす */
   left: -3px; /* 左から-3pxずらす */
   width: 20px; /* 幅20px */
   height: 20px; /* 高さ20px */
   z-index: 1; /* 重なり順（前面に表示） */
}

/* ボックス内の段落 */
.cstm-box-corner-accent p { margin:0; }

<div class="cstm-box-grid">
  <p>グリッド背景でレトロ感</p>
</div>

/* 方眼紙風 */
.cstm-box-grid {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background-image: 
   linear-gradient(0deg, transparent 19px, #d3d3d3 20px), /* 横のグラデーション */
   linear-gradient(90deg, transparent 19px, #d3d3d3 20px); /* 縦のグラデーション */
   background-size: 20px 20px; /* 方眼のサイズ */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-grid p { margin:0; }

<div class="cstm-box-swell">
  <p>有料テーマSWELLテーマの目次風デザイン</p>
</div>

/* SWELL風目次ボックス */
.cstm-box-swell {
  --border-color-1: #fafafa; /* ストライプ背景の色 */
  --border-color-2: #ddd; /* 上下枠線の色 */
  margin: 2em auto; /* 外側余白 */
  padding: 2em; /* 内側余白 */
  background: linear-gradient(
    -45deg,
    transparent 25%,
    var(--border-color-1) 25%,
    var(--border-color-1) 50%,
    transparent 50%,
    transparent 75%,
    var(--border-color-1) 75%,
    var(--border-color-1)
  ); /* ストライプ模様 */
  background-size: 4px 4px;   /* ストライプのサイズ */
  border-top: 4px double var(--border-color-2); /* 上枠線 */
  border-bottom: 4px double var(--border-color-2); /* 下枠線 */
  background-clip: padding-box; /* 背景をパディング領域まで表示 */
  max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落：余白なし */
.cstm-box-swell p { margin: 0;}

<div class="cstm-box-rounded-bg">
  <p>丸角と背景色で柔らかく</p>
</div>

/* 背景色をつけて角を丸くする */
.cstm-box-rounded-bg {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-radius:30px; /*丸みを調整 */
   background-color:#f9e8e2;
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-rounded-bg p { margin:0; }

<div class="cstm-box-fluffy">
  <p>雲のような柔らかい枠</p>
</div>

/* ふわふわな枠線 */
.cstm-box-fluffy {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   background-color:#fff; /* 背景色 */
   box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset; /*ふわりとした影*/
   border-radius: 30px;
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-fluffy p { margin:0; }

<div class="cstm-box-stitch-brown">
  <p>茶色の縫い目風デザイン</p>
</div>

/* 茶ステッチをつける */
.cstm-box-stitch-brown {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #f4f3f1; /* 薄いベージュ */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-stitch-brown::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 1px dashed #A7A297;
   border-radius: 10px;
   z-index: -1;
   display: block;
}

/* ボックス内の段落 */
.cstm-box-stitch-brown p { margin:0; }

<div class="cstm-box-stitch-white">
  <p>白い縫い目で清潔感</p>
</div>

/* 白ステッチをつける */
.cstm-box-stitch-white {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   position: relative;
   z-index: 0;
   background-color: #d6e0ea; /* 淡いブルーグレー */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-stitch-white::before {
   content: '';
   position: absolute;
   inset: 0; /* top, right, bottom, left を一括指定 */
   margin: 5px;
   border: 2px dashed #fff;
   border-radius: 3px;
   z-index: -1;
   display: block;
}

/* ボックス内の段落 */
.cstm-box-stitch-white p { margin:0; }

<div class="cstm-box-handdrawn">
  <p>手書きラインで親しみやすく</p>
</div>

/* 手書き風 */
.cstm-box-handdrawn {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   border-radius: 30px 60px / 60px 30px;  /* 角をランダムに丸めて手書き風に */
   border: solid 5px #ccc7be;   /* 太めの枠線（8px、色: #ccc7be） */
    max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-handdrawn p { margin:0; }

<div class="cstm-box-pin">
  <p>ワンポイント装飾付き</p>
</div>

/* ワンポイント付きボックス */
.cstm-box-pin {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   position: relative; /* 擬似要素配置の基準 */
   border: 8px solid #eee; /* 枠線（太さ・種類・色） */
   z-index: 0; /* 重なり順 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-pin::before {
   content: ''; /* 擬似要素にコンテンツなし */
   display: block; /* ブロック要素として表示 */
   position: absolute; /* 絶対位置指定 */
   top: -8px; /* 上に配置 */
   left: -8px; /* 左に配置 */
   width: 8px; /* サイズ（幅） */
   height: 8px; /* サイズ（高さ） */
   background-color: #cca497; /* ワンポイントの色 */
   z-index: 1; /* 前面に表示 */
}

/* 段落の余白リセット */
.cstm-box-pin p { margin: 0;}

<div class="cstm-box-checkered">
  <p>チェック柄背景で可愛く</p>
</div>

/* 背景チェック */
.cstm-box-checkered {
   margin: 2em auto; /* 外側余白 */
   padding: 2em;   /* 内側余白 */
   background-image: 
   linear-gradient(90deg, rgba(204, 204, 204, 0.1) 50%, transparent 50%), 
   linear-gradient(rgba(204, 204, 204, 0.2) 50%, transparent 50%); /* チェック模様 */
   background-size: 15px 15px;   /* チェックのサイズ */
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-checkered p { margin:0; }

<div class="cstm-box-stripe-wide">
  <p>太めのストライプで華やかに</p>
</div>

/* 背景ストライプ */
.cstm-box-stripe-wide {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background: repeating-linear-gradient(
   -45deg,   /* ストライプの角度 */
   #f8f8f8 0 6px, /* 薄いグレー、幅6px */
   #fff 6px 12px  /* 白（#fff）、幅6px */
   );
   max-width: 800px; /* 最大幅 */
}

/* ボックス内の段落 */
.cstm-box-stripe-wide p { margin:0; }

<div class="cstm-box-notebook">
  <p>ノートのようなカジュアルデザイン</p>
</div>

/* ノート風 */
.cstm-box-notebook {
   margin: 2em auto; /* 外側余白 */
   padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
   position: relative;
   background: #f4f3f2; /* 背景色（ノート風の淡い色） */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-notebook::before {
   content: '';
   position: absolute;
   inset: 0.5em 0 0 0; /* 上から0.5em、左右と下を0に */
   margin: 0 auto; /* 水平方向中央揃え */
   width: 95%; /* ドット線の横幅 */
   border-top: dotted 10px #fff; /* ドット線（太さ10px、白） */
   pointer-events: none; /* クリックを透過 */
}

/* ボックス内の段落 */
.cstm-box-notebook p { margin:0; }

<div class="cstm-box-titled">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>上部にタイトルを配置</p>
  </div>
</div>

/* 見出し付きボックス */
.cstm-box-titled {
   --box-color: #8b9b9d; /* 基本色 */
   margin: 2em auto; /* 外側余白（上下・中央寄せ） */
   border: 1px solid var(--box-color); /* 枠線 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-titled .box-title {
   background-color: var(--box-color); /* 見出し背景色 */
   color: #fff; /* タイトル文字色 */
   padding: 0.6em 1em; /* 内側余白 */
   text-align: center; /* 中央揃え */
   font-weight: bold; /* 太字 */
}

.cstm-box-titled .box-content {
   padding: 2em; /* コンテンツの内側余白 */
}

/* 段落の余白リセット */
.cstm-box-titled p { margin:0; }

<div class="cstm-box-label">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>ラベル風のタイトルデザイン</p>
  </div>
</div>

/* タイトル付きボックス（ラベル） */
.cstm-box-label {
   --box-color: #CCA99D; /* 基本色 */
   position: relative; /* タイトル配置の基準 */
   margin: 2em auto; /* 外側余白（上下・中央寄せ） */
   border: 2px solid var(--box-color); /* 枠線 */
   border-radius: 2px; /* 角丸 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-label .box-title {
   position: absolute; /* タイトル位置指定 */
   top: -0.5em; /* 上に少し移動 */
   left: 1em; /* 左端からの距離 */
   background-color: #fff; /* タイトル背景色 */
   color: var(--box-color); /* タイトル文字色 */
   padding: 0 .5em; /* 内側余白 */
   font-weight: bold; /* 太字 */
   line-height: 1; /* 行の高さ */
   display: inline-block; /* 幅を内容に合わせる */
   width: auto; /* 幅自動調整 */
   max-width: calc(100% - 2em); /* 左右の余白を考慮 */
   white-space: nowrap; /* 折り返さない */
   overflow: hidden; /* はみ出し非表示 */
   text-overflow: ellipsis; /* 省略記号表示 */
}

.cstm-box-label .box-content { 
   padding: 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-label p { margin:0; }

<div class="cstm-box-title-topleft">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>左上に背景色付きタイトル</p>
  </div>
</div>

/* 左上タイトル付きボックス */
.cstm-box-title-topleft {
   --box-color: #6fabb5; /* 基本色 */
   position: relative; /* タイトル配置の基準 */
   margin: 2em auto; /* 外側余白（上下・中央寄せ） */
   border: 1px solid var(--box-color); /* 枠線 */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-title-topleft .box-title {
   background-color: var(--box-color); /* タイトル背景色 */
   color: #fff; /* 文字色 */
   padding: 0.2em 1em; /* 内側余白（上下・左右） */
   position: absolute; /* 親ボックス内で位置固定 */
   top: 0; /* 上端に配置 */
   left: 0; /* 左端に配置 */
   display: inline-block; /* 幅を内容に合わせる */
   font-size: 0.9em; /* フォントサイズ */
   font-weight:bold; /* 太字 */
   width: auto; /* 幅を自動調整 */
   max-width: calc(100% - 2em); /* 左右余白を考慮 */
   white-space: nowrap; /* 折り返さない */
   overflow: hidden; /* はみ出し非表示 */
   text-overflow: ellipsis; /* 省略記号表示 */
}

.cstm-box-title-topleft .box-content {
   padding: 3em 2em 2em; /* 上部余白を多めに確保 */
}

/* 段落の余白リセット */
.cstm-box-title-topleft p { margin: 0;}

<div class="cstm-box-title-topleft">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content">
   <p>左上に背景色付きタイトル</p>
  </div>
</div>

/* 左上タイトル付きボックス */
.cstm-box-title-topleft {
  --box-color: #CCA99D; /* 基本色 */
  margin: 2em auto; /* 外側余白 */
  position: relative; /* タイトル基準 */
  border: 1px solid var(--box-color); /* 枠線 */
  border-radius: 3px; /* 角丸 */
  max-width: 800px; /* 最大幅 */
}

.cstm-box-title-topleft .box-title {
  background: var(--box-color); /* 背景 */
  color: #fff; /* 文字色 */
  padding: 0.2em 1em; /* 内側余白 */
  position: absolute; /* 左上固定 */
  top: -0.7em; left: 0.7em; /* 位置 */
  display: inline-block; /* 内容幅 */
  font-size: 0.9em; /* サイズ */
  font-weight:bold; /* 太字 */
  border-radius: 3px; /* 角丸 */
  max-width: calc(100% - 2em); /* 幅調整 */
  white-space: nowrap; /* 折返しなし */
  overflow: hidden; text-overflow: ellipsis; /* 省略 */
}

.cstm-box-title-topleft .box-content {
  padding: 2.5em 2em 2em; /* タイトル分の余白 */
}

/* 段落の余白なし */
.cstm-box-title-topleft p { margin: 0; }

<div class="cstm-box-masking">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>テープで貼ったようなタイトル</p>
  </div>
</div>

/* マスキングテープ風ボックス */
.cstm-box-masking {
   position: relative; /* タイトル配置の基準 */
   margin: 2em auto; /* 外側余白 */
   background-color: #F6EEEC; /* ボックス背景色 */
   max-width: 800px; /* 最大幅 */
}

/* タイトル（テープ風） */
.cstm-box-masking .box-title {
   background-image: repeating-linear-gradient(-45deg,#F6EEEC 0, #F6EEEC 3px,#fafafa 3px,#fafafa 6px); /* ストライプ模様 */
   transform: rotate(-2deg); /* テープの傾き */
   box-shadow: 0 1px 2px rgb(0 0 0 / .1); /* テープの影 */
   padding: .5em 1em; /* 内側余白 */
   line-height: 1; /* 行の高さ */
   position: absolute; /* 親の左上に固定 */
   top: -1em; /* 上位置 */
   left: 1em; /* 左位置 */
   display: inline-block; /* 内容幅に合わせる */
   font-size: 0.9em; /* フォントサイズ */
   width: auto; /* 幅自動調整 */
   max-width: calc(100% - 2em); /* 最大幅調整 */
   white-space: nowrap; /* 折り返さない */
   overflow: hidden; /* はみ出し非表示 */
   text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツ部分の余白 */
.cstm-box-masking .box-content {
   padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-masking p { margin: 0;}

<div class="cstm-box-tape">
  <div class="box-title">ここにタイトルを入力</div>
  <div class="box-content"> 
   <p>透明テープ風のタイトル</p>
  </div>
</div>

/* セロテープ風ボックス */
.cstm-box-tape {
   position: relative; /* タイトル配置の基準 */
   margin: 2em auto; /* 外側余白 */
   background-color: #E6ECF2; /* ボックス背景色 */
   max-width: 800px; /* 最大幅 */
}

/* タイトル（セロテープ風） */
.cstm-box-tape .box-title {
   background-color: rgb(255 255 255 / .1); /* 透過背景色 */
   border-left: 2px dotted rgb(0 0 0 / .1); /* 左端のギザギザ */
   border-right: 2px dotted rgb(0 0 0 / .1); /* 右端のギザギザ */
   box-shadow: 0 0 5px rgb(0 0 0 / .12); /* 影 */
   transform: rotate(-2deg); /* 傾き */
   color: #666; /* 文字色 */
   padding: 10px 20px; /* 内側余白 */
   line-height: 1; /* 行の高さ */
   position: absolute; /* 親の左上に固定 */
   top: -1em; /* 上位置 */
   left: 1em; /* 左位置 */
   display: inline-block; /* 内容幅に合わせる */
   font-size: 0.9em; /* フォントサイズ */
   width: auto; /* 幅自動調整 */
   max-width: calc(100% - 2em); /* 最大幅調整 */
   white-space: nowrap; /* 折り返さない */
   overflow: hidden; /* はみ出し非表示 */
   text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツの余白 */
.cstm-box-tape .box-content {
   padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-tape p { margin: 0;}

<div class="cstm-box-memo">
<div class="box-title">MEMO</div>
   <p>メモ帳アイコンでカジュアルに</p>
</div>

/* メモアイコン付きボックス */

/* ボックス全体 */
.cstm-box-memo {
   margin: 2em auto; /* 外側余白 */
   padding: 1em 2em 2em; /* 内側余白 */
   background-color: #f0f4ff; /* 背景色 */
   border-radius: 5px; /* 角の丸み */
   max-width: 800px; /* 最大幅 */
}

/* タイトル部分 */
.cstm-box-memo .box-title {
   color: #839de5; /* 文字色 */
   font-size: 1.1em; /* 文字サイズ */
   font-weight: bold; /* 太字 */
   line-height: 2; /* 行の高さ */
}

/* タイトルのアイコン */
.cstm-box-memo .box-title::before {
   font-family: "Font Awesome 5 Free"; /* アイコンフォント */
   content: "\f304"; /* メモアイコン */
   margin-right: 5px; /* アイコンと文字の間隔 */
}

/* ボックス内段落の余白リセット */
.cstm-box-memo p { margin: 0;}

<div class="cstm-box-alert">
<div class="box-title">タイトルを入力</div>
   <p>びっくりマーク！で強調</p>
</div>

/* ビックリマークのアイコンをつけた囲み枠 */
.cstm-box-alert {
   margin: 2em auto; /* 外側余白 */
   padding: 1em 2em 2em; /* 内側余白 */
   background-color: #f7ebe6; /* 背景色 */
   border-radius: 5px; /* 角の丸み */
   max-width: 800px; /* 最大幅 */
}

/* ボックスのタイトル部分 */
.cstm-box-alert .box-title {
   color: #bd7b68; /* タイトル文字色 */
   font-size: 1.1em; /* タイトルサイズ */
   font-weight: bold; /* 太字 */
   line-height: 2; /* 行の高さ */
}

/* タイトル部分のアイコン */
.cstm-box-alert .box-title::before {
   font-family: "Font Awesome 5 Free"; /* アイコンフォント */
   content: "\f06a"; /* ビックリマークアイコン */
   margin-right: 5px; /* アイコンと文字の間隔 */
}

/* ボックス内の段落 */
.cstm-box-alert p { margin:0; }

<div class="cstm-box-help">
<div class="box-title">タイトルを入力</div>
   <p>はてなマーク？で疑問を表現</p>
</div>

/* はてなマーク付き囲み枠 */
.cstm-box-help {
 margin: 2em auto; /* 外側余白 */
 padding: 1em 2em 2em; /* 内側余白 */
 background-color: #def3f5; /* 背景色 */
 border-radius: 5px; /* 角丸 */
 max-width: 800px; /* 最大幅 */
}

/* タイトル */
.cstm-box-help .box-title {
 color: #4d8d8d; /* 文字色 */
 font-size: 1.1em; /* 文字サイズ */
 font-weight: bold; /* 太字 */
 line-height: 2; /* 行の高さ */
}

/* タイトルアイコン */
.cstm-box-help .box-title::before {
 font-family: "Font Awesome 5 Free"; /* アイコンフォント */
 content: "\f059"; /* はてなマーク */
 margin-right: 5px; /* 文字との間隔 */
}

/* 段落余白リセット */
.cstm-box-help p { margin:0; }

<div class="cstm-box-check">
<div class="box-title">Check</div>
   <p>チェックマーク✓で完了や確認を表現</p>
</div>

/* チェックマーク付き囲み枠 */
.cstm-box-check {
 margin: 2em auto; /* 外側余白 */
 padding: 1em 2em 2em; /* 内側余白 */
 background-color: #fff5cf; /* 背景色 */
 border-radius: 5px; /* 角丸 */
 max-width: 800px; /* 最大幅 */
}

/* タイトル */
.cstm-box-check .box-title {
 color: #eba500; /* 文字色 */
 font-size: 1.1em; /* 文字サイズ */
 font-weight: bold; /* 太字 */
 line-height: 2; /* 行の高さ */
}

/* タイトルアイコン */
.cstm-box-check .box-title::before {
 font-family: "Font Awesome 5 Free"; /* アイコンフォント */
 content: "\f00c"; /* チェックマーク */
 margin-right: 5px; /* 文字との間隔 */
}

/* 段落余白リセット */
.cstm-box-check p { margin:0; }