下の画像の見本のように画像を改行されず一列で配置したいです。
自分の書いたコードが下です.
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 </head> 8 <body> 9 <!-- ここからHTMLを書き始めてください --> 10 <div class="header"> 11 <div class="header-logo">Progate</div> 12 <div class="header-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20 <div class="main"> 21 <div class="copy-container"> 22 <h1>HELLO WORLD<span>.</span></h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 </div> 25 <div class="contents"> 26 <h3 class="section-title">学べるレッスン</h3> 27 <div class="contents-item"> 28 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> 29 <p>HTML & CSS</p> 30 </div> 31 <div class="contents-item"> 32 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> 33 <p>PHP</p> 34 </div> 35 <div class="contents-item"> 36 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> 37 <p>Ruby</p> 38 </div> 39 <div class="contents-item"> 40 <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> 41 <p>Swift</p> 42 </div> 43 </div> 44 </div> 45 46 </body> 47</html>`` 48 49 50 51```CSS 52コード
/* CSSのリセット(消さないでください) */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* ここからCSSを記述してください */
body{
font-family:"Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
li{
float:left;
}
.header{
color:white;
background-color:#26d0c9;
height:90px;
}
.header-logo{
float:left;
font-size: 36px;
padding:20px 40px;
}
.header-list{
font-size:16px;
padding:33px 20px;
}
.copy-container h1{
white-space:nowrap;
width:820px;
height:562px;
font-size:140px;
font-weight:700;
position:relative;top:100px;left:70px;
}
.copy-container h2{
white-space:nowrap;
width:820px;
height:180px;
font-size:60px;
font-weight:700;
position:relative;top:-280px;left:78px;
}
span{
color:#ff4a4a;
}
.section-title{
border-bottom: 2px solid #dee7ec;
font-size:28px;
padding-bottom:15px;
margin-bottom:50px;
position:relative;top:-360px;left:90px;
}
.contents{
width:820px;
height:500px;
margin-top:100px;
white-space:nowrap;
style="display:inline"
}
.contents-item{
white-space:nowrap;
float:left;
margin-right:40px;
position:relative;top:-360px;left:90px;
}
.contents-item p{
font-size:24px;
margin-top:30px;
}
どこをどう変えたら実現できますか? 自分の中でよくわからない点が2点あります。 余裕のある方は教えて下さい。 1点目、 今、困っているのは画像の改行ですが、先ほどもcssの.copy-container h1,h2の所で、同じ現象が起きました。 その際、white-space:nowrap;と入れたら、改行されていたのが一列で配置されました。 でも、今回はうまく行きませんでした。その理由がわからないです。 2点目、htmlで <div class="header-logo">Progate</div>や<h3 class="section-title">学べるレッスン</h3>みたいに、書く理由がわからないです。 <div class="header-logo">Progate</div>の方は、 自分は、divは要素のまとまりなのだから、今、上に挙げたものの中にはまとまりはないんじゃないかと思うんですが、、、 h3 class="section-title">学べるレッスン</h3>の方は、 いちいちクラス付けなくてもcssで指定する際にh3タグで指定すればいいんじゃないかと思うんですが、、、
回答1件
あなたの回答
tips
プレビュー