HTML・CSSの書き方の悩み

コードの提示がなく、回答者様に対して分かりづらい質問となってしまいましたので内容を改めさせていただきます。

例えばですが以下のようなコードの場合、HTMLの<a>タグ部分をこのように書いてしまうと表示順としては一番下に来るかと思います。
ですが<a>タグの「閉じるボタン」をモーダルの右上に置きたい時、<p>こんにちは、ゲストさん</p>より上に書けばモーダルの上部に来るので、そうしてからmarginで位置調整をすることも可能ですがこのような書き方でも問題ないですか？

また、以下のコードのように<a>タグを下の方に書いてしまった場合でも、モーダルの右上部分に「閉じるボタン」である「×」を持ってくることは可能なのでしょうか？

書き方によってはちゃんと<a class="close-modal" href="#">×</a></div>は、<p>こんにちは、ゲストさん</p>より上に書かなければ希望通りモーダルの右上には配置できない、みたいな決まり事があるのかどうかまだよく分かっておらず苦戦しています。
HTMLで書いた順は関係なく、後からCSSでいくらでも配置は変更可能なのでしょうか？

HTML
1<body>
2  <div class="modal-wrapper">
3    <div class="signup-modal">
4      <p>こんにちは、ゲストさん</p>
5      <p>メールアドレス</p><input>
6        <div><input class="input-btn" type="submit" value="登録">
7      	<a  class="close-modal" href="#">×</a></div>
8  </div>

CSS
1.signup-modal {
2	font-size: 22px;
3	position: fixed;
4 	top: 15%;
5	right: 30%;
6	bottom: 62%;
7	left: 30%;
8	border-radius: 7px;
9	text-align: center;
10	background-color: rgba(182, 205, 239, 0.7);

m.ts10806

2019/04/21 21:35

どこまでを質問ととるか悩ましいないようですが、自身が書いてみたコードを提示されたほうがアドバイスを得やすい(回答者側もしやすい)と思います

yoshinavi

2019/04/22 06:31

＞･･･HTMLの<a>タグ部分をこのように書いてしまうと表示順としては一番下に来るかと思います。 →　divの中に入っている理由は何でしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

まず大原則として、HTMLで書いたコードは原則として書かれた順番通りに上から下に配置されます。
これを標準のフロー配置といいます。
フロー配置を前提としてレイアウトをしている場合は、書いた順番どおりにしか表示されませんので、
上下の表示順を入れ替えたければHTMLの順番を変える必要がでてきます。

ただし、CSSを使ってHTMLの記述順に依存せず表示順を自由に変更できる配置方法もあります。
代表的なものがposition、display:flex、display:gridなどを使ったレイアウト方法です。

これらのレイアウト方法を使う前提であれば、HTMLはあくまで文書構造として意味が通るように
不自然ではない順番で記述しておき、ブラウザ上での表示位置についてはCSSでコントロールすることが
できます。

例として挙げられているモーダルなどについては、一般的には閉じるボタンをposition:absolute（またはposition:fixed）で好きな位置に配置することが多いと思います。

というわけで、

以下のコードのように<a>タグを下の方に書いてしまった場合でも、モーダルの右上部分に「閉じるボタン」である「×」を持ってくることは可能なのでしょうか？

の質問に対しては答えは「可能です」となります。
また、

書き方によってはちゃんと<a class="close-modal" href="#">×</a></div>は、<p>こんにちは、ゲストさん</p>より上に書かなければ希望通りモーダルの右上には配置できない、みたいな決まり事があるのかどうか

については、HTMLのマークアップについては原則として文脈・文書構造を破壊しないように意味が通るように正しくマークアップすることが求められますので、閉じるボタンは一般的にはモーダルコンテンツの末尾に記述するのが自然かと思いますが、それをCSSでどこに表示するか？はまた別問題なので、表示上モーダル領域の右上に配置したければCSSでそれを可能とする技術を使って好きな位置配置すれば良いという考え方をします。
HTMLで理想とされるマークアップをした上で、いかに見た目を自由にコントロールするか？を考えるのが
腕の見せ所といった感じですかね。そのためにはCSSでどこまで何ができるのかを把握する必要がありますので、
その辺はご自分で勉強する必要があるかと思います。

というわけで、

HTMLで書いた順は関係なく、後からCSSでいくらでも配置は変更可能なのでしょうか？

最後のこの質問については「CSSの技術で可能な範囲で」という条件付きで可能、ということになります。

投稿2019/04/22 02:44

aKusano

総合スコア3763

usm

2019/04/22 15:53

ご回答ありがとうございます。大変分かりやすく助かりました。もっと勉強したいと思います。

行動規範の内容に同意します

とりあえずflexしておけばよいのでは？

javascript
1<style>
2dialog .header{
3  display: -webkit-inline-flex;
4  display: inline-flex;
5  width:100%;
6  justify-content: flex-end;
7}
8dialog .hello{
9  text-align:center;
10  font-weight:bold;
11  color:red;
12}
13</style>
14<script>
15window.addEventListener('DOMContentLoaded', ()=>{
16  document.querySelector('#btn').addEventListener('click',()=>{
17    document.querySelector('#modal').setAttribute("open","open");
18  });
19  document.querySelector('dialog .close').addEventListener('click',()=>{
20    document.querySelector('#modal').removeAttribute("open");
21  });
22});
23</script>
24<dialog id="modal">
25<div class="header">
26<input type="button" class="close" value="閉じる">
27</div>
28<div class="hello">
29こんにちは、ゲストさん
30</div>
31</dialog>
32<input type="button" value="modal" id="btn">