前提・実現したいこと
画像が小さくなってしまう
progateの中級道場コース3がわかりません
発生している問題・エラーメッセージ
エラーメッセージ
HTML
1<div class="main-wrapper"> 2 <div class="container"> 3 <div class="heading"> 4 <h2>Learn Where to Get Started!!</h2> 5 </div> 6 <div class="lessons"> 7 <div class="lesson"> 8 <div class="lesson-icon"> 9 <img src="https://prog-8.com/images/html/advanced/html.png" /> 10 <p>HTML & CSS</p> 11 </div> 12 <p class="text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 13 </div> 14 <div class="lesson"> 15 <div class="lesson-icon"> 16 <img src="https://prog-8.com/images/html/advanced/jQuery.png" /> 17 <p>jQuery</p> 18 </div> 19 <p class="text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> 20 </div> 21 <div class="lesson"> 22 <div class="lesson-icon"> 23 <img src="https://prog-8.com/images/html/advanced/ruby.png" /> 24 <p>Ruby</p> 25 </div> 26 <p class="text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> 27 </div> 28 <div class="lesson"> 29 <div class="lesson-icon"> 30 <img src="https://prog-8.com/images/html/advanced/php.png" /> 31 <p>PHP</p> 32 </div> 33 <p class="text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> 34 </div> 35 </div> 36 </div> 37 </div>
.main-wrapper{ text-align:center; height:580px; background-color:#f7f7f7; } .heading{ padding-top: 80px; padding-bottom: 50px; color: #5f5d60; } .heading h2{ font-weight: normal; } .lesson{ float:left; width:25%; } .lesson-icon { position:relative; } .lesson-icon p{ position:absolute; top:44%; width:100%; color:white } .text{ font-size:13px; color:#b3aeb5; width:80%; padding-top:15px; display:inline-block; }
試したこと
各要素のWidthを変えた
box-sizing:border-boxを使った
答えを写す
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー