文章を修正

nakaterm · nakaterm · commit d87255a9b533 · 2025-12-14T22:44:15.000+09:00
diff --git a/docs/2-browser-apps/05-css-layout/index.mdx b/docs/2-browser-apps/05-css-layout/index.mdx
@@ -286,7 +286,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 フレックスボックスを使用すると、要素を柔軟にレイアウトすることができます。フレックスボックスを使用してレイアウトするには、`display`プロパティに`flex`を指定します。フレックスボックスでレイアウトされた要素は、デフォルトで横並びになります。
 
-次の例では、3枚のカードの親要素である`div`要素に`display: flex;`を指定しています。
+次の例では、カードの親要素の`display`プロパティに`flex`を指定し、カードが横並びになるようにしています。
 
 ```css
 // highlight-start
@@ -300,10 +300,9 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 <ViewSource url={import.meta.url} path="_samples/flexbox" />
 
-これまでは、カードどうしの間隔を空けるために各カードに `margin: 8px;` を指定していました。しかし、フレックスボックスを使う場合は、この目的により適した `gap` プロパティを利用できます。
-`gap` プロパティは、子要素であるカード側ではなく、親要素のコンテナ側で設定します。このプロパティを使うと、要素と要素の間にのみ間隔が作られ、端の要素の外側には余白がつきません。
+これまでは、カードどうしの間隔を空けるために各カードにマージンを設定していました。しかし、フレックスボックスを使う場合は、この目的により適した`gap`プロパティを利用できます。`gap`プロパティは、子要素であるカード側ではなく、親要素のコンテナ側で設定します。このプロパティを使うと、要素と要素の間にのみ間隔が作られ、端の要素の外側には余白がつきません。
 
-次の例では、カードの`margin`を削除し、親要素に`gap`を指定しています。
+次の例では、カードの`margin`プロパティを削除し、親要素に`gap`プロパティを指定しています。
 
 ```css
 .card {
@@ -327,21 +326,21 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 <ViewSource url={import.meta.url} path="_samples/flexbox-gap" />
 
-### `flex-direction` プロパティ
+### `flex-direction`プロパティ
 
-フレックスボックスによるレイアウトの方向を変更するには、`flex-direction`プロパティを使用します。`row`とすれば水平に、`column`とすれば垂直にレイアウトされます。
+フレックスボックスによるレイアウトの方向を変更するには、`flex-direction`プロパティを使用します。`row`を指定すれば水平に、`column`を指定すれば垂直にレイアウトされます。
 
 先ほど、`display: flex;`を指定しただけでカードが横並びになったのは、このプロパティのデフォルト値が`row`であるためです。
 
-実際に `flex-direction: column;` をコンテナに指定すると、カードが縦に並ぶことが確認できます。
+実際に親要素の`flex-direction`プロパティを`column`に指定すると、カードが縦に並ぶことが確認できます。
 
 ![親要素にflex-direction: column;を設定したカード](./flex-column-cards.png)
 
 ### `justify-content`プロパティ
 
 フレックスボックスでは、`justify-content`プロパティを使うことで、`flex-direction`プロパティで指定した方向のレイアウトを制御することができます。
 
-次の例では、`justify-content: center;`を指定することでカードを水平方向の中央に配置しています。
+次の例では、`justify-content`プロパティを`center`に指定することで、カードを水平方向の中央に配置しています。
 
 ```css
 #container {
@@ -358,7 +357,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 他のレイアウト方法も試してみましょう。
 
-準備として、カードのプラン名の横に「詳細」のリンクを設置します。`<div class="plan">Free</div>` となっていた部分を次のように変更し、リンクにはボタンと同じ色を適用します。
+準備として、カードのプラン名の横に「詳細」のリンクを設置します。`<div class="plan">Free</div>`のようになっていた部分を次のように変更し、リンクにはボタンと同じ色を適用します。
 
 ```html
 <div class="card-header">
@@ -375,7 +374,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 // highlight-end
 ```
 
-次の例では、`justify-content: space-between;` を指定することでプラン名とリンクを水平方向の両端に配置しています。
+次の例では、`justify-content`プロパティを`space-between`に指定することで、プラン名とリンクを水平方向の両端に配置しています。
 
 ```css
 // highlight-start
@@ -394,7 +393,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 `align-items`プロパティを使うことで、`flex-direction`プロパティで指定した方向と交差する方向のレイアウトを制御できます。
 
-次の例では、`align-items: center;`を指定することで、プラン名とリンクを垂直方向の中央に配置しています。
+次の例では、`align-items`プロパティを`center`に指定することで、プラン名とリンクを垂直方向の中央に配置しています。
 
 ```css
 .card-header {
@@ -417,7 +416,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 レスポンシブデザインを行っていく準備として、HTMLの`head`要素内に次の`meta`要素を記述し、スマートフォンなどの端末でも本来の画面サイズで表示が行われるようにしましょう。
 
-```html title="index.html の head 要素内"
+```html title="index.htmlのhead要素内"
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 ```
 
@@ -449,9 +448,9 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 縦並びになった場合も、カードが左右中央に表示されるようにしましょう。
 
-この際は、`flex-direction` プロパティの値が `column` となり垂直方向にレイアウトされているため、水平方向のレイアウトを制御するためには `justify-content` プロパティではなく `align-items` プロパティを使用する必要があります。
+この際は、`flex-direction`プロパティの値が`column`となり垂直方向にレイアウトされているため、水平方向のレイアウトを制御するためには`justify-content`プロパティではなく`align-items`プロパティを使用する必要があります。
 
-次の例では、`align-items: center;`を指定することで、カードを水平方向の中央に配置しています。
+次の例では、`align-items`プロパティを`center`に指定することで、カードを水平方向の中央に配置しています。
 
 ```css
 @media (max-width: 1024px) {
@@ -469,15 +468,15 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 ## 演習問題
 
-CSS を使って、次のようなウェブサイトのヘッダーを作成しましょう。
+CSSを使って、次のようなウェブサイトのヘッダーを作成しましょう。
 
 ![ヘッダーの完成形のデスクトップでのイメージ](./responsive-header-desktop.png)
 ![ヘッダーの完成形のスマートフォンでのイメージ](./responsive-header-mobile.png)
 
 - 画面幅が広い場合は、ナビゲーションメニューが表示されます。
 - 画面幅が狭い場合は、ナビゲーションメニューの代わりにハンバーガーアイコンが表示されるようにします。
 
-HTML は次のものを使用してください。
+HTMLは次のものを使用してください。
 
 ```html title="index.html"
 <!doctype html>
@@ -512,7 +511,7 @@ HTML は次のものを使用してください。
 </html>
 ```
 
-CSS は次のものをベースに、必要な箇所を記述してください。
+CSSは次のものをベースに、必要な箇所を記述してください。
 
 ```css title="style.css"
 body {
@@ -574,7 +573,7 @@ header ul {
 
 :::tip
 
-`display: none;`を指定すると、要素が表示されなくなります。
+`display`プロパティに`none`を指定すると、要素が表示されなくなります。
 
 :::
 
