先生、ブログやWebサイトでよく見る「POINT」とか「注意」みたいなタイトルが付いた囲み枠って、どうやって作るんですか？
タイトル付きの囲み枠は、情報を整理して伝えるのにとても便利だよね。CSSの疑似要素やdata属性を使うと、HTMLはシンプルなままで様々なデザインが作れるんだ。
疑似要素って::beforeとか::afterのことですよね？それでタイトル部分を作るんですか？
そう。content: attr(data-title)という書き方を使うと、HTMLのdata属性に書いたテキストをCSSで表示できるんだ。今回は17種類のタイトル付き囲み枠を見ていこう。
疑似要素(::before)を使ったタイトル作成の基本
タイトル付き囲み枠を作る際、多くのデザインで使われるのが::before疑似要素です。この技術を理解しておくと、今回紹介する17種類のデザインがより深く理解できます。
data属性とattr()関数
HTMLのdata-*属性に設定した値を、CSSのcontentプロパティで取得して表示できます。
基本的な仕組み
<!-- HTMLでタイトルテキストを設定 -->
<div class="box" data-title="POINT">
<p>本文テキスト</p>
</div>CSS
/* CSSでdata-title属性の値を表示 */
.box::before {
content: attr(data-title); /* "POINT"が表示される */
}この方法のメリットは、HTMLの属性値を変えるだけでタイトルを変更できること。CSSを修正せずに「注意」「メモ」「ヒント」など様々なラベルに対応できます。
位置の制御（position: absolute）
タイトルを枠の外側や特定の位置に配置するには、positionプロパティを使います。
位置制御の基本
.box {
position: relative; /* 基準位置を設定 */
}
.box::before {
position: absolute; /* 親要素を基準に配置 */
bottom: 100%; /* 親要素の上端に配置 */
left: -2px; /* 左端に配置（ボーダー分調整） */
}- bottom: 100% 親要素の上端（外側）に配置
- top: 0 親要素の上端（内側）に配置
- left: 50% + transform: translateX(-50%) 中央に配置
作成したタイトル付き囲み枠
今回は、様々なスタイルのタイトル付き囲み枠を17種類紹介します。左上配置、中央配置、グラデーション背景、斜めライン、吹き出し風など、用途に応じて使い分けられるデザインを揃えました。
左上にタイトルを入れたCSS囲み枠デザイン
タイトルが枠の左上から飛び出す、最もベーシックなスタイルです。
HTML
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 1rem;
border: 2px solid #e056db;
border-box: box-sizing;
background-color: #fce0fb;
}
.box::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 0.5rem;
background-color: #e056db;
color: white;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- ピンク系の優しい色合い
- タイトルが枠の左上から飛び出すデザイン
### 枠のスタイル
- 濃いピンクの枠線
- 薄いピンクの背景色
- タイトルは枠線と同じ色の背景に白文字
- 角丸にしない
### タイトルの配置
- 枠の上辺の外側、左端に配置
- 枠線と繋がって見えるようにこのボックスの特徴
- タイトルが枠の外に飛び出す
bottom: 100%で親要素の上端に配置 - data属性でタイトル管理 HTMLの
data-title属性を変えるだけでラベル変更可能 - ピンク系の統一感 枠線・タイトル背景・本文背景を同系色でまとめた優しい印象
コードのポイント
CSS
.box {
position: relative; /* 疑似要素の配置基準 */
}
.box::before {
position: absolute;
bottom: 100%; /* 親要素の上端（外側）に配置 */
left: -2px; /* ボーダー幅分、左にずらして揃える */
content: attr(data-title); /* data-title属性の値を表示 */
}枠の内側にタイトルを入れたCSS囲み枠デザイン
タイトルが枠の内側に収まり、コンパクトな印象を与えます。
HTML
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
padding: 0 1rem 1rem;
border: 2px solid #6be5ec;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
display: inline-block;
margin: 0 0 0.5rem -1rem;
padding: 0.5rem;
background-color: #6be5ec;
color: white;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 水色のアクセントが爽やかなデザイン
- タイトルが枠の内側に収まる
### 枠のスタイル
- 水色の枠線
- グレーの背景色
- タイトルは水色背景に白文字
### タイトルの配置
- 枠の内側、左上に配置
- 枠線の左端に揃えるこのボックスの特徴
- タイトルが枠の内側に収まる
position: absoluteを使わずにドキュメントフロー内で配置 - マイナスマージンで左端揃え
margin-left: -1remでpadding分を相殺 - シンプルな2色構成 水色のアクセントとグレー背景で落ち着いた印象
コードのポイント
CSS
.box {
padding: 0 1rem 1rem; /* 上のpaddingは0（タイトルが入るため） */
}
.box::before {
display: inline-block; /* 通常のフローで配置 */
margin: 0 0 0.5rem -1rem; /* 左にpadding分ずらして端に揃える */
content: attr(data-title);
}枠の内側に入れ中央寄せのタイトルを入れたCSS囲み枠デザイン
角丸のラベルが中央に配置された、モダンなデザインです。
HTML
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 3rem 1rem 1rem;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem;
border-radius: 10px;
background-color: #5fc8bc;
color: white;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- シンプルでモダンなデザイン
- タイトルがラベル風に中央に配置
### 枠のスタイル
- 枠線なし
- グレーの背景色
### タイトルの配置
- 枠の上部、中央に配置
- ミントグリーンの角丸ラベル
- 白文字このボックスの特徴
- タイトルが中央に配置
left: 50%とtransform: translateX(-50%)の組み合わせ - 角丸のタイトル
border-radius: 10pxで柔らかい印象 - 枠線なしのシンプルデザイン 背景色のみでボックスを表現
コードのポイント
CSS
.box::before {
position: absolute;
top: 0.5rem;
left: 50%; /* 左端を中央に配置 */
transform: translateX(-50%); /* 自身の幅の半分を左にずらして中央揃え */
border-radius: 10px; /* 角丸でラベル風に */
}帯タイトルのCSS囲み枠デザイン
黄色い帯状のタイトルが横幅いっぱいに広がり、目を引きます。
HTML
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
padding: 1rem;
background-color: #efefef;
}
.box::before {
display: block;
padding: 0.5rem 0;
margin-bottom: 1rem;
background-color: #f4f22e;
color: #333;
text-align: center;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 目を引く黄色いタイトル帯
- シンプルで視認性の高いデザイン
### 枠のスタイル
- 枠線なし
- グレーの背景色
### タイトルの配置
- 枠の上部に横幅いっぱいの黄色い帯
- 帯の中でテキストは中央揃え
- 濃いグレーの文字このボックスの特徴
- 横幅いっぱいの帯タイトル
display: blockで全幅に広がる - position不要のシンプル設計 通常のドキュメントフローで配置
- 黄色で目を引くアクセント 注意喚起やポイント強調に最適
コードのポイント
CSS
.box::before {
display: block; /* 横幅いっぱいに広がる */
margin-bottom: 1rem; /* 本文との余白 */
text-align: center; /* テキストを中央揃え */
content: attr(data-title);
}二重枠タイトルのCSS囲み枠デザイン
二重枠のような装飾と半透明タイトルで、エレガントな印象を演出します。
HTML
<div class="box" data-title="POINT">
<p>タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。タイトルを入れた囲み枠デザインデザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 3.5rem 1rem 1rem;
background-color: #f1f1f1;
outline: 2px solid #333;
outline-offset: -0.5rem;
}
.box::before {
position: absolute;
top: 1rem;
left: 0;
width: 100%;
padding: 0.5rem 0;
background-color: rgb(227, 118, 137, .7);
color: white;
text-align: center;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 二重枠のようなエレガントなデザイン
- 半透明のタイトル帯がおしゃれ
### 枠のスタイル
- 背景の内側に細い黒い境界線
- グレーの背景色
### タイトルの配置
- 横幅いっぱいの半透明ピンクの帯
- 白文字で中央揃え
- 内側の境界線より上に配置このボックスの特徴
- 内側に境界線
outline-offset: -0.5remで背景の内側に線を配置 - 半透明のタイトル帯
rgbaで透明度を設定し、背景と調和 - エレガントな装飾 二重枠のような高級感のあるデザイン
コードのポイント
CSS
.box {
outline: 2px solid #333; /* 外枠を設定 */
outline-offset: -0.5rem; /* マイナス値で内側に配置 */
}
.box::before {
width: 100%; /* 横幅いっぱいに広がる */
background-color: rgb(227, 118, 137, .7); /* 半透明ピンク */
}黄緑グラデーションタイトルの囲み枠デザイン
黄色から緑への華やかなグラデーションで、ポップな印象を与えます。
HTML
<div class="box" data-title="POINT">
<p>タイトルの背景をグラデーションにした囲み枠デザイン。タイトルの背景をグラデーションにした囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 3rem 1rem 1rem;
background-color: #eee;
}
.box::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
border-radius: 10px;
background-image: linear-gradient(135deg, #FFF720 10%, #3CD500 100%);
font-size: 12px;
color: #333;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 華やかなグラデーションタイトル
- ポップで明るい印象
### 枠のスタイル
- 枠線なし
- 薄いグレーの背景色
### タイトルの配置
- 中央上部に角丸のラベル
- 黄色から緑への斜めグラデーション背景
- 濃いグレーの文字このボックスの特徴
- 華やかなグラデーションタイトル 黄色から緑への斜めグラデーション
- 角丸のラベルデザイン コンパクトで目を引くタイトル表示
- シンプルな本文エリア グレー背景でタイトルを引き立てる
コードのポイント
CSS
.box::before {
/* 135度（右下方向）のグラデーション */
background-image: linear-gradient(
135deg,
#FFF720 10%, /* 黄色（開始） */
#3CD500 100% /* 緑（終了） */
);
border-radius: 10px; /* 角丸でラベル風に */
}シアン系グラデーションタイトルの囲み枠デザイン
シアンから青紫のグラデーションと二重枠で、洗練されたデザインに仕上げています。
HTML
<div class="box" data-title="POINT">
<p>タイトルの背景をグラデーションにした囲み枠デザイン。タイトルの背景をグラデーションにした囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 3rem 2rem 2rem;
outline: 2px solid #333;
outline-offset: -1.5rem;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
border-radius: 10px;
border: 2px solid #333;
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
color: white;
font-size: 12px;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 爽やかなグラデーションと二重枠
- 洗練されたモダンなデザイン
### 枠のスタイル
- 背景の内側に細い黒い境界線
- グレーの背景色
### タイトルの配置
- 中央上部に角丸のラベル
- シアンから青紫へのグラデーション背景
- 黒い枠線付き
- 白文字このボックスの特徴
- 爽やかなグラデーション シアンから青紫への明るいグラデーション
- 二重枠効果
outline-offsetで内側に境界線を配置 - タイトルに枠線
border: 2px solid #333でラベルを強調
コードのポイント
CSS
.box {
outline: 2px solid #333;
outline-offset: -1.5rem; /* 内側に境界線を配置 */
}
.box::before {
border: 2px solid #333; /* タイトルにも枠線を追加 */
background-image: linear-gradient(
109.6deg,
rgba(156,252,248,1) 11.2%, /* シアン */
rgba(110,123,251,1) 91.1% /* 青紫 */
);
}ダークテーマのグラデーション囲み枠デザイン
ダークテーマに映えるピンクグラデーションで、高級感のある印象を演出します。
HTML
<div class="box" data-title="POINT">
<p>タイトルの背景をグラデーションにした囲み枠デザイン。タイトルの背景をグラデーションにした囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 1.5rem 1rem;
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 0 0 2rem #2B292A;
background-color: #2B292A;
}
.box::before {
position: absolute;
top: -1.1rem;
left: 2.2rem;
transform: translateX(-50%);
padding: 0.5rem 1rem;
border-radius: 30px;
border: 2px solid white;
background-image: linear-gradient(135deg, #F6CEEC 10%, #D939CD 100%);
font-size:12px;
color: white;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: white;
line-height: 1.5;
}AIへのプロンプト例
ダークテーマのタイトル付き囲み枠を作成してください。
### 全体の印象
- 高級感のあるダークデザイン
- ピンクのアクセントが映える
### 枠のスタイル
- 黒い背景色
- 上下に細い白いライン
- 白い文字
### タイトルの配置
- 左上に角丸のラベル
- 薄いピンクから濃いピンクへのグラデーション
- 白い枠線付きこのボックスの特徴
- ダークテーマ対応 黒背景に白テキストで高級感を演出
- box-shadowで外枠
box-shadow: 0 0 0 2remで余白を埋める - ピンクグラデーションのアクセント ダーク背景に映えるピンク系タイトル
コードのポイント
CSS
.box {
border-top: 2px solid white;
border-bottom: 2px solid white;
box-shadow: 0 0 0 2rem #2B292A; /* 外側の余白を背景色で埋める */
background-color: #2B292A;
}
.box::before {
top: -1.1rem; /* 上ボーダーをまたいで配置 */
border: 2px solid white; /* 白枠でダークテーマに合わせる */
background-image: linear-gradient(135deg, #F6CEEC 10%, #D939CD 100%);
}二重枠グラデーションタイトルの囲み枠デザイン
8番と同じグラデーションを使いつつ、二重枠で装飾性を高めたバリエーションです。
HTML
<div class="box" data-title="POINT">
<p>タイトルの背景をグラデーションにした囲み枠デザイン。タイトルの背景をグラデーションにした囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 3rem 2rem 2rem;
outline: 2px solid #333;
outline-offset: -1.5rem;
border-box: box-sizing;
background-color: #efefef;
}
.box::before {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 1rem;
border-radius: 10px;
border: 2px solid #333;
background-image: linear-gradient(109.6deg, rgba(156, 252, 248, 1) 11.2%, rgba(110, 123, 251, 1) 91.1%);
color: white;
font-size: 12px;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
タイトル付きの囲み枠を作成してください。
### 全体の印象
- 二重枠とグラデーションの組み合わせ
- 清涼感のあるデザイン
### 枠のスタイル
- 背景の内側に細い黒い境界線
- グレーの背景色
### タイトルの配置
- 中央上部に角丸のラベル
- シアンから青へのグラデーション背景
- 黒い枠線付き
- 白文字このボックスの特徴
- 8番と同じグラデーション シアンから青紫への爽やかな配色
- outline-offsetで二重枠 内側に境界線を配置して装飾性をアップ
- 白テキストで視認性確保 グラデーション背景に白文字で読みやすく
コードのポイント
CSS
.box {
padding: 3rem 2rem 2rem; /* タイトル分の余白を上部に確保 */
outline: 2px solid #333;
outline-offset: -1.5rem; /* 内側に境界線を配置 */
}
.box::before {
border: 2px solid #333; /* タイトルの枠線 */
background-image: linear-gradient(109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1%);
}上部にアイコン付きタイトルを入れたCSS囲み枠デザイン
FontAwesomeアイコンとタイトルを組み合わせた、タブ形式のデザインです。
HTML
<div class="box">
<span><i class="fas fa-info-circle fa-fw"></i>POINT</span>
<p>上部にアイコン付きタイトルを入れた囲み枠。上部にアイコン付きタイトルを入れた囲み枠。上部にアイコン付きタイトルを入れた囲み枠。</p>
</div>CSS
.box {
position: relative;
padding: 1rem;
border-radius: 5px;
border: 5px solid #efefef;
box-shadow: 0 0 0px 10px #52C2F3;
background: #52C2F3;
}
.box p {
margin: 1r 0em;
color: white;
line-height: 1.5;
}
.box span {
position: absolute;
top: -2.5rem;
left: 1rem;
padding: 0.7rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #efefef;
color: #52C2F3;
}AIへのプロンプト例
アイコン付きタイトルの囲み枠を作成してください。
### 全体の印象
- タブ形式のタイトルが特徴的
- 明るい水色でポップな印象
### 枠のスタイル
- 水色の背景
- 内側に白い枠線
- 白い文字
### タイトルの配置
- 枠の上に飛び出すタブ形式
- 白い背景に水色の文字
- 上部のみ角丸
- インフォメーションアイコン付きこのボックスの特徴
- HTMLでタイトルを記述 data属性ではなくspanタグでアイコンとテキストを直接記述
- タブ形式のタイトル 上部のみ角丸で、枠から飛び出すデザイン
- box-shadowで外枠 二重枠効果で立体感を演出
コードのポイント
CSS
.box {
border: 5px solid #efefef; /* 内側の白枠 */
box-shadow: 0 0 0px 10px #52C2F3; /* 外側の青枠をbox-shadowで実現 */
}
.box span {
position: absolute;
top: -2.5rem; /* 枠の外に配置 */
border-top-left-radius: 5px; /* 上部のみ角丸 */
border-top-right-radius: 5px;
}左上斜めカットのCSS囲み枠デザイン
左上が斜めにカットされた、個性的なフォルムが特徴です。
HTML
<div class="box">
<p>上部の線を斜めにしてタイトルを入れた囲み枠。上部の線を斜めにしてタイトルを入れた囲み枠。上部の線を斜めにしてタイトルを入れた囲み枠。</p>
</div>CSS
.box {
position: relative;
padding: 3rem 1rem 1rem 1.5rem;
background:
linear-gradient(177deg, transparent 2rem, #f4f22e 0 100%);
}
.box::before {
position: absolute;
top: 0;
left: 0;
padding: 0.7rem 1rem;
border-style: solid;
border-width: 0 3px 3px 0;
background-color: #333;
color: white;
content: "POINT";
}
.box p {
margin: 1r 0em;
line-height: 1.5;
}AIへのプロンプト例
斜めカットのタイトル付き囲み枠を作成してください。
### 全体の印象
- 上部が斜めにカットされたユニークなデザイン
- 黄色い背景で目を引く
### 枠のスタイル
- 左上が斜めにカットされた形状
- 黄色の背景色
### タイトルの配置
- 左上の角に黒いラベル
- 右と下に枠線
- 白文字このボックスの特徴
- 斜めカットの背景
linear-gradientで斜め177度のラインを作成 - シンプルな黒タイトル 左上に配置された黒背景の白文字ラベル
- 固定テキスト data属性ではなく
content: "POINT"で直接指定
コードのポイント
CSS
.box {
/* 177度（ほぼ垂直に近い斜め）のグラデーションで斜めカットを実現 */
background: linear-gradient(
177deg,
transparent 2rem, /* 左上を透明に */
#f4f22e 0 100% /* 残りを黄色で塗りつぶし */
);
}
.box::before {
top: 0;
left: 0;
border-width: 0 3px 3px 0; /* 右と下のみ枠線 */
content: "POINT"; /* 固定テキスト */
}右上斜めカットのCSS囲み枠デザイン
右上が斜めにカットされ、細い黒ラインがアクセントになっています。
HTML
<div class="box">
<p>市松模様を入れた吹き出しデザイン。市松模様を入れた吹き出しデザイン。市松模様を入れた吹き出しデザイン。</p>
</div>CSS
.box {
position: relative;
padding: 3rem 1rem 1rem 1.5rem;
background:
linear-gradient(-178deg, transparent 0 2rem, #333 2.1rem 2.3rem, #4FACB0 2.4rem 100%);
}
.box::before {
position: absolute;
top: 0;
right: 0;
padding: 0.6rem 1rem;
background-color: #333;
color: white;
content: "POINT";
}
.box p {
margin: 1r 0em;
line-height: 1.5;
}AIへのプロンプト例
斜めカットとライン装飾の囲み枠を作成してください。
### 全体の印象
- 右上が斜めにカットされた個性的なデザイン
- ティール（青緑）の爽やかな背景
### 枠のスタイル
- 右上が斜めにカット
- 斜めカットに沿って細い黒いライン
- ティール色の背景
### タイトルの配置
- 右上の角に黒いラベル
- 白文字このボックスの特徴
- 右上斜めカット
-178degで右上から左下への斜めラインを作成 - ライン装飾 グラデーションで細い黒ラインを表現
- タイトルは右上配置 斜めカット部分と調和するデザイン
コードのポイント
CSS
.box {
/* 複数色ストップでラインを表現 */
background: linear-gradient(
-178deg,
transparent 0 2rem, /* 右上を透明に */
#333 2.1rem 2.3rem, /* 黒いライン（0.2rem幅） */
#4FACB0 2.4rem 100% /* ティール色の本体 */
);
}
.box::before {
top: 0;
right: 0; /* 右上に配置 */
}リボン風タイトルのCSS囲み枠デザイン
左に飛び出すリボン風タイトルと折り返し三角形が印象的です。
HTML
<div class="box">
<p>上部の線を斜めにしてタイトルを入れた囲み枠。上部の線を斜めにしてタイトルを入れた囲み枠。上部の線を斜めにしてタイトルを入れた囲み枠。</p>
</div>CSS
.box {
position: relative;
padding: 4rem 1rem 1rem 1.5rem;
background:
linear-gradient(-178deg, transparent 0 2rem, #333 2.1rem 2.3rem, #EF8F85 2.4rem 100%);
}
.box::before {
position: absolute;
top: 0.5rem;
left: -1rem;
padding: 0.75rem 1rem;
border-top-left-radius: 1rem;
background-color: black;
color: white;
font-size: 1rem;
line-height: 1;
content: "POINT";
}
.box::after {
position: absolute;
top: calc(0.5rem + 0.75rem + 1rem + 0.75rem);
left: -1rem;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 1rem #aaa;
content: '';
}
.box p {
margin: 1r 0em;
line-height: 1.5;
}AIへのプロンプト例
リボン風タイトルの囲み枠を作成してください。
### 全体の印象
- 左に飛び出すリボンが特徴的
- コーラルピンクの温かみのある背景
### 枠のスタイル
- 右上が斜めにカット
- 斜めカットに沿って細い黒いライン
- コーラルピンクの背景
### タイトルの配置
- 左側に飛び出すリボン形式
- 黒い背景に白文字
- リボンの下に折り返しの三角形このボックスの特徴
- 左に飛び出すリボン
left: -1remで枠の外にはみ出すデザイン - 折り返し三角形
::afterでリボンの折り返し部分を表現 - 斜めカットとの組み合わせ グラデーション背景とリボンの調和
コードのポイント
CSS
.box::before {
left: -1rem; /* 枠の外に飛び出す */
padding: 0.75rem 1rem; /* 上下左右のpadding */
font-size: 1rem;
line-height: 1; /* 高さを計算しやすく */
border-top-left-radius: 1rem; /* 左上のみ角丸 */
}
.box::after {
/* ::beforeの直下に配置: top + padding-top + font-size + padding-bottom */
top: calc(0.5rem + 0.75rem + 1rem + 0.75rem);
/* 三角形の折り返しをborderで作成 */
border: none;
border-bottom: solid 10px transparent;
border-right: solid 1rem #aaa;
content: '';
}境界線中央タイトルの囲み枠デザイン
タイトルが境界線を分断する、シンプルで上品なデザインです。
HTML
<div class="box">
<div class="box-title">POINT</div>
<div class="box-body">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>
</div>CSS
.box {
position: relative;
border: 1px solid #999;
background-color: white;
color: #333;
}
.box-title {
position: absolute;
display: inline-block;
top: -0.6rem;
left: 50%;
transform: translateX(-50%);
padding: 0rem 1rem;
background-color: white;
font-weight:600;
}
.box-body {
padding: 1rem;
line-height: 1.5;
}AIへのプロンプト例
境界線にタイトルが重なる囲み枠を作成してください。
### 全体の印象
- 上品でミニマルなデザイン
- タイトルが境界線を分断する
### 枠のスタイル
- 細いグレーの枠線
- 白い背景
### タイトルの配置
- 上の境界線の中央に重なるように配置
- 白い背景でタイトル部分の線を隠す
- 太字のグレー文字このボックスの特徴
- 境界線を隠すタイトル 白背景のタイトルが上部の線を分断
- HTMLでタイトル要素を分離 疑似要素ではなく別要素で構成
- シンプルで上品 細い線とテキストのみのミニマルデザイン
コードのポイント
CSS
.box-title {
position: absolute;
top: -0.6rem; /* 上部境界線にかかる位置 */
left: 50%;
transform: translateX(-50%);
background-color: white; /* 背景と同色で線を隠す */
font-weight: 600;
}吹き出し風タイトルの囲み枠デザイン
吹き出し風のタイトルが本文を指し示す、分かりやすいデザインです。
HTML
<div class="box">
<div class="box-title">POINT</div>
<div class="box-body">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>
</div>CSS
.box-body {
padding: 1rem;
line-height: 1.5;
background-color: #D3E5E7;
color: #333;
}
.box-title {
position: relative;
padding: 0.75rem 0;
background-color: #4d5354;
color: white;
text-align: center;
}
.box-title::before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid 8px transparent;
border-top-color: #4d5354;
content: '';
}AIへのプロンプト例
吹き出し風タイトルの囲み枠を作成してください。
### 全体の印象
- タイトルが本文を指す吹き出しデザイン
- 落ち着いたグレー系の配色
### 枠のスタイル
- 枠線なし
- 薄い水色の背景
### タイトルの配置
- 本文の上に配置
- 濃いグレーの背景に白文字
- 下向きの三角形ポインター付き
- 横幅いっぱいに広がるこのボックスの特徴
- 吹き出し風タイトル 三角形のポインターで本文を指すデザイン
- セパレート構造 タイトルと本文が完全に分離
- 落ち着いた配色 グレー系の上品なカラーリング
コードのポイント
CSS
.box-title::before {
position: absolute;
top: 100%; /* タイトルの直下に配置 */
left: 50%;
transform: translateX(-50%);
/* 三角形をborderで作成 */
border: solid 8px transparent;
border-top-color: #4d5354; /* 上辺のみ色を付ける */
content: '';
}浮遊タイトルの囲み枠デザイン
タイトルが本文から離れて浮いている、Flexboxを活用したデザインです。
HTML
<div class="box">
<div class="box-title">POINT</div>
<div class="box-body">
<p>タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。タイトルを入れた囲み枠デザイン。</p>
</div>
</div>CSS
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box-body {
padding: 1rem;
line-height: 1.5;
background-color: #efefef;
color: #333;
}
.box-title {
position: relative;
display: inline-block;
margin-bottom: 1rem;
padding: 0.5rem 2rem;
background-color: #eb5e43;
color: white;
text-align: center;
}
.box-title::before {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: solid 8px transparent;
border-top-color: #eb5e43;
content: '';
}AIへのプロンプト例
浮遊するタイトルの囲み枠を作成してください。
### 全体の印象
- タイトルが本文から離れて浮いているデザイン
- オレンジ色のアクセントが目を引く
### 枠のスタイル
- 枠線なし
- グレーの背景
- タイトルと本文が中央揃え
### タイトルの配置
- 本文の上に離れて配置
- オレンジ色の背景に白文字
- 下向きの三角形ポインターで本文を指すこのボックスの特徴
- Flexboxで中央配置 タイトルと本文を縦方向に中央揃え
- 鮮やかなオレンジ色 目を引くアクセントカラー
- 浮遊するタイトル 本文と分離して配置される吹き出しデザイン
コードのポイント
CSS
.box {
display: flex;
justify-content: center; /* 水平方向中央 */
align-items: center; /* 垂直方向中央 */
flex-direction: column; /* 縦方向に並べる */
}
.box-title::before {
/* 下向き三角形 */
border: solid 8px transparent;
border-top-color: #eb5e43; /* 上辺のみ色を付ける */
}注意喚起に使えるCSS囲み枠デザイン
工事現場風の黄黒ストライプで、警告や注意を強調したい場面に最適です。
HTML
<div class="box" data-title="warning">
<p>注意喚起に使える囲み枠デザイン。注意喚起に使える囲み枠デザイン。注意喚起に使える囲み枠デザイン。注意喚起に使える囲み枠デザイン。</p>
</div>CSS
.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.box {
position: relative;
padding: 4rem 1rem 1rem;
background-color: #efefef;
background-image: repeating-linear-gradient(45deg, #EBBB2F 0 5px, #333 5px 10px);
background-position: top;
background-size: 100% 2rem;
background-repeat: no-repeat;
}
.box::before {
position: absolute;
top: 1rem;
left: 50%;
padding: 0.5rem;
transform: translateX(-50%);
border-radius: 30px;
background-color: #333;
box-shadow: 0 0 5px black;
color: #EBBB2F;
text-align: center;
text-transform: uppercase;
font-weight: bold;
content: attr(data-title);
}
.box p {
margin: 1r 0em;
color: #333;
line-height: 1.5;
}AIへのプロンプト例
注意喚起用の囲み枠を作成してください。
### 全体の印象
- 工事現場の警告テープのような目立つデザイン
- 「WARNING」感のある注意喚起向け
### 枠のスタイル
- 上部に黄色と黒の斜めストライプ
- グレーの背景色
### タイトルの配置
- ストライプの上に角丸の黒いラベル
- 黄色の文字で大文字表記
- 中央に配置このボックスの特徴
- 工事現場風ストライプ
repeating-linear-gradientで斜め45度のストライプ - 視認性の高い警告デザイン 黄色と黒のコントラストで注目を集める
- 大文字変換
text-transform: uppercaseで警告感を演出
コードのポイント
CSS
.box {
/* 斜め45度の黄黒ストライプを上部のみに表示 */
background-image: repeating-linear-gradient(
45deg,
#EBBB2F 0 5px, /* 黄色 5px */
#333 5px 10px /* 黒 5px */
);
background-size: 100% 2rem; /* 高さ2remに制限 */
background-repeat: no-repeat; /* 繰り返しなし */
}まとめ
タイトル付きの囲み枠って、こんなにバリエーションがあるんですね。疑似要素を使うとHTMLがすっきりするのがいいです。
content: attr(data-title)の書き方は便利ですね。HTMLのdata属性を変えるだけでタイトルを変更できるから、使い回しがしやすそう。
そうだね。囲み枠はブログの補足説明やポイント強調など、様々な場面で活躍するパーツだよ。用途に合わせて、シンプルなものから装飾的なものまで使い分けてみてね。
タイトル付き囲み枠のポイント
- 疑似要素の活用
::beforeでタイトル部分を作成し、HTMLをシンプルに保つ - data属性との連携
content: attr(data-title)でHTMLからテキストを取得 - position: absoluteの理解 親要素に
relative、タイトルにabsoluteで位置を制御 - グラデーションで華やかに
linear-gradientでタイトル背景を装飾 - 用途に応じた使い分け 注意喚起はストライプ、ポイント説明はシンプルなデザインを選ぶ
次回は、カードデザインについて学習します。