スマートフォンなどデバイスに対応するメディアクエリ

        ”メディアクエリ”（Media Query）は、CSSの機能の一つで、異なるデバイスや画面サイズに対して異なるスタイルを適用するために使用されます
        　　　
        
          メディアクエリ
        
        @media screen and (max-width: 900px) {　　/*画面幅が900px以下の場合に適用されるスタイル*/　
            body, nav, aside {
                width: 100%;                     /*幅を100%に設定*/　
            }
            div {
                flex-direction: column;          /*フレックスアイテムを縦方向に配置*/
            }
            main {
                order: -1;                        /*フレックスアイテムの順序を変更。通常の順序より前に配置*/
            }
        }
        
         screen:適用対象がスクリーンデバイス（ディスプレイ）であることを指定します。and:複数の条件を組み合わせるための論理演算子です。
        

1. 幅の設定: body, nav, aside 要素の幅を100%に設定しています。これにより、画面幅いっぱいに要素が広がるようになります。
2. フレックスレイアウトの変更: div 要素の子要素がフレックスコンテナである場合、その子要素を縦方向に配置するように指定しています (flex-direction: column;)。これにより、横並びだった要素が縦に並ぶようになります。
3. 順序の変更: main 要素の順序を通常のレイアウトよりも前に移動させています (order: -1;)。これにより、通常では後ろに配置されるコンテンツを、前に持ってくることができます

ハンバーガーメニュー・アイコン

@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    .menu {
        display: block;
        position: static;
    }

    .menu ul {
        display: flex;
        justify-content: space-around;
    }
}