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

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

新規登録して質問してみよう
ただいま回答率
85.50%
コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

Q&A

解決済

1回答

1030閲覧

Progate初級道場コース フッターのリストを縦に並べる方法

yummyyummy

総合スコア29

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

CSS

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

0グッド

1クリップ

投稿2021/11/24 13:25

編集2021/11/25 02:37

イメージ説明### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

Progate初級道場コースのフッターが上手く作れません。 下が見本で、上が私のものです。 リストを右揃えにするところまでは出来たのですが、縦に並べることが出来ず困っています。

該当のソースコード

CSS

1html, body, 2ul, ol, li, 3h1, h2, h3, h4, h5, h6, p, 4form, input, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; 11 12} 13 14.header { 15 height: 90px; 16 background-color:#26d0c9;} 17li { 18 list-style: none; 19 float: left; 20 padding: 33px 20px; 21 color: white; 22} 23 24/* ここからCSSを記述してください */ 25.header-logo { 26 float: left; 27 font-size: 36px; 28 padding: 20px 40px; 29 color: white; 30} 31.copy-countainer { 32 padding: 100px 80px; 33} 34.copy-countainer h1 { 35 font-size: 140px; 36} 37.copy-countainer span { 38 color:#ff4a4a; 39} 40.copy-countainer h2 { 41 font-size:60px; 42} 43.section-title { 44 border-bottom: 2px solid #dee7ec; 45 font-size:28px; 46 padding-bottom:15px; 47 margin-bottom:50px; 48} 49.contents { 50 51 margin-left:80px; 52 height:500px; 53} 54.contents-item { 55 56 float:left; 57 margin-right:40px ; 58} 59.contents-item p { 60 margin-top:30px; 61 font-size:24px; 62 63} 64.contact-form { 65 margin-left:80px; 66 margin-right:80px; 67 margin-top:100px; 68} 69.h3 { 70 font-size:28px; 71 border-bottom:#dee7ec; 72} 73input { 74 border-color:#dee7ec; 75 padding:20px; 76 width:400px; 77 margin-bottom:30px; 78} 79textarea { 80 border-color:#dee7ec; 81 padding:20px; 82 width:400px; 83 margin-bottom:30px; 84} 85p { 86 margin-bottom:10px; 87} 88.contact-submit { 89 font-size:18px; 90 padding:20px; 91 background-color:#dee7ec; 92 color:#889eab; 93} 94.footer { 95 background-color: #2f5167; 96 color: #fff; 97 height: 120px; 98 padding: 40px; 99 margin-top:112px; 100 } 101 102 .footer-logo { 103 float: left; 104 font-size: 32px; 105 } 106 107 .footer-list { 108 float: right; 109 display: flex; 110 flex-flow: column; 111} 112 113.footer-list li { 114 padding-bottom: 20px; 115} 116 117 118 119 120 121HTML 122<!DOCTYPE html> 123<html> 124 <head> 125 <meta charset="utf-8"> 126 <title>Progate</title> 127 <link rel="stylesheet" href="stylesheet.css"> 128 </head> 129 <body> 130 <!-- ここからHTMLを書き始めてください --> 131 <div class="header"> 132 <div class="header-logo">Progate</div> 133 <div class="header-list"> 134 <ul> 135 <li>プログラミングとは</li> 136 <li>学べるレッスン</li> 137 <li>お問い合わせ</li> 138 </ul> 139 </div> 140 </div> 141 <div class="copy-countainer"> 142 <h1>HELLO WORLD<span>.</span></h1> 143 <h2>プログラミングの世界へようこそ</h2> 144 </div> 145 <div class="contents"> 146 <h3 class="section-title">学べるレッスン</h3> 147 <div class="contents-item"> 148 <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg"> 149 <p>HTML & CSS</p> 150 </div> 151 <div class="contents-item"> 152 <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg"> 153 <p>PHP</p> 154 </div> 155 <div class="contents-item"> 156 <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg"> 157 <p>Ruby</p> 158 </div> 159 <div class="contents-item"> 160 <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg"> 161 <p>Swift</p> 162 </div> 163 </div> 164 <div class="contact-form"> 165 <h3 class="section-title">お問い合わせ</h3> 166 <p>メールアドレス (必須) </p> 167 <input> 168 <p>お問い合わせ内容 (必須) </p> 169 <textarea></textarea> 170 <p>※必須項目は必ずご入力ください</p> 171 <input class="contact-submit" type="submit" value="送信"> 172 </div> 173 174 <div class="footer"> 175 <div class="footer-logo">Progate</div> 176 <div class="footer-list"> 177 <ul> 178 <li>会社概要</li> 179 <li>採用</li> 180 <li>お問い合わせ</li> 181 </ul> 182 </div> 183 184 </div> 185 </body> 186</html>

試したこと

自分なりに調べて、
display: flex;
flex-flow: column; で縦に並べられるとの情報を見つけ、試してみたのですが反映されません。
プログラミング超初心者でわからないことだらけで困っています。
どなたか教えていただけませんでしょうか。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

hatena19

2021/11/24 23:29

HTMLコードも提示してください。
yummyyummy

2021/11/25 00:09

HTMLコードも載せましたので、よろしくお願い致します。
guest

回答1

0

ベストアンサー

HTMLの提示がないので推測ですが、flexは横並びまたは縦並びさせたい親要素に設定するものですので、
下記でどうでしょう。

css

1.footer-list { 2 float: right; 3 display: flex; 4 flex-flow: column; 5} 6 7.footer-list li { 8 padding-bottom: 20px; 9}

投稿2021/11/24 23:33

編集2021/11/24 23:34
hatena19

総合スコア33620

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

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

yummyyummy

2021/11/25 00:11

ご回答ありがとうございますm(__)m HTMLコードも載せました。 ご提案頂いたCSSコードに変更しても縦並びにすることが出来ないため、HTMLコードに問題があるのかと思います。 再度アドバイスいただけますでしょうか。 よろしくお願い致します。
hatena19

2021/11/25 00:14

提示のHTML、CSSで縦並びになっています。 提示以外の部分に問題があると思われます。
yummyyummy

2021/11/25 00:36

提示以外の部分とは、例えばどんなところでしょうか、、、? 超初心者で、、、すみません(>_<)
hatena19

2021/11/25 02:00

CSSのコードはすべて提示してますか。それがすべてなら縦並びになるはずです。
yummyyummy

2021/11/25 02:38

CSSコードを一部しか提示していなかったので、全て提示しました。 ご指摘ありがとうございます。 CSSの他の部分に問題ありそうでしょうか。
hatena19

2021/11/25 06:53 編集

li要素の親は、.footer-list > ul ですので、下記でどうでしょう。 .footer-list { float: right; } .footer-list > ul { display: flex; flex-flow: column; } ただし、フッターからli要素がはみ出しますので、フッターの高さと、li要素の余白の設定は適宜調整してください。
yummyyummy

2021/11/28 03:11

提案して頂いたコードで数日間トライしたのですが、縦並びにすることは出来ても、フッターの下に謎の余白出来てしまい、また、リストの項目ごとの幅が広く、「お問い合わせ」がフッターの中に収まらないという状況です。。。
hatena19

2021/11/28 03:36

リストの上下マージンが大きく設定されているので、それを小さくすればいいでしょう。 Progateは横並びなどのレイアウトをfloatでするという10年古い手法で指導しています。 ここで学習しても実践では役に立たないと個人的には思います。 適当に切り上げて、別の学習サイトへ移行したほうがいいですよ。 他にどこがいいかと聞かれても私は学習サイト自体利用したことがないので分かりませんが。
yummyyummy

2021/11/28 13:28

そうなのですね^_^; 知らなかったです。。。軽く1周だけして、他のサイトで勉強しようと思います! 色々と教えていただき、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問