File tree Expand file tree Collapse file tree 1 file changed +3
-5
lines changed Expand file tree Collapse file tree 1 file changed +3
-5
lines changed Original file line number Diff line number Diff line change @@ -103,9 +103,7 @@ sakuraではスタイルのカスタマイズ用にSassが使われています
103103
104104### ` label ` 要素に ` display: block; ` が適用されている
105105
106- フォームを縦並びに表示するため ` label ` 要素に ` display: block; ` が適用されていますが、その影響で ` label ` 要素内にフォームの要素を入れ子にすることを強いられます。
107-
108- 今回用意したサンプルのHTMLは ` label ` 要素と ` input ` 要素を別に書いています。
106+ フォームを縦並びに表示するため ` label ` 要素に ` display: block; ` が適用されていますが、その影響で ` label ` 要素内にフォームの要素を入れ子にすることを強いられます。たとえば下記のように ` label ` 要素と ` input ` 要素を別に書くのは推奨されません。
109107
110108``` html
111109<fieldset >
@@ -121,11 +119,11 @@ sakuraではスタイルのカスタマイズ用にSassが使われています
121119</fieldset >
122120```
123121
124- 上記のようなHTML構造にするとフォーム内の要素が横並びにならず、下記画像のように不格好な見た目になります 。
122+ このHTML構造の場合、フォームが不格好な見た目になってしまいます 。
125123
126124![ フォーム内の要素が横並びできていない] ( ./images/south/form.png )
127125
128- 下記のHTMLのように ` label ` 要素内に ` input ` 要素を入れ子にすることで、まだマシな見た目になります 。
126+ 一応 ` label ` 要素内に ` input ` 要素を入れ子にするとマシな見た目になります 。
129127
130128``` html
131129<fieldset >
You can’t perform that action at this time.
0 commit comments