Houn

Web制作

公開日:2022.07.09

枠の途中にタイトルがある囲み枠をHTML・CSSで作る

枠の途中に短文のタイトル、見出しがある囲み枠…。言葉での表現がちょっと難しいですが、よくあるデザインですね。

枠にタイトルが食い込んでいるようなボックスです。

アイキャッチ画像はドラクエ戦闘画面風にしてみましたが(実際にCSSで作ったもののスクショです)、実務においては「注意点」や「ここがポイント!」みたいなコンテンツで使うことが多いのではと思います。

サンプルとソースコード

タイトルの位置や枠の見た目などはCSSタブにコメントを添えてますので、適宜調整してください。

ポイントはタイトルにきちんと背景色を指定してあげることです。

See the Pen Untitled by masakitano (@masakitano) on CodePen.