Q&A
コードはヘルプ等を参考に、「コードブロック」として提示さると良いかと思います。
質問内容
プロゲートの道場コース初級編のフッター部分で、リストをコーディングしたら上記写真のように横並びに表示されてしまいます。しかもフッター部分はhtmlもcssもコピペなので、縦並びで表示されるはずなのですが。。。
色々とググったり、過去の質問も見てみたのですが解決できず困っています。どうかお力添えよろしくお願いします。
下記、自分のコーディングです
【html】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <h1>Progato</h1> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </header></body> </html><section class="top"> <h1>HELLO WORLD<span class="dot">.</span></h1> <h2>プログラミングの世界へようこそ</h2> </section> <section class="lessons"> <h3>学べるレッスン</h3> <section class="contens"> <div class="lesson"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="html & css 画像"> <p>HTML & CSS</p> </div> <div class="lesson"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="php 画像"> <p>PHP</p> </div> <div class="lesson"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="ruby 画像"> <p>Ruby</p> </div> <div class="lesson"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="swift 画像"> <p>Swift</p> </div> </section> </section> <section class="contact"> <h3>お問い合わせ</h3> <form> <p>メールアドレス（必須）</p> <input> <p>お問い合わせ内容（必須）</p> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <button class="btn">送信</button> </form> </section> <div class="footer"> <div class="footer-logo">Progate</div> <div class="footer-list"> <ul> <li>会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div> </div>
【css】
/* 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;
}
header {
height: 90px;
background-color: #26d0c9;
}
header li {
color: #fff;
padding: 33px 20px;
list-style: none;
}
header > h1{
color: #fff;
font-size: 36px;
font-weight: normal;
padding: 20px 40px;
float: left;
}
ul {
display: flex;
}
.top {
margin: 100px 80px;
}
.top > h1 {
font-size: 140px;
}
.top > h2 {
font-size: 60px;
}
.dot {
color: #f00;
}
.lessons {
height: 500px;
margin: 100px 80px;
}
.contens {
margin-top: 50px;
display: flex;
justify-content: flex-start;
}
.lesson {
margin-right: 40px;
}
.lessons > h3 {
font-size: 28px;
padding-bottom: 15px;
border-bottom: 2px solid #dee7ec;
}
.lessons p {
margin-top: 30px;
font-size: 24px;
}
.contact {
margin-right: 80px;
margin-left: 80px;
margin-bottom: 100px;
}
.contact > h3 {
font-size: 28px;
border-bottom: 2px solid #dee7ec;
padding-bottom: 15px;
margin-bottom: 50px;
}
form {
width: 400px;
}
input, textarea {
width: 100%;
padding: 20px;
margin-top: 10px;
margin-bottom: 30px;
border: 1px solid #dee7ec;
}
.btn {
font-size: 18px;
color: #889eab;
background-color: #dee7ec;
width: 100%;
padding: 20px;
margin-top: 10px;
margin-bottom: 30px;
}
.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;
list-style: none;
}
yoshinaviさん
助言ありがとうございます！
初投稿だったため不馴れでした…すみません(T_T)
次回からは気をつけて提示していきます！
ありがとうございました！
回答1件
0
ベストアンサー
css
1ul { 2display: flex; 3}
ですね
<ul><li>プログラミングとは</li> ... </ul> に適用しようとして書いたものだと思いますが、
これが、<ul><li>会社概要</li> ... </ul> にも適用されてしまっています。
投稿2019/09/28 16:27
総合スコア463
maaiさん、回答ホントにありがとうございます！お恥ずかしい盲点でした…
解決できずイライラして冷静さを失ったら、こんなイージーな原因も見えなくなるんですね。。。
これからはもう少し落ち着いて取り組んでいきます。本当にありがとうございました！
あなたの回答
tips
プレビュー
