投稿2020/07/04 14:55
Progateの模写をしています。
lessonの中のlesson-iconを左にfloatさせたいのですが、lesson-iconにfloatを設定するとtxt-contentsと分裂してしまい、レイアウトが崩れてしまったので、lesson-iconと<p>とtxt-contentsを囲うlessonタグを作ったらレイアウト崩れせずにfloatが設定できると思ったのですが、floatが設定できません。どうやったら設定できるようになるのでしょうか。
コードを下記のとおりです。
基本的なことで大変恐縮ですが、ご回答お願い致します。
HTML
1<html> 2 <head> 3 <mata charset="utf-8"> 4 <title>Progate</title> 5 <link rel="stylesheet" href="stylesheet.css"> 6 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 7 </head> 8 <body> 9 <header> 10 <div class="header-left"> 11 <img class="logo" src="img/main_logo.png"> 12 </div> 13 <div class="header-right"> 14 <a href="#">レッスン</a> 15 <a href="#">新規登録</a> 16 <a href="#">ログイン</a> 17 </div> 18 </header> 19 <div class="top-wrapper"> 20 <div class="container"> 21 <h1>LEARN TO CODE.</h1> 22 <h1>LEARN TO BE CREATIVE.</h1> 23 <p>progateはオンラインプログラミング学習サービスです。<br> 24 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 25 </div> 26 <div class="btn-wrapper"> 27 <a class="btn signup"><span></span>新規登録はこちら</a> 28 <p>or</p> 29 <a class="btn facebook"><span class="fab fa-facebook-f"></span>Facebookで登録</a> 30 <a class="btn twitter"><span class="fab fa-twitter"></span>Twitterで登録</a> 31 </div> 32 </div> 33 <div class="lesson-wrapper"> 34 <div class="heading"> 35 <h2>Learn Where to Get Started!</h2> 36 </div> 37 <div class="lessons"> 38 <div class="lesson"> 39 <div class="lesson-icon"> 40 <img src="img/html.png"> 41 <p>HTML & CSS</p> 42 </div> 43 <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> 44 </div> 45 <div class="lesson"> 46 <div class="lesson-icon"> 47 <img src="img/jQuery.png"> 48 <p>jQuery</p> 49 </div> 50 <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> 51 </div> 52 </div> 53 </div> 54 </body> 55</html>
CSS
1* { 2 margin:0; 3} 4 5header { 6 background-color: rgba(34,49,52,0.9); 7 height:65px; 8} 9 10.container { 11 width: 1170px; 12 padding: 0 15px; 13 margin: 0 auto; 14} 15 16.logo { 17 width:124px; 18 padding:20px 10px; 19 float:left; 20} 21 22.header-right { 23 float: right; 24 line-height: 65px; 25} 26 27.header-right a { 28 display: inline-block; 29 padding: 0 24px; 30 color: white; 31 text-decoration: none; 32} 33 34.header-right a:hover { 35 background-color: rgba(255,255,255,0.5); 36} 37 38.top-wrapper { 39 background-image: url(img/top.png); 40 background-size: cover; 41 text-align: center; 42 padding: 180px 0 100px 0; 43 color: white; 44} 45 46.container h1 { 47 letter-spacing: 5px; 48 font-size: 45px; 49 opacity: 0.7; 50} 51 52.container p { 53 opacity: 0.7; 54 padding-top: 20px; 55} 56 57.btn { 58 padding: 8px 24px; 59 display: inline-block; 60 border-radius: 4px; 61 opacity: 0.8; 62 transition: all 0.5s; 63} 64 65.btn:hover { 66 opacity: 1; 67} 68 69.btn-wrapper { 70 padding-top: 40px; 71} 72 73.btn-wrapper p { 74 margin: 15px 0; 75} 76 77.signup { 78 background-color: darksalmon; 79} 80 81.facebook { 82 background-color: rgb(153,51,153); 83 margin-right: 10px; 84} 85 86.twitter { 87 background-color: rgb(153,153,255); 88} 89 90.fab { 91 margin-right: 5px; 92} 93 94.lesson { 95 float: left; 96}
回答1件
0
ベストアンサー
ソースがまるなげすぎるのと、要件があいまいでどこの何が問題なのかわかりません。
思い切りふかよみしてたとえばlessonに適当なwidthを設定するとか・・・
css
1.lesson { 2 width:30%; 3 float: left; 4} 5
投稿2020/07/04 15:21
総合スコア114843
あなたの回答
tips
プレビュー
Q&A
