順序・構成を整理

Author: nakaterm

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

@@ -10,10 +10,6 @@ import responsiveCardsVideo from "./cards-responsive.mp4";
 
 ![料金プランのカードの完成形のイメージ](./final-image.png)
 
-## 幅と高さ
-
-CSSを使用して、HTML要素に幅や高さを設定することができます。
-
 まずは、HTMLとCSSで料金プランのカードを作り始めてみます。
 
 ```html title="index.html"
@@ -80,9 +76,17 @@ body {
 }
 ```
 
-![幅が画面いっぱいに広がっているカード](./card-full-width.png)
+:::tip[16進数カラーコード]
+`#f0f0f0`や`#0d6efd`のように、6桁の英数字で色を指定する記法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。
+
+また、省略形として3桁で指定することもできます。例えば、`#1da`は`#11ddaa`と同じ意味になります。
+:::
+
+## 幅と高さ
 
-しかし、これではカードの幅が画面いっぱいに広がってしまっています。
+今のところ、カードの幅が画面いっぱいに広がってしまっています。
+
+![幅が画面いっぱいに広がっているカード](./card-full-width.png)
 
 `width`プロパティで要素の幅を設定することができます。カードに適切な幅を設定するには、次のようにします。
 
@@ -99,8 +103,6 @@ body {
 
 <ViewSource url={import.meta.url} path="_samples/width" />
 
-### パーセント値で設定する
-
 `width`プロパティや`height`プロパティの値には、親要素などに占める割合を表すパーセント値を指定することもできます。ボタンの幅がその親要素であるカードいっぱいに広がるようにするには、次のようにします。
 
 ```css
@@ -116,12 +118,6 @@ body {
 
 <ViewSource url={import.meta.url} path="_samples/width-percent" />
 
-:::tip[16進数カラーコード]
-`#f0f0f0`や`#0d6efd`のように、6桁の英数字で色を指定する記法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。
-
-また、省略形として3桁で指定することもできます。例えば、`#1da`は`#11ddaa`と同じ意味になります。
-:::
-
 :::tip[ブロック要素とインライン要素]
 
 HTML要素は、それらが表示される際のデフォルトの振る舞いにおいて分類することができます。
@@ -161,8 +157,6 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 <ViewSource url={import.meta.url} path="_samples/border" />
 
-### 角を丸くする
-
 `border-radius`プロパティで角を丸めることができます。指定する値は半径の大きさです。次の例では、カードの角とボタンの角を丸くしています。
 
 ```css
@@ -238,8 +232,6 @@ HTML要素は、それらが表示される際のデフォルトの振る舞い
 
 <ViewSource url={import.meta.url} path="_samples/margin" />
 
-### 特定の辺のみに設定する
-
 上下左右の全てではなく、特定の辺のみにマージンを設定したい場合はどうすればいいでしょうか。
 
 例えば、上側だけにマージンを設定したい場合は、`margin-top`プロパティを使用します。次の例では、ボタンの上側にマージンをつけています。