human
CSSを使用して、さまざまなデバイスと画面サイズのHTMLページのレイアウトを変更するにはどうすればよいですか？
gpt
CSSメディアクエリを使用すると、さまざまなデバイスや画面サイズに合わせてHTMLページのレイアウトを変更できます。メディアクエリを使用すると、デバイスの画面サイズや解像度に応じて異なるCSSスタイルを適用できます。

以下は、最大幅768pxのスクリーンをターゲットにしたメディアクエリの例です：

scss
Copy code
@media (max-width: 768px) {
  /* CSS styles for screens with a maximum width of 768px */
}

メディアクエリーブロックの中に、画面サイズが768px以下のデバイスにのみ適用されるCSSルールを記述することができます。異なる幅、高さ、マージン、パディング、表示プロパティの設定など、レイアウトを変更するために任意のCSSプロパティを使用できます。

また、複数のメディアクエリを使用して、異なる画面サイズや解像度をターゲットにすることもできます。例えば、最小幅768px、最大幅1024pxの画面を1つのメディアクエリでターゲットにし、最大幅767pxの画面を別のメディアクエリでターゲットにすることができます。

以下は、2つのメディアクエリを使用して、異なる画面サイズ用にナビゲーションメニューのレイアウトを変更する方法の例です：

```css
Copy code
/* CSS styles for screens with a maximum width of 767px */
@media (max-width: 767px) {
  .menu {
    display: none; /* hide the menu by default */
  }
  .toggle-menu {
    display: block; /* show a button to toggle the menu */
  }
}

/* CSS styles for screens with a minimum width of 768px */
@media (min-width: 768px) {
  .menu {
    display: block; /* show the menu by default */
  }
  .toggle-menu {
    display: none; /* hide the button to toggle the menu */
  }
}
```

この例では、最大幅767pxの画面では.menu要素がdisplay: noneに設定され、代わりに.toggle-menuボタンが表示されます。最小幅768pxの画面では、.menu要素はdisplay: blockに設定され、.toggle-menuボタンは非表示になります。これにより、ナビゲーションメニューはデスクトップとモバイルデバイスの両方で簡単にアクセスできるようになります。
human
CSSコンテンツはあまりフォーマットされていません。それがどこから始まるか、終わっているのかわかりません。いくつかのソースコードマークダウンを使用して、より適切にフォーマットできますか？