Q&A
「こちらのサイト」とは？
html cssでサイトを作るときの配置について質問があります。
途中まで進めて疑問が出てきたので質問します。
現在こちらのサイトに出されている課題で、サイトの模写に挑戦しています。
私は現在以下のようにコードを書いています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>デイトラ 練習用ページ</title> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 10 <body> 11 12 <header> 13 <h1>30DAYSトライアル</h1> 14 <div class="header-link"> 15 <a href="#" class="about">デイトラとは</a> 16 <a href="#" class="courses">コース一覧</a> 17 <a href="#" class="contact-us">お問い合わせ</a> 18 </div> 19 </header> 20 21 <div class="top-img"> 22 <img src="img/main-vsual.png" width="100%" height="100%" alt="トップ画像"> 23 </div> 24 25 26 <div class="about-daytora"> 27 <h1>デイトラとは</h1> 28 29 </div>
css
1header{ 2 color:#000033; 3 font-family;align-content: 4} 5 6header h1{ 7 float:left; 8 font-size:20px; 9 position:absolute; top:10px; left:150px; 10} 11 12.header-link{ 13 float:right; 14 font-size:15px; 15 position:absolute; top:10px; right:150px; 16} 17 18.top-img{ 19 position:absolute; top:70px; 20} 21 22.about-daytora h1{ 23 text-align:center; 24}
このように書くと、デイトラとはがヘッダーにかぶって表示されます。
そこで、positin:absolute;でこれの位置を正しい位置に固定しようと思っているのですが、そもそもこの手法が正しいのか、正しくないのであればどうすればいいのかを知りたいです。
そもそもheaderやtop-imgもposition:absolute;で位置を指定していますが、これは正しいですか？
本当ならHTMLを下へ下へ書いていくと、それに合わせて表示される位置も下へ下へ移動していくのがいいのかと思うのですが...
基本的な質問になりますが、よろしくお願いいたします。
すみません、貼り忘れてました。
https://note.com/tokyofreelance/n/n4baf7dd10306
こちらです
質問は編集できますので
わかりました、今後編集するようにします。
今、されたほうが良いかと
いつ来るか分からない次回に回すと忘れますし
「今後」「以後」は「現在」も含みますよ。
もうこの質問は解決したので「次の質問から」そうするという意図の返信でした。
日本語がわからないならもう回答・返信しなくて結構ですよ？^^
>日本語がわからないなら
そっくりそのままお返しします。
こちらは「質問への追記修正」のコメント欄です。
質問編集して返してない時点で分かってないのはどちらか明白ですね。
回答者に喧嘩売っても損しかないでしょうに。
あなたもうこの質問に必要ないので返信してこなくていいですよ。
回答1件
0
ベストアンサー
そもそもheaderやtop-imgもposition:absolute;で位置を指定していますが、これは正しいですか？
__本当ならHTMLを下へ下へ書いていくと、それに合わせて表示される位置も下へ下へ移動していくのがいいのかと思うのですが... __
ご理解の通り、正しくないです。
絶対配置（position:absolute）を使ったレイアウトは必要最小限にとどめて、ブロックレイアウトや、フレックスレイアウト、グリッドレイアウトを使用すべきだと思います。
正しくないのであればどうすればいいのかを知りたい
一言で説明するのは難しいです。
↓基本的なことはこちらに書いてありますが、読みやすいとは言えなさそうです。
通常フローでのブロック及びインラインレイアウト - CSS: カスケーディングスタイルシート | MDN
↓これは読みやすくわかりやすいですが、ちょっと古い記事なので、現在ではあまり使わないフロートレイアウトを使っています。
ボックスレイアウトの基本をマスターしてサクッとwebページを作れるようになろう - Qiita
↓Webクリエイターボックスさんの記事は比較的わかりやすく良質だと思います。
手を動かして学習しよう！コードチャレンジ HTML/CSS 初級編 | Webクリエイターボックス
投稿2021/03/30 02:33
総合スコア36087
あなたの回答
tips
プレビュー
