Q&A
左上に配置される文字とは「ココイコとは」のことですか？
文字を追加しようとすると、その文字は左上に配置されてしまいます。私はnavの位置を理想の場所に持っていくためにpositionを使って調整しました。そのpositionの書き方がおかしいため、文字が左上に配置されてしまうのではないかと私は考えました。
ここで質問があるのですが、ここではpositionの使い方に問題があるのでしょうか？それともまた別のところに原因があるのでしょうか？文字が左上に配置される原因とその対処法を教えていただけると嬉しいです。
回答よろしくお願いいたします。
左上に表示される文字は一番左上にある「ココイコとは」の部分と「行くお店が決まらないとき」
の部分です。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>Portfolio</title> 8</head> 9<body> 10 11 <!-- ヘッダー navの部分 --> 12<header class ="header_all"> 13 <div class = "left_title"> 14 <h3>行くお店が決まらないとき</h3> 15 <h1>ココイコとは</h1> 16 </div> 17 <ul class="right_nav"> 18<li>ココイコ</li> 19<li>お店を決める</li> 20<li>お問い合わせ</li> 21 </ul> 22 23</header> 24 25<!-- お店を決める --> 26<main class ="main_part"> 27 <div class ="map"> 28 <h1>お店を決める</h1> 29 </div> 30 <div class ="right_function"> 31 <p>ここに機能が入ります</p> 32 <p>ここに説明が入ります</p> 33 </div> 34</main> 35 36 37<section class="map_part"> 38 <h1>ここにマップが入ります</h1> 39 <p>これはaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 40 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 41 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 42 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 43 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 44 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 45 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 46 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 47 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 48 なサービスです。 49 </p> 50</section> 51 52<footer class="footer_all"> 53 <div class="footer_text"> 54 <h1>ココイコとは</h1> 55 <h3>行くお店が決まらないとき</h3> 56</div> 57</footer> 58 59 60 61 62 63</body> 64</html>
css
1/* navの部分 */ 2body { 3 margin: 0; 4} 5 6.left_title { 7 float: left; 8 position: absolute; 9 left: 12%; 10} 11 12.left_title h1 { 13 margin-top: 0px; 14} 15 16.right_nav { 17 float: right; 18 list-style: none; 19 position: relative; 20 right: 15%; 21} 22 23.right_nav li { 24 display: inline-block; 25 position: relative; 26 margin-right: 30px; 27 top: 30px; 28} 29 30/* mapの部分 */ 31 32.main_part { 33display: flex; 34position: absolute; 35top: 25%; 36left: 45%; 37} 38 39.map { 40 display: flex; 41} 42 43.map h1 { 44margin-right: 50px; 45} 46 47.map_part { 48 position: absolute; 49 top: 50%; 50 left: 40%; 51}
回答2件
0
floatやposition: absolute;でのレイアウトはやめるべきです。
PCからスマホまでのサイズに対応する必要がある現在の環境ではCSSが複雑になりすぎます。
現在では、Flexbox か CSS Grid でレイアウトを決めるのがマストです。
どちらが適しているかはレイアウトによりますので、下記などをご参考に。
投稿2021/10/25 04:14
総合スコア34075
最初はflexboxを使ったレイアウトをしていたのですが、模写をしたサイトがfloatを使って横並べにしていたことがあって、それが最適解なのかと思ってしまって今回floatを使ってしまいました。やっぱりそうですよね…。回答ありがとうございます。
position: absolute;でのレイアウトもあまりよくないのは知りませんでした。位置を決めたいときはposition:static or relative; を使うのが主流なのでしょうか？この段階でその知識を知れてよかったです。
position: absolute;はページ全体のレイアウトを決めるときには使わないですね。
ピンポイントで位置決めするときとかは使うこともありますが。
position: absolute;の要素は Lhankor_Mhyさんの回答にもありますが、ないものとして扱われ、他の要素の配置に影響を与えますので、それを考慮する必要が出てきて複雑化が不可避になります。
floatも同様です。
いつもありがとうございます。勉強になります。
今後とも機会がありましたら、どうぞよろしくお願いいたします。
0
ブロックレイアウトは、（ltrの場合）左上から要素が配置されるのが原則です。
絶対配置された要素はこのフローから外れてしまうので、レイアウト上はないものとして扱われます。
ご提示のコードは、footerより前にある要素が絶対配置されているため、ないものとして扱われ、footerが最初の要素となります。
ですので、左上に配置されています。
投稿2021/10/25 03:50
総合スコア36960
理解できました。分かりやすい説明ありがとうございます! 絶対配置は極力使わないようにします。ポジションで位置を設定したいときは、staticかrelativeを使うほうが良いのでしょうか。
レイアウトを指定するために配置（position）を使うのは、基本的に避けた方がいいです。フレックスレイアウトやグリッドレイアウトを使うのが定番だと思います。
使い分けは以下の記事が参考になるでしょう。
https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html
固定配置と粘着配置は代替が難しいので必要に応じて使うのがいいかと覆います。
また、要素を重ね合わせるには配置を使わざるを得ないので、その場合は影響範囲を小さくするように使うといいでしょう。
また、ノングリッドデザインをする際には絶対配置を使った方がよい場面があると思います。
勉強になります。いつもありがとうございます。
あなたの回答
tips
プレビュー
