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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

HTML、CSSでブロック要素なのに改行されず横並びになってしまう

web_nari
web_nari

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2回答

0リアクション

0クリップ

226閲覧

投稿2022/08/07 13:11

編集2022/08/08 01:37

前提

こちらのサイトの模写コーディングをしております。

完成系はこちらです。
こちらのサイトを作成するときに、要素の並びがおかしなことになりました。
Image from Gyazo
こちらを解消するために色々苦心しました。
Image from Gyazo
なんとか解消できたのですが、方法はh2見出しの「Bicycle」のmargin-topを200pxほどにして、大きく余白をとりました。

お聞きしたいこと

今回margin-topで余白を無理やり作りました。
しかし、そもそも該当部分は<div><h2>などのブロック要素です。
なぜ横並びになってしまうのでしょうか?
インライン要素なら横並びになってしまうことがあり得ると思いますが、今回インライン要素ではありません。

発生している問題・エラーメッセージ

Image from Gyazo
上記のようにAboutとBicycleはh2の見出しです。
Aboutからテキストテキストテキストまでは<section>タグで囲っております。
にもかかわらず、改行がおかしなことになってしまっております。

該当のソースコード

HTML

<main> <!-- 自転車のメインの写真の部分の記述 --> <div class="main-visual"> <img src="./image/mainvisual.jpeg"> </div> <!-- About部分の記述 --> <section class="profile_image"> <h2 class="headline">About</h2> <!-- プロフィール写真 --> <div class="pf"> <img src="./image/about.jpeg" class="profile_photo"> </div> <!-- 自己紹介のテキスト --> <div class="pf"> <p>KAKERU MIYAICHI</p> <p>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキスト</p> </div> </section> <section class="bicycle_images"> <h2 class="headline">Bicycle</h2> <ul class="contents"> <li class="content"> <img src="./image/bicycle1.jpeg"> <p>タイトルタイトル</p> <p>テキストテキストテキスト</p> </li> <li class="content"> <img src="./image/bicycle2.jpeg"> <p>タイトルタイトル</p> <p>テキストテキストテキスト</p> </li> <li class="content"> <img src="./image/bicycle2.jpeg"> <p>タイトルタイトル</p> <p>テキストテキストテキスト</p> </li> </ul> </section> </main>

追記
本質問のCSS全体を追記させていただきます。

CSS

header { height: 60px; } /* headerのロゴのCSS */ .header-logo { float: left; list-style: none; /* ロゴ部分のボックスモデルを設定 */ padding:7.711px 19.12px; /* 背景色を設定 */ background-color:#000000; /* 文字色を設定したい */ color:aliceblue; } .header-list { float: right; list-style: none; /* Layout Properties */ top: 20px; left: 1002px; width: 48px; height: 21px; padding: 20px 30px; /* UI Properties */ text-align: left; font: normal normal normal 14px/21px Meiryo; letter-spacing: 0px; color: #24292E; opacity: 1; } body { width: 1280px; } .main-visual img{ /* Layout Properties */ top: 60px; left: 0px; width: 1280px; height: auto; } .headline { text-align:center; /* Layout Properties */ /* top: 740px; left: 590px; width: 101px; height: 48px; box-align: center; */ /* UI Properties */ /* text-align: center; font: normal normal bold 32px/48px Meiryo; letter-spacing: 0px; color: #383E45; opacity: 1; */ text-decoration:underline;/*下線を引く*/ text-decoration-color:#000000;/*下線を赤色*/ } .profile_image { margin: auto; margin-bottom: 60px; } .profile_photo { /* Layout Properties */ top: 858px; left: 374px; width: 100px; height: 100px; /* UI Properties */ opacity: 1; border-radius:50%; } .pf { float:left; margin-right: 16.2px; /* box-align: center; */ } .content { float: left; list-style: none; } .content img{ width: 263px; height: 174px; } .bicycle_images h3{ padding-bottom: 60px; } .bicycle_images{ margin-top:200px; }

試したこと

margin-topを指定

HTML

<h2 class="headline">Bicycle</h2>

に対してCSSで、margin-topを指定しました。

CSS

.bicycle_images{ margin-top:200px; }

このようにCSSで指定することでなんとかできました。

一方でそもそもこれはブロック要素<h2><div>なので、ここまで余白をつけないと改行されないのはおかしいのではないかと思いました。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hatena19

2022/08/07 13:23

現状のCSSの全体を質問に追記してください。
web_nari

2022/08/07 15:46

コメントありがとうございます。 追記させていただきました!

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。