Q&A
回答と比較する機能などはありませんか？
コード ```### 前提・実現したいこと ここに質問の内容を詳しく書いてください。 （例）PHP(CakePHP)で●●なシステムを作っています。 ■■な機能を実装中に以下のエラーメッセージが発生しました。 ### 発生している問題・エラーメッセージ
ProgateのHTML&CSSコースの道場コース（中級編）がクリアできません。
正誤判定をすると添付した画像のように誤差が生まれてしまいます。
### 該当のソースコード ```ここに言語名を入力 HTML CSS
試したこと
答えのCSSコードと見比べてみましたが、違いは見つけられませんでした。
よーく見比べてみるとそもそものサイトの幅？が違うような気がして、それが原因かと思いましたが改善方法もわからず詰んでしまいました。
補足情報（FW/ツールのバージョンなど）
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <!-- ここでFont Awesomeを読み込んでください --> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10<body> 11 <!-- ここにコードを書いていきましょう --> 12 <header> 13 <img class="title-logo" src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" /> 14 <a class="login" href="#">ログイン</a> 15 </header> 16 17 <div class="main"> 18 <h1 class="title">LEAN TO CODE.</h1> 19 <h1 class="title">LEAN TO BE CREATIVE.</h1> 20 <p class="sub-title">Progateはオンラインプログラミング学習サービスです。</p> 21 <p class="sub-title">初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 22 <div class="sign-up"> 23 <a class="new sign-up" href="#">新規登録はこちら</a> 24 <p>or</p> 25 <a class="sign-up facebook" href="#">Facebookで登録</a> 26 <a class="sign-up twitter" href="#">Twitterで登録</a> 27 </div> 28 </div> 29 <div class="lesson-wrapper"> 30 <div class="heading"> 31 <h2 class="container">Lean Where to Get Started!</h2> 32 </div> 33 <div class="lessons"> 34 <div class="lesson"> 35 <div class="lesson-icon"> 36 <img src="https://prog-8.com/images/html/advanced/html.png" alt="" /> 37 <p>HTML & CSS</p> 38 </div> 39 <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 40 </div> 41 <div class="lesson"> 42 <div class="lesson-icon"> 43 <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" /> 44 <p>jQuery</p> 45 </div> 46 <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 47 </div> 48 <div class="lesson"> 49 <div class="lesson-icon"> 50 <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="" /> 51 <p>Ruby</p> 52 </div> 53 <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 54 </div> 55 <div class="lesson"> 56 <div class="lesson-icon"> 57 <img src="https://prog-8.com/images/html/advanced/php.png" alt="" /> 58 <p>PHP</p> 59 </div> 60 <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 61 </div> 62 </div> 63 </div> 64 65</body> 66</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を書いていきましょう */ 22header { 23 background-color :rgba(34,49,52,0.9); 24 height : 64px; 25 width : 100%; 26 position : fixed; 27 z-index : 10; 28} 29.title-logo { 30 width : 124px; 31 margin : 20px 20px 20px 50px; 32} 33.login { 34 text-decoration :none; 35 color : #fff; 36 line-height : 65px; 37 float : right; 38 background-color : rgba(255,255,255,0.3); 39 padding :0 25px; 40 margin-right : 50px; 41 display : block; 42} 43 44.main { 45 background-image : url(https://prog-8.com/images/html/advanced/top.png); 46 text-align : center; 47 background-size : cover; 48 padding : 180px 0 100px 0; 49} 50.title { 51 font-size : 45px; 52 letter-spacing : 5px; 53 color : #fff; 54 opacity : 0.7; 55} 56.sub-title { 57 color : #fff; 58 opacity : 0.7; 59} 60.sign-up { 61 text-decoration : none; 62 color : #fff; 63 display : inline-block; 64 padding : 8px 24px; 65 border-radius : 8px; 66} 67.new { 68 background-color : #239b76; 69 opacity : 0.8; 70 margin-top : 30px; 71} 72.facebook { 73 background-color : #3b5998; 74 opacity : 0.8; 75 margin-right : 10px; 76} 77.twitter { 78 background-color : #55acee; 79 opacity : 0.8; 80} 81.sign-up p { 82 margin : 10px; 83} 84.lesson-wrapper { 85 height : 580px; 86 background-color : #f7f7f7; 87 text-align : center; 88} 89.container { 90 font-weight : normal; 91 padding : 80px 0 50px 0; 92 color : #5f5d60; 93} 94.lesson { 95 width : 25%; 96 float : left; 97} 98.lesson-icon { 99 position : relative; 100} 101.lesson-icon p { 102 position : absolute; 103 width : 100%; 104 top : 44%; 105 color : #fff; 106} 107.text-contents { 108 display : inline-block; 109 width : 80%; 110 margin-top : 15px; 111 font-size : 13px; 112 color : #b3aeb5; 113} 114
回答2件
0
ベストアンサー
遅くなってしまい申し訳ないです。
確実なことではないですが、
css
1.lesson { 2 width : 25%; ←これは指定の幅に対して４つの要素が２５％ずつに割り当てられる。 3 float : left; 4}
添付していただいた画像を拝見すると、htmlの<lesson-wrapper>か<lessons>に幅の指定があるのではないのでしょうか？現状はwidth１００％の適応になっていると思います。
例えば、widthが100%であれば100%の幅に一つの要素が２５％ずつ割り当てられる。
極端ですが、１０００PXのwidthであれば１０００pxの中に２５％ずつ要素につきます。
もし指定があるのならばそれに従って下さい！(widthが１０００pxの場合)
css
1.lesson-wrapper { 2 width : 1000px; 3} 4 5.lesson { 6 width : 25%; 7 float : left; 8}
このようにすると並んでいる画像が少し縮小されることになります。
わかりずらい場合はおっしゃって下さい。詳しく説明します！！
投稿2020/06/12 03:34
編集2020/06/12 03:43
総合スコア72
あなたの回答
tips
プレビュー
