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

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

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

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

CSS

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

Q&A

解決済

1回答

905閲覧

フッター<li>の部分での縦書きができない。

woodlong

総合スコア5

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/24 09:00

編集2020/05/24 10:20

イメージ説明

前提・実現したいこと

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;をやりましたが、行の感覚が大きく空いてしまいました。
多分、基礎的な部分をどこか忘れていると考えています。

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

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

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

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

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

m.ts10806

2020/05/24 09:04

タイトルは要件を具体的に記載してください。 「Progate利用者からのみのアドバイスを求める」のであればまだ良いかもしれませんが、 回答者が全てProgateを利用したかどうか分かりません(むしろ少ないです) 実際に起きている問題、実現したいこと を記載してください。
m.ts10806

2020/05/24 09:06

あと、コードブロックはファイル毎に分けて、コードのみ提示してください。 index.html ```html <!-- index.htmlのコード --> ``` style.css ```css /* style.cssのコード */ ```
woodlong

2020/05/24 09:11

すみません、初めての投稿で質問の仕方がよくありませんでした。 すぐに修正します。
m.ts10806

2020/05/24 09:12

いえ、謝る必要はないです。怒っているわけではないので。(指摘は攻撃ではなくアドバイスです)
woodlong

2020/05/24 09:38 編集

アドバイス有難うございます。見やすいように変更してみました。画像も追加しました。
woodlong

2020/05/24 12:07 編集

確認しました。間違いないはずですが、progate上とご提示したツールではかなり見方が異なるようです。こちらで確認できますでしょうか?https://jsfiddle.net/woodlong/rk7n65a2/
kei344

2020/05/24 12:06

質問本文にて提示されたコードと違いますよ。
woodlong

2020/05/24 12:13 編集

CSSが異なっていました。 確認不足ですみません。もう1度修正します。
guest

回答1

0

ベストアンサー

確認しました、progate上とご提示したツールではかなり見方が異なるようです。こちらで確認できますでしょうか?https://jsfiddle.net/woodlong/rk7n65a2/

質問本文にて提示されたコードと違いますが・・・。

CSS

1/* ここからCSSを記述してください */ 2li{ 3 float:left; /* ← これが原因 */ 4 padding:33px 20px; 5}

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

投稿2020/05/24 12:08

kei344

総合スコア69364

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

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

woodlong

2020/05/24 12:29

progate上とツール上だと見え方が全く異なって困惑していますが、教えてもらったツールとサイトでもう1度復習してみます。丁寧にアドバイスして頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問