Q&A
width・height属性は、実数のみ以外を入れてはいけないルールなので、（単位付き数値もだめ）CSSで大きさを調整します。
→height: auto;
width: 100%;
autoや％は 『実数のみ以外を入れてはいけないルールなので、（単位付き数値もだめ』
に反しているんでは？とよく分からないです。
検索して調べてみましたが、それはhtmlでの記述する際の事ですか？
progateの中級道場コース（お手本のサイトを目指して、いちから自分で作るコース）に取り組んでいて分からなくなりました。
画像の左上にあるprogate（これは画像の要素です）のサイズを見本のように縮小したいです。
自分で調べた事
グーグルで 画像サイズ 縮小するには cssと検索し、どうやらwidthがキーになっている事がわかりました。
リンク内容
そのため、要素の検証で画像のwidthを確認し、自分のcssも見たところ124pxで相違なかった。
何が原因なのか分からないです。教えて下さい。
html
1コード 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <title>Progate</title> 7 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 8 <!-- ここでFont Awesomeを読み込んでください --> 9 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 10</head> 11<body> 12 <!-- ここにコードを書いていきましょう --> 13 <header> 14 <div class="container-header"> 15 <div class="header-left"> 16 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 17 </div> 18 <div class="header-right"> 19 <a href="#" clacc="log">ログイン</a> 20 </div> 21 </div> 22 23 24 </header> 25 <div class="top-wrapper"> 26 <div class="container"> 27 <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> 28 <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 29 <a href="#" class="btn sign-up">新規登録はこちら</a> 30 <p>or</p> 31 <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> 32 <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> 33 </div> 34 </div> 35 36</body> 37</html>
css
1コード 2/* CSSのリセット（消さないでください） */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9 10body { 11 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 12} 13 14li { 15 list-style: none; 16} 17 18a { 19 text-decoration: none; 20} 21 22/* ここからCSSを書いていきましょう */ 23.container-header{ 24 display:inline-block; 25 background-color:rgba(34, 49, 52, 0.9); 26 width:1280px; 27 height:65px; 28} 29.header-left{ 30 margin-top:20px; 31 width:124px; 32 position:relative;left:60px; 33} 34.header-right{ 35 padding-bottom:304px; 36 37} 38 39 40.top-wrapper{ 41 height:580px; 42 width:1280px; 43 background-image:url(https://prog-8.com/images/html/advanced/top.png); 44 background-size:cover; 45 text-align:center; 46 47} 48.container h1{ 49 font-size:45px; 50 opacity:0.7; 51 letter-spacing:5px; 52 color:white; 53 font-weight:bold; 54 padding-top:170px; 55} 56.container p{ 57 font-size:16px; 58 margin-bottom:30px; 59 color:white; 60 opacity:0.7; 61} 62.btn{ 63 padding:8px 24px; 64 color:white; 65 opacity:0.8; 66 border-radius:4px; 67} 68 69 70 71.sign-up{ 72 background-color:#239b76; 73 margin:30px 0px 15px 0; 74 75 76} 77.facebook{ 78 background:#3b5998; 79 margin-right:10px; 80 margin-bottom:100px; 81 margin-top:15px; 82} 83.twitter{ 84 background:#55acee; 85}
追記
回答から 改善したコードと画像
css
1コード 2/* CSSのリセット（消さないでください） */ 3html, body, 4ul, ol, li, 5h1, h2, h3, h4, h5, h6, p, div { 6 margin: 0; 7 padding: 0; 8} 9img{ 10 max-width:100%; 11 height:auto; 12} 13 14body { 15 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 16} 17 18li { 19 list-style: none; 20} 21 22a { 23 text-decoration: none; 24} 25 26/* ここからCSSを書いていきましょう */ 27.container-header{ 28 display:inline-block; 29 background-color:rgba(34, 49, 52, 0.9); 30 width:1280px; 31 height:65px; 32} 33.header-left{ 34 margin-top:20px; 35 width:124px; 36 position:relative;left:60px; 37} 38 39.logo{ 40 width:124px; 41 height:auto; 42} 43 44 45 46.header-right{ 47 padding-bottom:304px; 48} 49 50 51.top-wrapper{ 52 height:580px; 53 width:1280px; 54 background-image:url(https://prog-8.com/images/html/advanced/top.png); 55 background-size:cover; 56 text-align:center; 57 58} 59.container h1{ 60 font-size:45px; 61 opacity:0.7; 62 letter-spacing:5px; 63 color:white; 64 font-weight:bold; 65 padding-top:170px; 66} 67.container p{ 68 font-size:16px; 69 margin-bottom:30px; 70 color:white; 71 opacity:0.7; 72} 73.btn{ 74 padding:8px 24px; 75 color:white; 76 opacity:0.8; 77 border-radius:4px; 78} 79 80 81 82.sign-up{ 83 background-color:#239b76; 84 margin:30px 0px 15px 0; 85 86 87} 88.facebook{ 89 background:#3b5998; 90 margin-right:10px; 91 margin-bottom:100px; 92 margin-top:15px; 93} 94.twitter{ 95 background:#55acee; 96}
回答4件
0
ベストアンサー
提示されたコードを見ると
html
1... 2 3 <div class="header-left"> 4 <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> 5 </div> 6...
css
1... 2 3.header-left{ 4 margin-top:20px; 5 width:124px; 6 position:relative;left:60px; 7} 8...
こうなっていますから、幅が124pxになっているのは<div>要素のほうですね。中の<img>要素までこの幅になるわけではないです。
ですから、miyabi_takatsukさんがおっしゃるように.logoクラスの幅を100% (これは大まかに言うと、外側の要素の幅を基準に100%の幅という意味です) にするか、見本のように.logoクラスに対して幅を指定します (下記)。
css
1.logo { 2 width: 124px; 3}
投稿2019/05/17 12:31
編集2019/05/17 12:33
総合スコア4443
0
yasutomiさんの言う通りです。
img要素は、width・heightで大きさを指定していない+CSSで大きさを指定していない時、
大きさは、画像本来の大きさで表示されます。
なので、.logoに対して、親と同じ大きさにしたいのであれば、
下記のようにします。
（今回は、widthが基準のようなので、下記になります。）
css
1.logo { 2 height: auto; 3 width: 100%; 4}
imgの、width属性に100%、height属性にautoでも効くっちゃ動くっちゃ動きますが、
width・height属性は、実数のみ以外を入れてはいけないルールなので、（単位付き数値もだめ）CSSで大きさを調整します。
投稿2019/05/17 12:11
編集2019/05/17 12:12
総合スコア9555
回答にも記載しておりますが、ブラウザ上の表示上、その通りに動きますが、HTMLのルール上ダメってことです。
ダメなのは、imgに対しての属性の指定上がダメなのであって、
CSSでの割り当ては、100%、autoも指定は可能って話です。
属性に関しては、HTMLの話ではとても重要になるので、なんなのかは、よく調べていただければと思います。
理解出来ました。
ありがとうございました。
0
キャプチャのchromeのデベロッパーツール見たんですが、img.logoが、div.header-leftの中に入っていない気がします。
htmlを見直して、閉じタグが抜けてないかなどチェックしてみてください。
また、画像が枠をはみ出す問題はよくある事なので、プロジェクト毎にリセットcssに下記を追加しておくことをオススメします。これで画像が親要素をはみ出ることはなくなるでしょう。
img { max-width: 100%; height: auto; }
投稿2019/05/17 14:07
総合スコア257
画像が枠をはみ出す問題はよくある事なので、プロジェクト毎にリセットcssに下記を追加しておくことをオススメします。これで画像が親要素をはみ出ることはなくなるでしょう。
→ためになります。ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/18 04:17