回答編集履歴

1

加筆します

2022/02/15 07:44

投稿

退会済みユーザー
test CHANGED
@@ -24,8 +24,19 @@
24
24
  **本来ブロック要素として振る舞うものがインライン要素として振る舞うようにできたり**、
25
25
  逆にインライン要素として振る舞うものがブロック要素として振る舞うようにできたりします。
26
26
 
27
+ 振る舞いの変え方の考え方ですが、
28
+ 今回気にしているform要素の外側に対してブロック要素として発揮し、
29
+ form要素の内側に対してもブロック要素として発揮しています。
30
+ 外に対して、内に対して、を一括してCSSのdisplayプロパティにて指定できます。
31
+
27
32
  form要素はフロー・コンテンツ、ブロック要素なので、
28
33
  出現するform要素にCSSで`display: inline;`を与えれば、フロー・コンテンツの中に入れることができます。
29
34
  例えばp要素(フロー・コンテンツ、ブロック要素)で段落を定義し、
30
35
  その内側に「`display: inline;`つきform要素」を配置し、
31
36
  その内側にbutton要素を配置すれば、横に並びます。
37
+
38
+ 説明を省きましたが、
39
+ [CSS フローレイアウト - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flow_Layout)
40
+ [CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)
41
+ [CSS フレックスボックスレイアウト - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)
42
+ についても読んでいただいてご検討ください。