【CSSコピペ】タイトル付き囲み枠デザイン｜お知らせやサービス紹介に使える

この記事では、タイトル付きの囲み枠のデザインをご紹介しています。

ぜひ、サービス紹介やお知らせに使ってみてください♪

色と形を選んでコードをつくる#

好きな色とデザインを選ぶと、コピペ用のコードができます。
見本を探すより早く使いたい方は、こちらからどうぞ。

JavaScriptを有効にすると、色と形を選んでコードをつくれます。下の見本のコードをコピーして使うこともできます。

各ブログでの囲み枠の使い方#

掲載されているコードをHTMLタグ編集モードで貼り付けると囲み枠を使うことができます！

詳しい使い方は以下の記事をご覧ください。

【CSS】シンプルで女性らしい囲み枠デザイン48選

サブタイトル付き囲み枠デザイン#

横幅いっぱいの囲み枠#

タイトルを入力

テキストを入力

1
<div style="border:1px solid #efc4c0;">
2
  <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
3
  <div style="padding:1em;background:#ffffff">テキストを入力</div>
4
</div>

横幅いっぱいの囲み枠（背景色あり）#

タイトルを入力

テキストを入力

1
<div style="border:1px solid #efc4c0;">
2
  <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
3
  <div style="padding:1em;background:#fbf0ef">テキストを入力</div>
4
</div>

影付きの囲み枠#

タイトルを入力

テキストを入力

1
<div style="box-shadow: 4px 6px 10px rgba(0, 0, 0, .3);">
2
  <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">タイトルを入力</div>
3
  <div style="padding:1em;background:#ffffff">テキストを入力</div>
4
</div>

シンプルな囲み枠#

タイトルを入力

テキストを入力

1
<div style="border:1px solid #efc4c0; padding:0.5em">
2
<div style="color:#efc4c0;padding:0.5em 1em;">タイトルを入力</div>
3
<div style="padding:1em;">テキストを入力</div>
4
</div>

シンプルな囲み枠（背景色あり）#

タイトルを入力

テキストを入力

1
<div style="border:1px solid #efc4c0; padding:0.5em; background:#fbf0ef;">
2
<div style="color:#efc4c0;padding:0.5em 1em;">タイトルを入力</div>
3
<div style="padding:1em;">テキストを入力</div>
4
</div>

丸みのある囲み枠#

タイトルを入力

1
<div style="border:1px solid #efc4c0;border-radius:10px;padding:1em;">
2
<div style="padding:0.5em;border-bottom: 3px solid #efc4c0;color:#efc4c0;">タイトルを入力</div>
3
<div style="padding:1em 0.5em;">タイトルを入力</div>
4
</div>

線で囲ったデザイン１#

タイトル入力

テキスト入力

1
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;">
2
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;color:#fff;line-height: 1em;">タイトル入力</div>
3
<div style="margin: 0; padding: 0;">テキスト入力</div>
4
</div>

線で囲ったデザイン２#

タイトル入力

テキスト入力

1
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
2
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;border-radius:4px;color:#fff;line-height: 1em;">タイトル入力</div>
3
<div style="margin: 0; padding: 0;">テキスト入力</div>
4
</div>

線で囲ったデザイン3#

タイトル入力

テキスト入力

1
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
2
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#F6BCAC;line-height: 1em;">タイトル入力</div>
3
<div style="margin: 0; padding: 0;">テキスト入力</div>
4
</div>

線で囲ったデザイン4#

タイトル入力

テキスト入力

1
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;">
2
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;color:#efc4c0;line-height: 1em;">タイトル入力</div>
3
<div style="margin: 0; padding: 0;">テキスト入力</div>
4
</div>

色の変更方法#

色は「#FFFFFF」というように#のあとに６桁の英数字を並べたカラーコードを使います。

カラーコードを差し替えることで、色を変えられます。

#ffffffは白を意味します。

color（文字色）→　#efc4c0など

border（枠線）→ #efc4c0など

background-color（背景色）→ #fbf0efなど

私は、おしゃれな配色が紹介されているCoolorsというサイトから色選んで使っています。

自由にアレンジしてみてくださいね！

【CSS】シンプルで女性らしい囲み枠デザイン48選