質問: コードの提示がなく、回答者様に対して分かりづらい質問となってしまいましたので内容を改めさせていただきます。 例えばですが以下のようなコードの場合、HTMLのタグ部分をこのように書いてしまうと表示順としては一番下に来るかと思います。 ですがタグの「閉じるボタン」をモーダルの右上に置きたい時、こんにちは、ゲストさんより上に書けばモーダルの上部に来るので、そうしてからmarginで位置調整をすることも可能ですがこのような書き方でも問題ないですか? また、以下のコードのようにタグを下の方に書いてしまった場合でも、モーダルの右上部分に「閉じるボタン」である「×」を持ってくることは可能なのでしょうか? 書き方によってはちゃんと×は、こんにちは、ゲストさんより上に書かなければ希望通りモーダルの右上には配置できない、みたいな決まり事があるのかどうかまだよく分かっておらず苦戦しています。 HTMLで書いた順は関係なく、後からCSSでいくらでも配置は変更可能なのでしょうか? ``` こんにちは、ゲストさん メールアドレス × ``` ``` .signup-modal { font-size: 22px; position: fixed; top: 15%; right: 30%; bottom: 62%; left: 30%; border-radius: 7px; text-align: center; background-color: rgba(182, 205, 239, 0.7); ```
回答: まず大原則として、HTMLで書いたコードは原則として書かれた順番通りに上から下に配置されます。 これを標準のフロー配置といいます。 フロー配置を前提としてレイアウトをしている場合は、書いた順番どおりにしか表示されませんので、 上下の表示順を入れ替えたければHTMLの順番を変える必要がでてきます。 ただし、CSSを使ってHTMLの記述順に依存せず表示順を自由に変更できる配置方法もあります。 代表的なものが`position`、`display:flex`、`display:grid`などを使ったレイアウト方法です。 これらのレイアウト方法を使う前提であれば、HTMLはあくまで文書構造として意味が通るように 不自然ではない順番で記述しておき、ブラウザ上での表示位置についてはCSSでコントロールすることが できます。 例として挙げられているモーダルなどについては、一般的には閉じるボタンを`position:absolute`(またはposition:fixed)で好きな位置に配置することが多いと思います。 というわけで、 > > 以下のコードのようにタグを下の方に書いてしまった場合でも、モーダルの右上部分に「閉じるボタン」である「×」を持ってくることは可能なのでしょうか? > > > の質問に対しては答えは「可能です」となります。 また、 > > 書き方によってはちゃんと×は、こんにちは、ゲストさんより上に書かなければ希望通りモーダルの右上には配置できない、みたいな決まり事があるのかどうか > > > については、HTMLのマークアップについては原則として文脈・文書構造を破壊しないように意味が通るように正しくマークアップすることが求められますので、閉じるボタンは一般的にはモーダルコンテンツの末尾に記述するのが自然かと思いますが、それをCSSでどこに表示するか?はまた別問題なので、表示上モーダル領域の右上に配置したければCSSでそれを可能とする技術を使って好きな位置配置すれば良いという考え方をします。 HTMLで理想とされるマークアップをした上で、いかに見た目を自由にコントロールするか?を考えるのが 腕の見せ所といった感じですかね。そのためにはCSSでどこまで何ができるのかを把握する必要がありますので、 その辺はご自分で勉強する必要があるかと思います。 というわけで、 > > HTMLで書いた順は関係なく、後からCSSでいくらでも配置は変更可能なのでしょうか? > > > 最後のこの質問については「CSSの技術で可能な範囲で」という条件付きで可能、ということになります。