正解のコードと実際に僕が書いたコードの両方を掲載しておきます。
なんでこれが不正解になるのかわかりまません。
lessonの要素が横並びにならず縦並びになっていまします。
不正解のコード
コード<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <!-- ここにコードを書いていきましょう --> <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE.<br> LEARN TO BE CREATIVE.</h1> <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> <a href class="btn signup">新規登録はこちら</a> <p> or </p> <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>twitterで登録</a> </div> </div> <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-right"> <a href="#" class="login">ログイン</a> </div> </div> </header> <div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lessson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png" > <p>HTML&CSS</p> </div> <div class="text-contents"> <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>JQuery</p> </div> <div class="text-contents"> <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> </div> <div class="text-contents"> <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <div class="text-contents"> <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> </div> </div> </div>
css
1コード* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21/* ここからcssを書いていきましょう */ 22.top-wrapper{ 23 background-image:url(https://prog-8.com/images/html/advanced/top.png); 24 padding:180px 0 100px 0; 25 background-size: cover; 26 27} 28 29.container{ 30 color: white; 31 text-align: center; 32 margin: 0 auto; 33 width: 1170px; 34 padding: 0 15px; 35} 36 37.top-wrapper h1{ 38 font-size: 45px; 39 opacity: 0.7; 40 letter-spacing: 5px; 41} 42 43.top-wrapper p{ 44 opacity: 0.7; 45 margin-bottom: 15px; 46} 47 48.signup{ 49 background-color: #239b76; 50 margin-top: 15px; 51 margin-bottom: 15px; 52} 53 54.facebook{ 55 background-color: #3b5998; 56 margin-right: 10px; 57} 58 59.twitter{ 60 background-color: #55acee; 61} 62 63.btn{ 64 padding: 8px 24px; 65 color: white; 66 display:inline-block; 67 opacity:0.8; 68 border-radius: 4px; 69} 70 71btn:hover{ 72 opacity: 1; 73} 74 75.fa{ 76 margin-right: 5px; 77} 78 79header{ 80 width: 100%; 81 height: 65px; 82 background-color: rgba(34,49,52,0.9); 83 position :fixed; 84 top: 0; 85 z-index: 10; 86} 87 88.logo { 89 width: 124px; 90 margin-top: 20px; 91} 92 93.header-left { 94 float: left; 95} 96 97.header-right { 98 float: right; 99 background-color: rgba(255, 255, 255, 0.3); 100 transition: all 0.5s; 101} 102 103.header-right:hover { 104 background-color: rgba(255, 255, 255, 0.5); 105} 106 107.header-right a { 108 line-height: 65px; 109 padding: 0 25px; 110 color: white; 111 display: block; 112} 113 114 115.lesson-wrapper { 116 height: 580px; 117 background-color: #f7f7f7; 118} 119 120.heading{ 121 padding-top: 80px; 122 padding-bottom: 50px; 123 text-align: center; 124 color: #5f5d60; 125} 126 127.heading h2{ 128 font-weight: normal; 129} 130 131.lesson-icon{ 132 width: 25%; 133 float:left; 134} 135 136.lesson{ 137 position: relative; 138} 139 140.lesson-icon p{ 141 position: absolute; 142 top: 44%; 143 width: 100%; 144 color: white; 145} 146 147.text-contents{ 148 width: 80%; 149 font-size: 13px; 150 color: #b3aeb5; 151 margin-top: 15px; 152 display: inline-block; 153}
正解のコード
html
1コード<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 8</head> 9<body> 10 <header> 11 <div class="container"> 12 <div class="header-left"> 13 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 14 </div> 15 <div class="header-right"> 16 <a href="#" class="login">ログイン</a> 17 </div> 18 </div> 19 </header> 20 <div class="top-wrapper"> 21 <div class="container"> 22 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 23 <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 24 <a href="#" class="btn signup">新規登録はこちら</a> 25 <p>or</p> 26 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 27 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 28 </div> 29 </div> 30 <div class="lesson-wrapper"> 31 <div class="container"> 32 <div class="heading"> 33 <h2>Learn Where to Get Started!</h2> 34 </div> 35 <div class="lessons"> 36 <div class="lesson"> 37 <div class="lesson-icon"> 38 <img src="https://prog-8.com/images/html/advanced/html.png"> 39 <p>HTML & CSS</p> 40 </div> 41 <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 42 </div> 43 <div class="lesson"> 44 <div class="lesson-icon"> 45 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 46 <p>jQuery</p> 47 </div> 48 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 49 </div> 50 <div class="lesson"> 51 <div class="lesson-icon"> 52 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 53 <p>Ruby</p> 54 </div> 55 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 56 </div> 57 <div class="lesson"> 58 <div class="lesson-icon"> 59 <img src="https://prog-8.com/images/html/advanced/php.png"> 60 <p>PHP</p> 61 </div> 62 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 63 </div> 64 </div> 65 </div> 66 </div> 67</body> 68</html>
css
1コード/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21/* ここからcssを書いていきましょう */ 22.top-wrapper { 23 padding: 180px 0 100px 0; 24 background-image: url(https://prog-8.com/images/html/advanced/top.png); 25 background-size: cover; 26 color: white; 27 text-align: center; 28} 29 30.container { 31 width: 1170px; 32 padding: 0 15px; 33 margin: 0 auto; 34} 35 36.top-wrapper h1 { 37 opacity: 0.7; 38 font-size: 45px; 39 letter-spacing: 5px; 40} 41 42.top-wrapper p { 43 opacity: 0.7; 44 margin-bottom: 15px; 45} 46 47.signup { 48 background-color: #239b76; 49 margin-top: 15px; 50 margin-bottom: 15px; 51} 52 53.facebook { 54 background-color: #3b5998; 55 margin-right: 10px; 56} 57 58.twitter { 59 background-color: #55acee; 60} 61 62.btn { 63 padding: 8px 24px; 64 color: white; 65 display: inline-block; 66 opacity: 0.8; 67 border-radius: 4px; 68} 69 70.btn:hover { 71 opacity: 1; 72} 73 74.fa { 75 margin-right: 5px; 76} 77 78header { 79 height: 65px; 80 width: 100%; 81 background-color: rgba(34, 49, 52, 0.9); 82 position :fixed; 83 top: 0; 84 z-index: 10; 85} 86 87.logo { 88 width: 124px; 89 margin-top: 20px; 90} 91 92.header-left { 93 float: left; 94} 95 96.header-right { 97 float: right; 98 background-color: rgba(255, 255, 255, 0.3); 99 transition: all 0.5s; 100} 101 102.header-right:hover { 103 background-color: rgba(255, 255, 255, 0.5); 104} 105 106.header-right a { 107 line-height: 65px; 108 padding: 0 25px; 109 color: white; 110 display: block; 111} 112 113.lesson-wrapper { 114 height: 580px; 115 background-color: #f7f7f7; 116 text-align: center; 117} 118 119.heading { 120 padding-top: 80px; 121 padding-bottom: 50px; 122 color: #5f5d60; 123} 124 125.heading h2 { 126 font-weight: normal; 127} 128 129.lesson{ 130 float: left; 131 width: 25%; 132} 133 134.lesson-icon { 135 position: relative; 136} 137 138.lesson-icon p { 139 position: absolute; 140 top: 44%; 141 width: 100%; 142 color: white; 143} 144 145.text-contents { 146 width: 80%; 147 display: inline-block; 148 margin-top: 15px; 149 font-size: 13px; 150 color: #b3aeb5; 151}