この記事では、タイトル付きの囲み枠のデザインをご紹介しています。
ぜひ、サービス紹介やお知らせに使ってみてください♪
目次
各ブログでの囲み枠の使い方
掲載されているコードをHTMLタグ編集モードで貼り付けると囲み枠を使うことができます！
詳しい使い方は以下の記事をご覧ください。
あわせて読みたい
【CSS】シンプルで女性らしい囲み枠デザイン48選
囲み枠は文章を枠でかこんだデザインのこと。 囲み枠は文章を枠でかこんだデザインのこと。 文章の中で囲み枠を設定すると、記事内で文章を目立たせたり、メリハリをつ…
サブタイトル付き囲み枠デザイン
横幅いっぱいの囲み枠
タイトルを入力
テキストを入力
<div style="border:1px solid #efc4c0;">
<div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
<div style="padding:1em;background:#ffffff">テキストを入力</div>
</div>横幅いっぱいの囲み枠（背景色あり）
タイトルを入力
テキストを入力
<div style="border:1px solid #efc4c0;">
<div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
<div style="padding:1em;background:#fbf0ef">テキストを入力</div>
</div>影付きの囲み枠
タイトルを入力
テキストを入力
<div style="box-shadow: 4px 6px 10px rgba(0, 0, 0, .3);">
<div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
<div style="padding:1em;background:#ffffff">テキストを入力</div>
</div>シンプルな囲み枠
タイトルを入力
テキストを入力
<div style="border:1px solid #efc4c0; padding:0.5em">
<div style="color:#efc4c0;padding:0.5em 1em;">タイトルを入力</div>
<div style="padding:1em;">テキストを入力</div>
</div>シンプルな囲み枠（背景色あり）
タイトルを入力
テキストを入力
<div style="border:1px solid #efc4c0; padding:0.5em; background:#fbf0ef;">
<div style="color:#efc4c0;padding:0.5em 1em;">タイトルを入力</div>
<div style="padding:1em;">テキストを入力</div>
</div>丸みのある囲み枠
タイトルを入力
タイトルを入力
<div style="border:1px solid #efc4c0;border-radius:10px;padding:1em;">
<div style="padding:0.5em;border-bottom: 3px solid #efc4c0;color:#efc4c0;">タイトルを入力</div>
<div style="padding:1em 0.5em;">タイトルを入力</div>
</div>線で囲ったデザイン１
タイトル入力
テキスト入力
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;color:#fff;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>線で囲ったデザイン２
タイトル入力
テキスト入力
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;border-radius:4px;color:#fff;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>線で囲ったデザイン3
タイトル入力
テキスト入力
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#F6BCAC;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>線で囲ったデザイン4
タイトル入力
テキスト入力
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;color:#efc4c0;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>色の変更方法
色は「#FFFFFF」というように#のあとに６桁の英数字を並べたカラーコードを使います。
カラーコードを差し替えることで、色を変えられます。
#ffffffは白を意味します。
color（文字色）→#efc4c0など
border（枠線）→ #efc4c0など
background-color（背景色）→ #fbf0efなど
私は、おしゃれな配色が紹介されているCoolorsというサイトから色選んで使っています。
自由にアレンジしてみてくださいね！
あわせて読みたい
【CSS】シンプルで女性らしい囲み枠デザイン48選
囲み枠は文章を枠でかこんだデザインのこと。 囲み枠は文章を枠でかこんだデザインのこと。 文章の中で囲み枠を設定すると、記事内で文章を目立たせたり、メリハリをつ…