Houn

2022.07.09 Web制作

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

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

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

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

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

サンプルとソースコード

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

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

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

挫折しないWeb制作学習ならデイトラがお勧めです

8/31まで限定で、全コース1万円引きのキャンペーンを開催されています。

詳細は下記バナーをクリックして、公式サイトを覗いてみてください。

Share on SNSシェア

お問い合わせ