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

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

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

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

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

HTML

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

CSS

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

Q&A

1回答

923閲覧

CSS float 横並びにならない

mayugee228

総合スコア2

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/04/23 08:07

flat: left;と記述しても、
contents-itemのところが横並びにならず
原因がわからず困っています。
わかる方がいれば教えていただけるとありがたいです。

コード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> </div> <div class="contact-form">
</div>
</body> </html>

CSS
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}

body {
font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
list-style: none;
padding: 33px 20px;
float: left;

}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;

}
.header-list li {
float: left;
padding: 33px 20px;

}

.copy-container h1 {
font-size: 140px;

}
.copy-container h2 {
font-size: px;
}
.copy-container span {
color: #ff4a4a;
}
.section-title {
border-bottom: 2px solid #dee7ec;
}
.contents-item {
float: left;
font-size: 25px;
}
.main {
padding: 100px 80px;

}
.contents {
height: 500px;
font-size: 25px;
}
.contact-submit {
background-color: #dee7ec;
color: #888eab;

}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;

}
.footer-logo {
float: left;
font-size: 32px;

}
.footer-list {
float: right;

}
.footer-list li {
padding-bottom: 20px;
}

h1 {
font-size: 140px;
float: none;

}
h2 {
font-size: 60px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
font-size: 36px;
float: left;
padding: 20px 40px;
}

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

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

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

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

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

K_3578

2021/04/23 08:09

なぜ、新規で質問を挙げる必要があるのでしょうか。 同様の質問を投稿するのは禁止です。本件には削除リクエストを送り、前の質問で回答を 募ってください。
meg_

2021/04/23 10:47

・「flat: left;と記述しても、」"flat"ですか? ・コードは「コードの挿入」で記入してください。
mayugee228

2021/05/16 09:29

初めて利用させていただいたので使い方がいまいち分かっていませんでした。申し訳ございません。 しかし、初心者や初めて使う人もいると思うのでもう少しお手柔らかにお願いしたいです。
Lhankor_Mhy

2021/05/16 14:14

では、もう少し柔らかく改めます。 同じような質問を連投したくなる気持ちもわかるのですが、しかし、一般に同じ質問を複数立てることは嫌われています。 いくつか理由をあげます。 ・他の質問で付けられた回答を知らずに同内容の回答を付けたり、他の質問ですでに解決したことを知らずに検討を続けたり、善意の回答者の労力が無駄になる。 ・この質問にいる回答者だけでは質問が解決するか不安であるように見えるので、回答者への不信感を表明していると感じ取った場合、その回答者に不快感を与える可能性がある。 以上のように誤ったコミュニケーションになってしまう可能性があります。 誤ったコミュニケーションは問題解決を阻害するだけではなく、不毛な論争などで時間や労力を無駄にし、質問者と回答者と共に良いことはありません。 ですので、同じ内容で新規の質問を建てることはできるだけ避け、どうしても新しい質問を建てる場合には、ほかのユーザーが納得できそうな理由を挙げていただくことによって、よりよいコミュニケーションが構築できるのではないかと考えています。 また、teratailのガイドラインにも同じ質問を複数建てることは推奨されていませんので、質問をされる前にまずヘルプを一読されることをお勧めします。 以上、よいQ&Aサイトを構築していくためにご協力をお願いします。
guest

回答1

0

float:left;がセットれているdivタグに閉じタグが書かれていないのが原因のようですね。
今一度、タグの構造を見直してみてください。
投稿ではインデントが入っていなくてわかりづらいですが、インデント入れるとよくわかりますよ。

投稿2021/05/03 03:53

geta

総合スコア241

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問