最小限のHTMLとモダンCSSで実装！コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック

サイト構築 -CSS

Post on:2026年4月23日

sponsors

テキストや画像をボーダーで囲って、ボーダーの上部にタイトルを配置したいと思ったことはありませんか？

以前はこれをCSSで実装しようとしてもかなりトリッキーな実装でした。またfieldsetとlegendでも実装できますが、そもそもフォームではない上に、CSSによる装飾も貧弱です。

fieldsetのコンポーネントを最小限のHTMLとモダンCSSで実現したテクニックを紹介します。レスポンシブに完全対応で、方向directionにも対応しています。

まずは、デモページでその動作をご確認ください。
上から、通常、中央配置、rtlの右書きの3つです。

See the Pen
CSSを使用して<fieldset>（およびlegend）を実装 by coliss (@coliss)
on CodePen.

HTMLは非常にシンプルです。
見出しのh3とテキストのpをdivで括ります。

<div class="fieldset">
  <h3>ポラーノの広場</h3>
  <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
</div>

<h3>ポラーノの広場</h3>

<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>

</div>

CSSは、すこし長いです。
角丸やボーダーの幅やカラーはCSSの変数で設定しているので、カスタマイズは簡単だと思います。

ボーダーの上部にタイトル用のスペースを確保しているのは、clip-pathを使用しています。文字の幅に合わせてスペースが自動的に増減します。

.fieldset {
  --r: 20px; /* ボックスの角丸 */
  --b: 6px;  /* ボーダーの幅 */
  --c: #adadad;  /* ボーダーのカラー */
  --p: 1em;  /* ボックスのパディング */
  --g: 12px;  /* コンテンツと枠線のすき間 */
  --o: 10px;  /* legendを隅からずらす */
  
  padding: var(--p);
  position: relative;
  z-index: 0;
  display: flow-root; /* マージン崩壊を避ける */
}
.fieldset h3 {
  margin: 
    calc(var(--b)/2 - .5lh - var(--p)) 
    calc(var(--r) - var(--p)) 
    calc(var(--p) - .5lh - var(--b)/2);
  display: flex;
  gap: var(--g);
}
.fieldset h3:before,
.fieldset h3:after {
  content: "";
  border-top: var(--b) solid var(--c);
  width: var(--o);
  margin-top: calc(.5lh - var(--b)/2)
}
.fieldset h3:after {
  flex: 1;
}
.fieldset:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: var(--r);
  border: var(--b) solid var(--c);
  clip-path: polygon(0 0,var(--r) 0,var(--r) 50%,calc(100% - var(--r)) 50%, calc(100% - var(--r)) 0,100% 0,100% 100%,0 100%);
}

.fieldset {

--r: 20px; /* ボックスの角丸 */

--b: 6px; /* ボーダーの幅 */

--c: #adadad; /* ボーダーのカラー */

--p: 1em; /* ボックスのパディング */

--g: 12px; /* コンテンツと枠線のすき間 */

--o: 10px; /* legendを隅からずらす */

padding: var(--p);

position: relative;

z-index: 0;

display: flow-root; /* マージン崩壊を避ける */

}

.fieldset h3 {

margin:

calc(var(--b)/2 - .5lh - var(--p))

calc(var(--r) - var(--p))

calc(var(--p) - .5lh - var(--b)/2);

display: flex;

gap: var(--g);

}

.fieldset h3:before,

.fieldset h3:after {

content: "";

border-top: var(--b) solid var(--c);

width: var(--o);

margin-top: calc(.5lh - var(--b)/2)

}

.fieldset h3:after {

flex: 1;

}

.fieldset:before {

content:"";

position: absolute;

z-index: -1;

inset: 0;

border-radius: var(--r);

border: var(--b) solid var(--c);

clip-path: polygon(0 0,var(--r) 0,var(--r) 50%,calc(100% - var(--r)) 50%, calc(100% - var(--r)) 0,100% 0,100% 100%,0 100%);

}

元ネタは、下記ポストより。

💡 CSS Tip!

Recreating the fieldset/legend layout using minimal HTML.https://t.co/E66BWgLcXV

A responsive and direction-aware implementation easy to control using CSS variables. pic.twitter.com/QTfNlVuSzH

— CSS by T. Afif (@ChallengesCss) January 21, 2026