演習問題を修正

Author: nakaterm

docs/2-browser-apps/05-css-layout/_samples/responsive-header/style.css

@@ -3,33 +3,6 @@ body {
   background-color: #fff;
 }
 
-header {
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
-}
-
-#menu {
-  display: flex;
-  gap: 32px;
-}
-
-@media (max-width: 768px) {
-  #hamburger {
-    display: flex;
-  }
-
-  nav {
-    display: none;
-  }
-}
-
 header ul {
   margin: 0;
   padding: 0;
@@ -56,3 +29,30 @@ header ul {
   padding: 0;
   cursor: pointer;
 }
+
+header {
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+}
+
+#menu {
+  display: flex;
+  gap: 32px;
+}
+
+@media (max-width: 768px) {
+  #hamburger {
+    display: flex;
+  }
+
+  nav {
+    display: none;
+  }
+}

docs/2-browser-apps/05-css-layout/index.mdx

@@ -519,30 +519,6 @@ body {
   background-color: #fff;
 }
 
-header {
-  background-color: #fff;
-  /* ここで適切な境界線を設定する */
-}
-
-.container {
-  display: flex;
-  /* ここで適切なレイアウトを設定する */
-}
-
-#menu {
-  display: flex;
-  /* ここで適切なレイアウトを設定する */
-}
-
-@media (max-width: 768px) {
-  #hamburger {
-    display: flex;
-  }
-  /* ここで適切な設定を行う */
-}
-
-/* 以下は変更する必要はありません。 */
-
 header ul {
   margin: 0;
   padding: 0;
@@ -569,47 +545,44 @@ header ul {
   padding: 0;
   cursor: pointer; /* マウスカーソルをポインタにする */
 }
-```
-
-:::tip
 
-`display`プロパティに`none`を指定すると、要素が表示されなくなります。
-
-:::
-
-<Answer>
-
-```css title="style.css"
-body {
-  margin: 0;
-  background-color: #fff;
-}
+/* ここから下を変更してください。 */
 
 header {
   background-color: #fff;
-  border-bottom: 1px solid #eee;
+  /* ここで適切な境界線を設定する */
 }
 
 .container {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 24px;
+  /* ここで適切なレイアウトを設定する */
 }
 
 #menu {
   display: flex;
-  gap: 32px;
+  /* ここで適切なレイアウトを設定する */
 }
 
 @media (max-width: 768px) {
   #hamburger {
     display: flex;
   }
+  /* ここで適切な設定を行う */
+}
+```
 
-  nav {
-    display: none;
-  }
+:::tip
+
+`display`プロパティに`none`を指定すると、要素が表示されなくなります。
+
+:::
+
+<Answer>
+
+```css title="style.css"
+body {
+  margin: 0;
+  background-color: #fff;
 }
 
 header ul {
@@ -638,6 +611,33 @@ header ul {
   padding: 0;
   cursor: pointer;
 }
+
+header {
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+}
+
+#menu {
+  display: flex;
+  gap: 32px;
+}
+
+@media (max-width: 768px) {
+  #hamburger {
+    display: flex;
+  }
+
+  nav {
+    display: none;
+  }
+}
 ```
 
 <ViewSource url={import.meta.url} path="_samples/responsive-header" />