質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1661閲覧

文字が左上に配置される

bibibin07

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/25 03:11

編集2021/10/25 03:35

文字を追加しようとすると、その文字は左上に配置されてしまいます。私はnavの位置を理想の場所に持っていくためにpositionを使って調整しました。そのpositionの書き方がおかしいため、文字が左上に配置されてしまうのではないかと私は考えました。

ここで質問があるのですが、ここではpositionの使い方に問題があるのでしょうか?それともまた別のところに原因があるのでしょうか?文字が左上に配置される原因とその対処法を教えていただけると嬉しいです。
回答よろしくお願いいたします。

<footer class="footer_all"> <div class="footer_text"> <h1>ココイコとは</h1> <h3>行くお店が決まらないとき</h3> </div> </footer>

左上に表示される文字は一番左上にある「ココイコとは」の部分と「行くお店が決まらないとき」
の部分です。

イメージ説明

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/10/25 03:14

左上に配置される文字とは「ココイコとは」のことですか?
bibibin07

2021/10/25 03:28

<footer class="footer_all"> <div class="footer_text"> <h1>ココイコとは</h1> <h3>行くお店が決まらないとき</h3> </div> </footer> 左上に表示される文字は一番左上にある「ココイコとは」の部分と「行くお店が決まらないとき」 の部分です。
bibibin07

2021/10/25 03:34

文字を追加すると、cssでその文字の位置を調整しない限り、 それは左上に配置されてしまうんです。
guest

回答2

0

floatposition: absolute;でのレイアウトはやめるべきです。
PCからスマホまでのサイズに対応する必要がある現在の環境ではCSSが複雑になりすぎます。

現在では、Flexbox か CSS Grid でレイアウトを決めるのがマストです。

どちらが適しているかはレイアウトによりますので、下記などをご参考に。

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説 | コリス

投稿2021/10/25 04:14

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bibibin07

2021/10/25 07:07 編集

最初はflexboxを使ったレイアウトをしていたのですが、模写をしたサイトがfloatを使って横並べにしていたことがあって、それが最適解なのかと思ってしまって今回floatを使ってしまいました。やっぱりそうですよね…。回答ありがとうございます。 position: absolute;でのレイアウトもあまりよくないのは知りませんでした。位置を決めたいときはposition:static or relative; を使うのが主流なのでしょうか?この段階でその知識を知れてよかったです。
hatena19

2021/10/25 07:19 編集

position: absolute;はページ全体のレイアウトを決めるときには使わないですね。 ピンポイントで位置決めするときとかは使うこともありますが。 position: absolute;の要素は Lhankor_Mhyさんの回答にもありますが、ないものとして扱われ、他の要素の配置に影響を与えますので、それを考慮する必要が出てきて複雑化が不可避になります。 floatも同様です。
bibibin07

2021/10/28 03:15 編集

いつもありがとうございます。勉強になります。 今後とも機会がありましたら、どうぞよろしくお願いいたします。
guest

0

ブロックレイアウトは、(ltrの場合)左上から要素が配置されるのが原則です。
絶対配置された要素はこのフローから外れてしまうので、レイアウト上はないものとして扱われます。

ご提示のコードは、footerより前にある要素が絶対配置されているため、ないものとして扱われ、footerが最初の要素となります。
ですので、左上に配置されています。

投稿2021/10/25 03:50

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bibibin07

2021/10/25 07:15

理解できました。分かりやすい説明ありがとうございます! 絶対配置は極力使わないようにします。ポジションで位置を設定したいときは、staticかrelativeを使うほうが良いのでしょうか。
Lhankor_Mhy

2021/10/25 07:39 編集

レイアウトを指定するために配置(position)を使うのは、基本的に避けた方がいいです。フレックスレイアウトやグリッドレイアウトを使うのが定番だと思います。 使い分けは以下の記事が参考になるでしょう。 https://coliss.com/articles/build-websites/operation/css/grid-for-layout-flexbox-for-components.html 固定配置と粘着配置は代替が難しいので必要に応じて使うのがいいかと覆います。 また、要素を重ね合わせるには配置を使わざるを得ないので、その場合は影響範囲を小さくするように使うといいでしょう。 また、ノングリッドデザインをする際には絶対配置を使った方がよい場面があると思います。
bibibin07

2021/10/28 03:16

勉強になります。いつもありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問