今回の課題は、囲み枠にタイトルが乗っかっている！
む・むずかしい💦
ここは、クライアントに交渉をして簡単なタブ見出しにしてしまおう。と思っていました。
なのに、いとも簡単に作成してくれたメンバーがいました。
す・すごい・・・
やってみたら、あれれ・・・
そうでもない、コード
でも、私が苦手としている
position:absolute
そして
positionとtranslateを使って要素を中央に配置する方法
を学びました！！
参考サイトは下記の２つ

ＣＳＳの枠（囲み枠・ボックス）コピペで利用できるサンプル33選！

positionとtranslateを使って要素を中央に配置する方法

HTMLはこちら

<div class="flame01">
<span class="flame01-title">ここにタイトル</span>
<p>ここに文章</p>
</div>

.flame01 {
position: relative;
margin: 2em auto;
padding: 1em;
width: 80%;
color: #686868;
background-color: #fff;
border: 4px double #1d3157;
box-shadow: 2px 2px 2px #ccc;
}
.flame01 .flame01-title {
position: absolute;
display: block;
text-align:center;
top: -20px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
font-weight: bold;
width: 50%;
background-color: #1d3157;
color: #fff;
padding: 5px;
border: 2px solid yellow;
border-radius: 20px;
}
.flame01 p {
margin: 0;
}

お問い合わせはこちらから

メール送信後、3日経過しても返信がない場合は、ＰＣメールが受信できない設定になっている可能性がございます。
携帯やスマフォのキャリアメールの場合は、受信設定の変更をお願い申し上げます。

お問い合わせはこちら