HTMLでサイドバイサイドに2つのfieldsetを配置する方法

2024-02-08 16:30 HTML フォーム fieldset

方法1: floatプロパティを使用する方法

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 100%;
    }

    .fieldset-wrapper {
      width: 50%;
      float: left;
    }

    fieldset {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fieldset-wrapper">
      <fieldset>
        <legend>フィールドセット1</legend>
        <!-- ここにフィールドセット1の内容を追加 -->
      </fieldset>
    </div>
    <div class="fieldset-wrapper">
      <fieldset>
        <legend>フィールドセット2</legend>
        <!-- ここにフィールドセット2の内容を追加 -->
      </fieldset>
    </div>
  </div>
</body>
</html>

方法2: flexboxを使用する方法

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }

    fieldset {
      border: 1px solid #ccc;
      padding: 10px;
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <fieldset>
      <legend>フィールドセット1</legend>
      <!-- ここにフィールドセット1の内容を追加 -->
    </fieldset>
    <fieldset>
      <legend>フィールドセット2</legend>
      <!-- ここにフィールドセット2の内容を追加 -->
    </fieldset>
  </div>
</body>
</html>

方法3: CSS Gridを使用する方法

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }

    fieldset {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <fieldset>
      <legend>フィールドセット1</legend>
      <!-- ここにフィールドセット1の内容を追加 -->
    </fieldset>
    <fieldset>
      <legend>フィールドセット2</legend>
      <!-- ここにフィールドセット2の内容を追加 -->
    </fieldset>
  </div>
</body>
</html>

これらの方法を使用することで、2つのfieldsetをサイドバイサイドに配置することができます。選択した方法に応じて、コード例を使用して詳細な内容を追加してください。