公開日:2022.07.09
枠の途中にタイトルがある囲み枠をHTML・CSSで作る
枠の途中に短文のタイトル、見出しがある囲み枠…。言葉での表現がちょっと難しいですが、よくあるデザインですね。
枠にタイトルが食い込んでいるようなボックスです。
アイキャッチ画像はドラクエ戦闘画面風にしてみましたが(実際にCSSで作ったもののスクショです)、実務においては「注意点」や「ここがポイント!」みたいなコンテンツで使うことが多いのではと思います。
サンプルとソースコード
タイトルの位置や枠の見た目などはCSSタブにコメントを添えてますので、適宜調整してください。
ポイントはタイトルにきちんと背景色を指定してあげることです。
See the Pen Untitled by masakitano (@masakitano) on CodePen.