ul・liタグでチェック付き相談ボックスを作る方法【シンプル＆柔らかデザイン】

この記事では、WordPressで「無料相談」や「サービス案内」などに使える、チェックマーク付きの相談ボックスをHTMLとCSSのみで作成する方法を紹介します。プラグイン不要で、誰でもすぐに設置できます。

1 実装のポイント

• HTMLはシンプルなリスト構造（ul, li）で構成
• CSSの疑似要素でチェックアイコンを実現
• カード風の柔らかいボックスデザイン
• レスポンシブ対応でスマホでもきれいに表示

2 HTML構造

<div class="consult-box">
  <ul>
    <li><strong>12か月間で10kg痩せたい方</strong></li>
    <li><strong>6ヶ月間で4kg痩せたい方</strong></li>
    <li><strong>1ヶ月間で2kg痩せたい方</strong></li>
  </ul>
  <p>どちらの方も是非、無料相談をお使いください。</p>
</div>
    

3 汎用CSS

/* -------------------------------------------------- */
/*  ボックス（チェック）                           */
/* -------------------------------------------------- */

/* 内容ボックス */
.consult-box { /* メインのボックス */
  background: #ffffff; /* 白背景でカード風 */
  border: 2px solid #c7def1; /* 淡いブルーの枠線 */
  border-radius: 10px; /* 角丸デザイン */
  padding: 30px 20px; /* 内側余白 */
  max-width: 700px; /* 横幅制限で整える */
  margin: 0 auto; /* 中央寄せ */
  text-align: left; /* 本文を左寄せ */
  box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ふんわり影を追加 */
  line-height: 1.8; /* 行間をゆったり */
}

/* リストのデザイン */
.consult-box ul { /* ulの初期設定をリセット */
  list-style: none; /* デフォルトの箇条書きを削除 */
  padding: 0; /* 余白をリセット */
  margin: 0 0 20px; /* 下に余白を追加 */
}

.consult-box ul li { /* 各項目 */
  position: relative; /* 疑似要素配置のために相対位置指定 */
  padding-left: 28px; /* アイコン分の左余白 */
  margin-bottom: 12px; /* 各項目の間隔 */
  color: #004c80; /* テキストカラーを青に */
  font-weight: 600; /* 少し太字にして読みやすく */
  font-size: 1.1em; /* わずかに大きめ */
}

/* 各項目の先頭に装飾アイコンを追加 */
.consult-box ul li::before { /* 疑似要素でチェックマーク */
  content: "\2714"; /* チェックマークを表示 */
  color: #00a2ff; /* 明るい青のアイコン */
  position: absolute; /* 左に固定配置 */
  left: 0; /* 左端に配置 */
  top: 0; /* 上揃え */
}

/* 最後の案内文 */
.consult-box p { /* ボックス下部の案内文 */
  font-size: 1em; /* 標準サイズ */
  color: #333; /* 読みやすい濃いグレー */
  margin-top: 15px; /* 上に少し余白 */
  text-align: center; /* 中央寄せでバランス良く */
  font-weight: 500; /* 適度な強調 */
}

/* スマホ対応（768px以下） */
@media (max-width: 768px) { /* レスポンシブ設定 */
  .consult-box {
    padding: 20px 15px; /* 余白を調整 */
  }
  .consult-box li {
    font-size: 1em; /* 文字を少し小さく */
  }
}
    

4 完成イメージ

5 まとめ

• HTML＋CSSのみでチェック付き相談ボックスを実装可能
• 疑似要素::beforeでチェックアイコンを簡単に追加
• どんなテーマにもマッチする汎用的なデザイン