文言を修正

Author: nakaterm

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

@@ -83,7 +83,7 @@ body {
 
 しかし、これではカードの幅が画面いっぱいに広がってしまっています。
 
-`width`プロパティで要素の幅を設定することができます。カードに適切な幅を設定すると、次のようになります。
+`width`プロパティで要素の幅を設定することができます。カードに適切な幅を設定するには、次のようにします。
 
 ```css
 .card {
@@ -92,15 +92,15 @@ body {
 }
 ```
 
-![widthを指定したカード](./card-fixed-width.png)
+![幅を設定したカード](./card-fixed-width.png)
 
 なお、`width`プロパティで幅を設定したのと同様に、高さを設定したい場合は`height`プロパティを使うことができます。
 
 <ViewSource url={import.meta.url} path="_samples/width" />
 
 ### パーセント値で設定する
 
-`width`プロパティや`height`プロパティでは、親要素などに占めるパーセント値も使用できます。ボタンの幅が、その親要素であるカードいっぱいに広がるようにすると次のようになります。
+`width`プロパティや`height`プロパティの値には、親要素などに占める割合を表すパーセント値を指定することもできます。ボタンの幅がその親要素であるカードいっぱいに広がるようにするには、次のようにします。
 
 ```css
 .button {
@@ -111,12 +111,12 @@ body {
 }
 ```
 
-![widthを100%に設定したボタン](./button-full-width.png)
+![幅を100%に設定したボタン](./button-full-width.png)
 
 <ViewSource url={import.meta.url} path="_samples/width-percent" />
 
 :::tip[16進数カラーコード]
-`#f0f0f0`や`#0d6efd`のように、6桁の英数字で色を指定する方法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。
+`#f0f0f0`や`#0d6efd`のように、6桁の英数字で色を指定する記法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。
 
 また、省略形として3桁で指定することもできます。例えば、`#1da`は`#11ddaa`と同じ意味になります。
 :::
@@ -125,9 +125,9 @@ body {
 
 HTML要素は、それらが表示される際のデフォルトの振る舞いにおいて分類することができます。
 
-`div`や`h1`、`p`などの要素は一般にブロック要素と呼ばれます。これらは新しい行から始まり、`width`や`height`プロパティが適用されます。`width`を設定しない場合は親要素いっぱいに広がります。
+`div`や`h1`、`p`などの要素は一般にブロック要素と呼ばれます。これらは新しい行から始まり、`width`プロパティや`height`プロパティが設定できます。`width`プロパティを設定しない場合は親要素いっぱいに広がります。
 
-`span`や`a`、`strong`などの要素は一般にインライン要素と呼ばれます。これらは新しい行から始まらず、`width`や`height`プロパティも適用されずに内容に応じた幅・高さになります。
+`span`や`a`、`strong`などの要素は一般にインライン要素と呼ばれます。これらは新しい行から始まらず、`width`プロパティや`height`プロパティも設定できず、内容に応じた幅・高さになります。
 :::
 
 ## ボーダー
@@ -156,7 +156,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-![borderを適用したカード](./card-border.png)
+![境界線を設定したカード](./card-border.png)
 
 <ViewSource url={import.meta.url} path="_samples/border" />
 
@@ -214,7 +214,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-![paddingを適用したカード](./card-padding.png)
+![パディングを設定したカード](./card-padding.png)
 
 <ViewSource url={import.meta.url} path="_samples/padding" />
 
@@ -233,13 +233,13 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-![marginを適用したカード](./card-margin.png)
+![マージンを設定したカード](./card-margin.png)
 
 <ViewSource url={import.meta.url} path="_samples/margin" />
 
-### 一方向のみに設定する
+### 特定の辺のみに設定する
 
-上下左右の全てではなく、一方向のみにマージンを設定したい場合はどうすればいいでしょうか。
+上下左右の全てではなく、特定の辺のみにマージンを設定したい場合はどうすればいいでしょうか。
 
 例えば、上側だけにマージンを設定したい場合は、`margin-top`プロパティを使用します。次の例では、ボタンの上側にマージンをつけています。
 
@@ -256,19 +256,19 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-![margin-topを適用したボタン](./button-margin-top.png)
+![上側にマージンを設定したボタン](./button-margin-top.png)
 
 同様に、`margin-bottom`, `margin-left`, `margin-right`プロパティを使用すると、それぞれ下側・左側・右側のみにマージンを設定することができます。
 
-`margin`のみならず、`padding`や`border`などについても同様のルールが適用されます。
+`margin`のみならず、`padding`や`border`などについても同様です。
 
 <ViewSource url={import.meta.url} path="_samples/margin-top" />
 
 ## フレックスボックス
 
 現在は3枚のカードが縦に並んでいますが、これを横に並ぶようにすることを考えます。
 
-フレックスボックスを使用すると、要素を柔軟に配置することができます。フレックスボックスを使用してレイアウトするには、`display`プロパティに`flex`を指定します。フレックスボックスでレイアウトされた要素は、デフォルトで横並びになります。
+フレックスボックスを使用すると、要素を柔軟にレイアウトすることができます。フレックスボックスを使用してレイアウトするには、`display`プロパティに`flex`を指定します。フレックスボックスでレイアウトされた要素は、デフォルトで横並びになります。
 
 次の例では、3枚のカードの親要素である`div`要素に`display: flex;`を指定しています。
 
@@ -278,7 +278,7 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-![flexboxで横並びになったカード](./cards-flexbox.png)
+![フレックスボックスで横並びになったカード](./cards-flexbox.png)
 
 <ViewSource url={import.meta.url} path="_samples/flexbox" />
 
@@ -288,9 +288,9 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 このように、さまざまな画面サイズの端末に対応するデザイン手法はレスポンシブデザインと呼ばれます。
 
-レスポンシブデザインを行っていく準備として、HTMLの`head`タグ内に次の`meta`タグを記述し、スマートフォンなどの端末でも本来の画面サイズで表示が行われるようにしましょう。
+レスポンシブデザインを行っていく準備として、HTMLの`head`要素内に次の`meta`要素を記述し、スマートフォンなどの端末でも本来の画面サイズで表示が行われるようにしましょう。
 
-```html title="index.html の head タグ内"
+```html title="index.html の head 要素内"
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 ```
 
@@ -302,11 +302,11 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 }
 ```
 
-`条件`の部分には、例えば「画面幅が800px以下の場合」を指定したいならば`max-width: 800px`のように指定します。
+`条件`の部分には、例えば「画面幅が800px以下の場合」としたいならば`max-width: 800px`のように指定します。
 
-フレックスボックスによる配置の方向を変更するには、`flex-direction`プロパティを使用します。`row`とすれば水平に、`column`とすれば垂直に配置されていきます。先ほど、`display: flex;`を指定しただけでカードが横並びになったのは、このプロパティのデフォルト値が`row`であるためです。
+フレックスボックスによるレイアウトの方向を変更するには、`flex-direction`プロパティを使用します。`row`とすれば水平に、`column`とすれば垂直にレイアウトされます。先ほど、`display: flex;`を指定しただけでカードが横並びになったのは、このプロパティのデフォルト値が`row`であるためです。
 
-次の例では、メディアクエリ内で`flex-direction`プロパティを操作して、画面幅が一定より小さい場合に縦並びになるようにしています。
+次の例では、メディアクエリを使って、画面幅が一定より小さい場合に`flex-direction`プロパティが`column`となるようにしています。
 
 ```css
 @media (max-width: 1024px) {