CSSを使用したボーダー内のラベルの表示方法

1. ::before または ::after を使用したラベルの追加:

   .container {
    position: relative;
   }
   
   .container::before {
    content: "ラベル";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 0 5px;
   }

   上記の例では、要素内の上部にラベルを追加しています。position: relative; を使用して要素を基準にし、::before 擬似要素を使用してラベルを作成します。top, left, transform を使用してラベルの位置を調整し、background-color や padding を使用してスタイルを適用します。

2. ラベル要素の追加:

   <div class="container">
    <span class="label">ラベル</span>
    <!-- 他のコンテンツ -->
   </div>
   
   .label {
    background-color: #ffffff;
    padding: 0 5px;
   }

   上記の例では、ボーダー内に <span> 要素を追加してラベルを表示しています。CSS を使用して <span> 要素にスタイルを適用します。

3. ボーダー内のテキストを使用したラベル:

   <div class="container">
    <p class="content">コンテンツ</p>
   </div>
   
   .container {
    position: relative;
   }
   
   .content::before {
    content: "ラベル";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
    padding: 0 5px;
   }

   上記の例では、ボーダー内のテキスト要素の前にラベルを表示しています。position: relative; を使用して .container 要素を基準にし、::before 擬似要素を使用してラベルを作成します。

これらはいくつかの一般的な方法ですが、さまざまな方法でボーダー内にラベルを表示することができます。目的やデザインに合わせて上記のコード例を調整し、必要に応じて追加のスタイルを適用してください。

以上が、CSSを使用してボーダー内にラベルを表示する方法の例です。