前提・実現したいこと
progateのHTML & CSS 道場コース 初級編初級編を復習しようの5.
フッター部分を作ろうで
liの会社概要,採用,お問い合わせの部分を箇条書きにしたいです。
発生している問題・エラーメッセージ
縦書きになるはずが何故か横書きになってしまいます。
該当のソースコード
<!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 class="contents"> <!-- <h3>要素を追加してください --> <h3 class="section-title">学べるレッスン</h3> <!-- <div>要素を追加し、「contents-item」というclassをつけてください --> <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>要素を追加し、「contents-item」というclassをつけてください --> <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> <!-- <div>要素を追加し、「contents-item」というclassをつけてください --> <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> <!-- <div>要素を追加し、「contents-item」というclassをつけてください --> <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"> <!-- <h3>要素を追加し、「section-title」というclassをつけてください --> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス(必須)</p> <input> <p>お問い合わせ内容(必須)</p> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <input class="contact-submit" type="submit" value="送信"> <!-- <p>要素を3つ追加してください --> </div> </div> <div class="footer"> <div class="footer-logo">Progate</div> <div class="footer-list"> <ul> <li>会社概要</li> <li>採用</li> <li>お問い合わせ</li> </ul> </div> </div> </body> </html>
<!DOCTYPE css> body { font-family: "Avenir Next"; } li { list-style: none; } .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; } .main { background-color: #bdf7f1; height: 500px; } .footer { /* background-colorを#2f5167に変更してください */ background-color: #2f5167; /* colorを#fffにしてください */ color:#fff; /* heightを120pxに変更してください */ height:120px; /* 上下左右のpaddingを40pxにしてください */ padding:40px; } /* footer-logoのfont-sizeとfloatを指定してください */ .footer-logo{ font-size:32px; float:left; } /* footer-listのfloatを指定してください */ .footer-list{ float:right; } /* footer-listの中のli要素のpadding-bottomを指定してください */ .footer-list li{ padding-bottom:20px; }
試したこと
このサイトで同様の質問を探し、float:none;をやりましたが、行の感覚が大きく空いてしまいました。
多分、基礎的な部分をどこか忘れていると考えています。
タイトルは要件を具体的に記載してください。
「Progate利用者からのみのアドバイスを求める」のであればまだ良いかもしれませんが、
回答者が全てProgateを利用したかどうか分かりません(むしろ少ないです)
実際に起きている問題、実現したいこと を記載してください。
あと、コードブロックはファイル毎に分けて、コードのみ提示してください。
index.html
```html
<!-- index.htmlのコード -->
```
style.css
```css
/* style.cssのコード */
```
すみません、初めての投稿で質問の仕方がよくありませんでした。
すぐに修正します。
いえ、謝る必要はないです。怒っているわけではないので。(指摘は攻撃ではなくアドバイスです)
アドバイス有難うございます。見やすいように変更してみました。画像も追加しました。
https://jsfiddle.net/dtx83gsL/1/ 問題が再現しません。実際のコードと提示したコードに違いはありませんか?
確認しました。間違いないはずですが、progate上とご提示したツールではかなり見方が異なるようです。こちらで確認できますでしょうか?https://jsfiddle.net/woodlong/rk7n65a2/
質問本文にて提示されたコードと違いますよ。
CSSが異なっていました。
確認不足ですみません。もう1度修正します。
回答1件
あなたの回答
tips
プレビュー