Q&A
コードブロック内はコードという文字は外してください。
ファイル名ではなく言語名にしてください。
ファイル名はコードブロックの外にしてください。
html
1コード<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Progate</title> 7 <link rel="stylesheet" href="stylesheet.css"> 8 <link rel="stylesheet" href="responsive.css"> 9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 10 </head> 11 <body> 12 <!--ヘッダー--> 13 <header> 14 <div class="container"> 15 <div class="header-left"> 16 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 17 </div> 18 19 <i class="fa fa-bars" aria-hidden="true"></i> 20 21 <div class="header-right"> 22 <a href="#">レッスン</a> 23 <a href="#">新規登録</a> 24 <a href="#" class="login">ログイン</a> 25 </div> 26 </div> 27 </header> 28 <!--トップ--> 29 <div class="top-wrapper"> 30 <div class="container"> 31 <h1>LEARN TO CODE.</h1> 32 <h1>LEARN TO BE CREATIVE.</h1> 33 <p>Progateはオンラインプログラミング学習サービスです。</p> 34 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 35 <div class="btn-wrapper"> 36 <a href="#" class="btn signup">新規登録はこちら</a> 37 <p>or</p> 38 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 39 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 40 </div> 41 </div> 42 </div> 43 <!--レッスン--> 44 <div class="lesson-wrapper"> 45 <div class="container"> 46 <div class="heading"> 47 <h2>Learn Where to Get Started!</h2> 48 </div> 49 <div class="lessons"> 50 <div class="lesson"> 51 <div class="lesson-icon"> 52 <img src="https://prog-8.com/images/html/advanced/html.png"> 53 <p>HTML & CSS</p> 54 </div> 55 <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 56 </div> 57 <div class="lesson"> 58 <div class="lesson-icon"> 59 <img src="https://prog-8.com/images/html/advanced/jQuery.png"> 60 <p>jQuery</p> 61 </div> 62 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 63 </div> 64 <div class="lesson"> 65 <div class="lesson-icon"> 66 <img src="https://prog-8.com/images/html/advanced/ruby.png"> 67 <p>Ruby</p> 68 </div> 69 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 70 </div> 71 <div class="lesson"> 72 <div class="lesson-icon"> 73 <img src="https://prog-8.com/images/html/advanced/php.png"> 74 <p>PHP</p> 75 </div> 76 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 77 </div> 78 </div> 79 </div> 80 </div> 81 <!--メッセージ--> 82 <div class="message-wrapper"> 83 <div class="container"> 84 <div class="heading"> 85 <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> 86 <h3>Let's learn to code, learn to be creative!</h3> 87 </div> 88 <span class="btn message">さっそく開発する</span> 89 </div> 90 </div> 91 <!--フッター--> 92 <footer> 93 <div class="container"> 94 <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> 95 <p>Learn to code, learn to be creative.</p> 96 </div> 97 </footer> 98 </body> 99</html>
styleCSS
1コード* { 2 box-sizing: border-box; 3} 4 5body { 6 margin: 0; 7 font-family: "Hiragino Kaku Gothic ProN"; 8} 9 10a { 11 text-decoration: none; 12} 13 14.container { 15 max-width: 1170px; 16 width: 100%; 17 padding: 0 15px; 18 margin: 0 auto; 19} 20 21.top-wrapper { 22 padding: 180px 0 100px 0; 23 background-image: url(https://prog-8.com/images/html/advanced/top.png); 24 background-size: cover; 25 color: white; 26 text-align: center; 27} 28 29.top-wrapper h1 { 30 opacity: 0.7; 31 font-size: 45px; 32 letter-spacing: 5px; 33} 34 35.top-wrapper p { 36 opacity: 0.7; 37} 38 39.btn-wrapper { 40 text-align: center; 41 margin: 20px 0; 42} 43 44.btn-wrapper p { 45 margin: 10px 0; 46} 47 48.signup { 49 background-color: #239b76; 50} 51 52.facebook { 53 background-color: #3b5998; 54 margin-right: 10px; 55} 56 57.twitter { 58 background-color: #55acee; 59} 60 61.btn { 62 padding: 8px 24px; 63 color: white; 64 display: inline-block; 65 opacity: 0.8; 66 border-radius: 4px; 67 text-align: center; 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 margin-right: -25px; 99} 100 101.header-right a { 102 line-height: 65px; 103 padding: 0 25px; 104 color: white; 105 display: block; 106 float: left; 107 transition: all 0.5s; 108} 109 110.header-right a:hover { 111 background-color: rgba(255, 255, 255, 0.3); 112} 113/*レッスン*/ 114.lesson-wrapper { 115 padding-bottom: 80px; 116 padding-left: 5%; 117 padding-right: 5%; 118 background-color:#959; 119 text-align: center; 120} 121 122.heading { 123 padding-top: 80px; 124 padding-bottom: 50px; 125 color: #5f5d60; 126} 127 128.heading h2 { 129 font-weight: normal; 130} 131 132.lesson { 133 float: left; 134 width: 25%; 135} 136 137.lesson-icon { 138 position: relative; 139} 140 141.lesson-icon p { 142 position: absolute; 143 top: 44%; 144 width: 100%; 145 color: white; 146} 147 148.text-contents { 149 width: 80%; 150 display: inline-block; 151 margin-top: 15px; 152 font-size: 13px; 153 color: #b3aeb5; 154} 155/*メッセージ*/ 156.heading h3 { 157 font-weight: normal; 158} 159 160.message-wrapper { 161 border-bottom: 1px solid #eee; 162 padding-bottom: 80px; 163 text-align: center; 164} 165 166.message { 167 padding: 15px 40px; 168 background-color: #5dca88; 169 cursor: pointer; 170 box-shadow: 0 7px #1a7940; 171} 172 173.message:active { 174 position: relative; 175 top: 7px; 176 box-shadow: none; 177} 178 179footer img { 180 width: 125px; 181} 182 183footer p { 184 color: #b3aeb5; 185 font-size: 12px; 186} 187 188footer { 189 padding-top: 30px; 190 padding-bottom: 20px; 191} 192 193/* -------------------- CSSはここから追加していきましょう！ -------------------- */ 194.fa-bars{ 195 display:none; 196} 197
responsiveCSS
1コード/* タブレット向けレイアウト */ 2@media all and (max-width: 1000px) { 3 .top-wrapper h1{ 4 font-size:32px; 5 } 6 .lesson-wrapper h2{ 7 font-size:20px; 8 } 9 .lesson{ 10 width:50%; 11 } 12 .lesson .text-contents{ 13 margin-bottom:50px; 14 } 15} 16 17/* モバイル向けレイアウト */ 18@media all and (max-width: 670px) { 19 .header-right{ 20 display:none; 21 } 22 .fa-bars{ 23 display:block; 24 color:white; 25 font-size:25px; 26 float:right; 27 padding:21px 0; 28 } 29 .top-wrapper{ 30 text-align:left; 31 } 32 .top-wrapper h1{ 33 font-size:24px; 34 } 35 .top-wrapper p{ 36 font-size:14px; 37 } 38 .signup,.facebook,.twitter{ 39 width:100%; 40 } 41 .facebook{ 42 margin-bottom:10px; 43 } 44 .lesson{ 45 width:100%; 46 } 47}
●質問内容
styleCSSの/レッスン/直下のbackground-color:#959;の部分がlesson-wrapper全体に反映しなくて困ってます。どう改善したらよいでしょうか。
回答1件
0
ベストアンサー
こちらを追加してみてください。
float: left;を使う横並びの場合、clear: both;を指定しないと親要素の高さが潰れてしまいます。
.lessons::after { content: ""; display: block; clear: both; }
参考:
https://handywebdesign.net/2017/11/two-ways-to-recognize-a-height-of-floating-object/
投稿2020/03/20 14:02
総合スコア4528
あなたの回答
tips
プレビュー
