こんなやり方があったとは！境界線付きのボックスのスタイルを任意の要素に実装できるCSS -fieldset-legend.css

サイト構築 -CSS

Post on:2025年1月30日

fieldset-legend.cssとは

fieldset-legend.cssは、フォームのfieldsetとlegendのような境界線付きのボックスを任意の要素に実装できるCSSです。

下記は、fieldsetとlegendの実装例です。

VanillaHTMLより

タイトルの長さに合わせてボーダーは自動的にクリッピングされます。

さっそく、fieldset-legend.cssを使用してみました。

fieldsetもlegendも無し

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

HTMLは、こんな感じ。

<article class="fieldset-legend my-classname">
<h1>fieldsetもlegendも無し</h1>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>
</article>

<h1>fieldsetもlegendも無し</h1>

<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>

</article>

.fieldset-legendはベースのスタイルで、.my-classnameはボーダーのサイズやカラーなどカスタマイズ用です。

もちろん技術的にはfieldsetを使用すれば実装できますが、fieldsetの役割はフォーム入力をセマンティックにグループ化することであるため、フォーム要素以外で使用することは推奨されません。また、フォームとは異なるコンテキストで使用すると、アクセシビリティにも悪い影響を与えます。

fieldset-legend.cssは、このようなデザインを任意の要素で簡単に使用できるように、作成されました。このデザインを実装するには、CSSのtimeline-scopeとコンテナクエリが使用されており、2025年1月現在対応ブラウザはChrome, Edgeのみとなっています。それ以外のブラウザでは矩形の枠が表示されます。

ライセンスはBSD-2-Clause licenseで、個人でも商用プロジェクトでも無料で利用できます。

fieldset-legend.cssの使い方

使い方は、簡単です。

fieldset-legend.cssを外部ファイルとして記述します。
ラッパーに.fieldset-legendを付与します。
--fl-leftプロパティを任意の<length-percentage>値に設定します（必要に応じて負の値でも大丈夫）。

fieldset-legend.cssはGitHubからダウンロードしてもよし、CDNも用意されているので下記のコードを記述するだけでも利用できます。

<link rel="stylesheet" type="text/css" href="https://unpkg.com/fieldset-legend@1/fieldset-legend.css">

1	<link rel="stylesheet" type="text/css" href="https://unpkg.com/fieldset-legend@1/fieldset-legend.css">

また、CSSファイルにインポートしてもOKです。

@import url(https://unpkg.com/fieldset-legend@1/fieldset-legend.css);

1	@import url(https://unpkg.com/fieldset-legend@1/fieldset-legend.css);

上記のデモのCSSは、下記の通りです。
ボーダーやアウトライン、角丸、パディングなど自由に設定できます。

.my-classname {
  padding: 25px;
  border: 5px solid #adadad;
  outline: 2px solid hotpink;
  outline-offset: -5px;
  border-radius: 1rem;
  background: var(--pjbg), lime;
  color: black;

  --fl-left: 25px;

  h1 {
    padding: 0.33em;
  }
}