ボックスを画像のようなデザインにしたい

画像のようなデザインを実現したい

現状

このようになっていまして、どのようにしたらいいのかわからないのが現状になります。

コード

<div class="reserve_order">
    <div class="reserve_order_number">ご利用される日にちを教えてください</div>
    <p class="reserve_description">テスト</p>
 </div>

.reserve_order {
  /* margin: 2em auto; ボックスの余白 */
  padding:2em; /* ボックス内側余白 */
  position:relative; /* 配置(ここを基準に) */
  border: 2px solid #736f66;	/* ボックスの線 (太さ　種類　色)*/
  width:35%;
}

.reserve_order_number {
  background-color:#f0f1ec; /* タイトル背景色 */
  font-size: 16px;/* タイトル文字の大きさ */
  font-weight: 800;
  color: #736f66; /* タイトル文字色 */
  padding: 0 5px;/*タイトルの余白*/
  line-height: 1;/*タイトルの行の高さ*/
  position:absolute;	/* 配置(ここを動かす) */
  top: -5px; /*上から（-5px）移動*/
  left: 20px; /*左から(20px)移動*/
}

どなたか教えていただけると幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

囲んだ段落のキャプションをつけるなら標準的にfieldset-legendが用意されています
あとはすでにhatena19さんが回答しているものを応用してこんな感じで

css
1<style>
2.reserve_order{
3  margin-left:30px;
4}
5.reserve_order_number {
6  margin-left:-30px;
7  display: flex;
8  align-items: center;
9  padding-right: .5em;
10}
11.reserve_order_number:before {
12  content: "1";
13  width: 3em;
14  height: 3em;
15  line-height: 3;
16  margin-right: .5em;
17  border: 1px solid black;
18  border-radius: 50%;
19  text-align: center;
20}
21</style>
22<fieldset class="reserve_order">
23  <legend class="reserve_order_number">ご利用される日にちを教えてください</legend>
24  <p class="reserve_description">テスト</p>
25</fieldset>

投稿2022/10/28 00:48

yambejp

総合スコア114843

tyosu

2022/10/28 02:21

yambejpさん新たな知識ありがとうございます！応用しながらやってみます！

行動規範の内容に同意します

ベストアンサー

いろいろ方法は考えられると思いますが、::before疑似要素で表現してみました。

css
1.reserve_order {
2  margin: 2em; /* ボックスの余白 */
3  padding:2em; /* ボックス内側余白 */
4  position:relative; /* 配置(ここを基準に) */
5  border: 2px solid #736f66;	/* ボックスの線 (太さ　種類　色)*/
6  width:35%;
7}
8.reserve_order_number {
9  background-color:#f0f1ec; /* タイトル背景色 */
10  font-size: 16px;/* タイトル文字の大きさ */
11  font-weight: 800;
12  color: #736f66; /* タイトル文字色 */
13  padding: 0 5px;/*タイトルの余白*/
14  line-height: 1;/*タイトルの行の高さ*/
15  position:absolute;	/* 配置(ここを動かす) */
16  top: -1.5em; /* 適宜調整 */
17  left: -1.5em; /* 適宜調整 */
18  display: flex;
19  align-items: center;
20}
21.reserve_order_number::before {
22  content: "1";
23  width: 3em;
24  height: 3em;
25  line-height: 3;
26  margin-right: .5em;
27  border: 2px solid #736f66;
28  border-radius: 50%;
29  text-align: center;
30  flex-shrink: 0;
31  align-self: flex-start;
32}