HTMLとCSSを使用してボディ要素からスクロールバーを削除する方法

まず、CSSを使用してボディ要素にスタイルを適用します。以下のコードをCSSファイルに追加します。

body {
  overflow: hidden;
}

上記のコードでは、body要素のoverflowプロパティを"hidden"に設定しています。これにより、ボディ要素内のコンテンツが画面に収まりきらない場合でも、スクロールバーが表示されなくなります。

ただし、この方法はスクロールバーを完全に非表示にするため、ユーザーはスクロール操作ができなくなります。もし、スクロール操作が必要な場合は、代替の方法を使用する必要があります。

次に、スクロールバーを非表示にしながらスクロール操作を可能にする方法を紹介します。以下のスタイルをボディ要素に追加します。

body::-webkit-scrollbar {
  width: 0.5em;
}
body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
body::-webkit-scrollbar-thumb {
  background-color: #888;
}

上記のコードでは、::-webkit-scrollbarセレクタを使用してスクロールバーのスタイルを指定しています。widthプロパティでスクロールバーの幅を設定し、::-webkit-scrollbar-trackでスクロールバーのトラック部分の背景色を指定します。また、::-webkit-scrollbar-thumbでスクロールバーのつまみ部分の背景色を指定します。

これにより、スクロールバーを非表示にしながら、ユーザーはスクロール操作ができるようになります。ただし、この方法はWebKitエンジンを使用しているブラウザ（Chrome、Safariなど）でのみ動作します。

以上が、HTMLとCSSを使用してボディ要素からスクロールバーを削除する方法です。デザイン上の要件やプロジェクトのニーズに応じて、適切な方法を選択してください。