CSSで右上隅に配置されるボタンの作成方法

方法1: 絶対位置指定を使用する方法 この方法では、ボタンに絶対位置指定を適用し、右上隅に配置します。

HTML:

<div class="container">
  <button class="btn">ボタン</button>
</div>

CSS:

.container {
  position: relative;
}
.btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

方法2: Flexboxを使用する方法 Flexboxを使用すると、簡単に要素を配置できます。

HTML:

<div class="container">
  <button class="btn">ボタン</button>
</div>

CSS:

.container {
  display: flex;
  justify-content: flex-end;
}
.btn {
  margin-top: 10px;
  margin-right: 10px;
}

方法3: Gridを使用する方法 Gridを使用すると、要素をグリッドセルに配置できます。

HTML:

<div class="container">
  <button class="btn">ボタン</button>
</div>

CSS:

.container {
  display: grid;
  place-items: end;
}
.btn {
  margin-top: 10px;
  margin-right: 10px;
}

以上の方法を使用すると、ウェブページの右上隅にボタンを配置できます。デザインに応じて、適切な方法を選択してください。