Q&A
どうなるつもりがどうなっているのでしょうか。
元画像も提示されないと手元で再現不可です。
表題の通り、画像が小さくなってしまい、widthが反応していないため質問いたしました。
やったこと
「width 画像」「画像小さい コード」などで検索しましたが、解決策が見つかりませんでした。
Develop TOOLでは、エラーが表示されていません。
Develop TOOLでwidth,height を指定すると、画像サイズが変わりますが、
vscodeでは変更されないため、class名の間違いかな？とも思い確認しましたがミスはなさそうです
追記です。
画像が小さくなります。
画像は、
1<img src="./image/fv-bgi_01@2x.jpg" alt="">
2 <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ">
です。
Develop TOOLでも調べましたが解決に至っていません。
Develop TOOLでは、エラーが表示されていません。
Develop TOOLでwidth,height を指定すると、画像サイズが変わりますが、
vscodeでは変更されないため、class名の間違いかな？とも思い確認しましたがミスはなさそうです
以下 コードです.何卒よろしくお願いいたします。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>中級編</title> 8 <link rel="stylesheet" href="css/destyle.css"> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11<body> 12 <!--ヘッダー--> 13 14 <header class="header"> 15 <div class="header-inner"> 16 <div class="header-wrapper"> 17 <div id="logo"> 18 <p> Design</p> 19 </div> 20 <nav class="nav"> 21 <ul class="header-list"> 22 <li class="list-item"><a href="#">Concept</li></a> 23 <li class="list-item"><a href="#">Service</li></a> 24 <li class="list-item"><a href="#"> Works</li></a> 25 <li class="list-item"><a href="./concept">Contact</li></a> 26 </ul> 27 </nav> 28 </div> 29 30 <div class="image-inner"> 31 <div class="main-image"> 32 <img src="./image/fv-bgi_01@2x.jpg" alt=""> 33 </div> 34 <div class="image-message"> 35 <p>Design for Smile.快適なオフィスをデザインする</p> 36 </div> 37 </div> 38 </div> 39 </header> 40 41 42 <!----> 43 44<!--メイン--> 45 <main class="main"> 46 <!--コンセプト--> 47 <section class="concept"> 48 <h2 class="sub-title">CONCEPT</h2> 49 <div class="section-inner"> 50 <p class="message"> 51 “働きたくなる空間”をデザインすることで <br> 52 人々を幸せにする。" 53 </p> 54 <div class="explain"> 55 <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を 56 幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて 57 いただきます。 58 </p> 59 <div class="concept-image"> 60 <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ"> 61 </div> 62 63 </div> 64 <div class="section-bottom">Our concept </div> 65 </div> 66 67 68 </section> 69<!----> 70<!--Works--> 71 <section class="works"> 72 <div class="sub-title">Works</div> 73 <ul class="works-list"> 74 <li class="works-item"> 75 <a href="#"> 76 <p class="works-text"> 77 新規サイトを公開しました。今回のサイトは <br> 78 白と黒を基調にしたミニマルなデザインに <br> 79 なっています。 80 </p> 81 </a> 82 <div class="works-image"><img src="image/card-img01@2x.jpg" alt=""></div> 83 </li> 84 <li class="works-item"> 85 <a href="#"> 86 <p class="works-text"> 87 新規サイトを公開しました。今回のサイトは <br> 88 白と黒を基調にした 89 </p> 90 </a> 91 <div class="works-image"><img src="image/card-img02@2x.jpg" alt=""></div> 92 </li> 93 <li class="works-item"> 94 <a href="#"> 95 <p class="works-text"> 96 新規サイトを公開しました。今回のサイトは <br> 97 白と黒を基調にしたミニマルなデザインに <br> 98 なっています。 99 </p> 100 </a> 101 <div class="works-image"><img src="image/card-img03@2x.jpg" alt=""></div> 102 </li> 103 </ul> 104 <div class="works-link cmn-link"> 105 <a href="#"> 106 <p>View more</p> 107 </a> 108 </div> 109 110 <div class="section-bottom">Our works </div> 111 </section> 112<!----> 113 114<!--Service--> 115 <section class="service"> 116 <h2 class="sub-title">Service</h2> 117 <ul class="service-list"> 118 <li class="service-item"><a href="#">Hearing</a></li> 119 <li class="service-item"><a href="#">Planning</a></li> 120 <li class="service-item"><a href="#">Direction</a></li> 121 </ul> 122 123 <div class="section-bottom">Our service </div> 124 </section> 125<!----> 126<!--Contact--> 127<section class="contact"> 128 <h2 class="sub-title">Contact</h2> 129 <div class="contact-inner"> 130 <p class="contact-text">お気軽にご相談ください。</p> 131 <a href="./contact" class="cmn-link">Contact</a> 132 <div class="section-bottom">Our contact </div> 133 </div> 134</section> 135<!----> 136 137 </main> 138<!--メイン--> 139 140 141<footer class="footer"> 142 <small>© .design all rights reserved</ｓ> 143</footer> 144</body> 145</html>
general.scss
1html{ 2 font-size: 62.5%; 3} 4body{ 5 max-width: 1440px; 6 max-height: 752px; 7 background-color: #fff; 8 9 font-size: 1.6rem; 10 letter-spacing: .05em; 11 color: #171717; 12 font-family: 'Noto Serif' 'Noto Serif JP' serif; 13 14} 15 16img{ 17 width: 100%; 18 height: auto; 19 vertical-align: bottom;/*余白ができるから指定する*/ 20 21} 22 23a{ 24 text-decoration: none; 25} 26 27 28/*共通項*/ 29.section-wrapper{ 30 padding: 100px 0px 70px; 31 32} 33 34.sub-title{ 35 max-width: 1000px; 36 color: #282f35; 37 font-size: 6rem; 38 font-style: italic; 39 margin: 0 auto 80px; 40 padding: 0 20px; 41 42 43} 44 45/*擬似要素*/ 46.sub-title::after{ 47 content: ""; 48 display: inline-block; 49 background-color: #282f35; 50 width: 200px; 51 height: 5px; 52 margin-left: 30px; 53 vertical-align: middle;/*線を中央揃え*/ 54 color: #282F35; 55 56} 57 58 59.section-bottom{ 60 max-width: 1200px; 61 margin: 0 auto; 62 font-size: 9rem; 63 opacity: .05; 64 65 66} 67/*ボタン*/ 68.cmn-link{ 69 width: 235px; 70 line-height: 60px; 71 margin: 0 auto 70px; 72 background-color: #F7D43F; 73 border: 0px 0px 6px #1b1310; 74 box-shadow: #1B1310; 75 border-radius: 30px; 76 text-align: center; 77 color: #171717; 78 font-weight:bold ; 79 text-decoration: none; 80 transition: .3s; 81 82 83} 84 85.cmn-link:hover{ 86 opacity: .7; 87 transition: .3s; 88 } 89 90
header.scss
1.header{ 2 padding: 19px 30px; 3 4 width: 183px; 5 height: 35px; 6 box-sizing: border-box; 7 8} 9 10.header-inner{ 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 position: relative; 15 max-width: 1200px; 16 margin: 0 auto; 17 18} 19 20.header-wrapper{ 21 display: flex; 22 justify-content: space-between; 23 align-items: center; 24 position: absolute; 25 top: 0; 26 left: 0; 27 right: 0; 28 z-index: 1; 29 30 31 32 #logo{ 33 margin-left: 120px; 34 margin-top: 19px; 35 font-family: 'Noto Serif'; 36 >p{ 37 font-size: 26px; 38 } 39 40 } 41 42 .header-list{ 43 display: flex; 44 justify-content: flex-end; 45 align-items: center; 46 margin-right: 120px; 47 .list-item{ 48 49 50 51 text-transform: uppercase; 52 font-size: 16px 53 } 54 } 55} 56 57 58
concept.scss
1.concept{ 2 margin: 10rem 12rem 7rem 22rem; 3 4} 5 6.section-inner{ 7 text-align: center; 8 .message{ 9 10 font-size: 3rem; 11 //margin: 110.5px 420px ; 12 } 13} 14 15.explain{ 16 display: flex; 17 justify-content: space-around; 18 19 .text{ 20 display: block; 21 22 } 23 .concept-image{ 24 width: 440px; 25 height: 240px; 26 margin-top: 60px; 27 28 29 } 30 31 32}
> 表題の通り、画像が小さくなってしまい
よく分かりませんが、widthを変更しても画像の大きさが変わらない、ということでしょうか？
どの画像のことを指していますか？
失礼いたしました。
画像が小さくなります。
日本語がおかしくなり、申し訳ございません。
画像は、
1<img src="./image/fv-bgi_01@2x.jpg" alt="">
2 <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ">
です。Develop TOOLでも調べましたが解決に至っていません。
Develop TOOLでは、エラーが表示されていません。
Develop TOOLでwidth,height を指定すると、画像サイズが変わりますが、
vscodeでは変更されないため、class名の間違いかな？とも思い確認しましたがミスはなさそうです
ご提示のコードで
<img src="./image/fv-bgi_01@2x.jpg" alt="" style="width:500px">
などとしたところ、問題なく画像が大きくなりました。
ご提示いただいていない部分に原因があると思われます。
Lhankor _Mhyさん、ご回答ありがとうございます。
2021年から、htmlにwidth,heightを指定する方法を推奨される記事をみましたが、
画像 widthなどはCSSにかくのではなく、htmlに書いた方がいいのでしょうか？
ここでは、CSSに書いたにも関わらず、変わらなかったため、質問させていただきました????
> 2021年から、htmlにwidth,heightを指定する方法を推奨される記事
興味があるので良ければ教えてください。
img{
width:1000px;
}
としたところ、やはり画像が大きくなったので、ご提示いただいていない部分に原因があると思われます。
https://t.co/rNTXl67sZ7
記事はこちらです。2020年夏でした。
今、外出中のため、今晩にフォルダーお送りしたいと思います。もし、可能でしたら改めて添削していただける幸いです
よろしくお願いします。m(_ _)m
ありがとうございます。
サイズの指定はCSSでして構わないのですが、属性を書いておくとアスペクト比が画像読み込み前に確定するので……という記事ですね。
なお、先ほど私が書いたstyle属性に書くやり方では、この記事のような効果は出ないです。
cssと書かれていますがコードを見るとネストが見られるので素のcssではないですよね？
CSSではないですね。フォルダーをzipファイルでお送りいたします。
何卒よろしくお願いいたします。m(__)m
https://18.gigafile.nu/0612-c087dd5d4758dae7c57e5eb7d0430a15d
フォルダーはこちらになります。お手数をおかけしますが、よろしくお願いいたします。
やはり、
img{
width:1000px;
}
としたところ、画像が大きくなりましたので、問題が確認できませんでした。
再現する手順を具体的に書いていただいた方がいいと思います。
再現する手順は、よくわかりません。
手順を考えたことがないからです（苦笑）
上から順番にコードを書いていました。
私は今回Saasでコードを書いています。
初めに、サイトの共通点を洗い出し,general.scssにコードを書いて
その後
headerもうまく反映されないので、先に飛ばし、
conceptやworkなどの中身を先に書こうと思っています。
そう難しく考える必要はないです。
「再現する手順」とは、「widthが反応していない」という問題をどうやって確認するのか、ということです。私は問題を確認できなかったのですが、free_tekuさんはどのようにして確認したのか、ということをお聞きしています。
ご返信ありがとうございます。
「widthが反応していない」という問題ですが、[vccode]のheader.scssとwork.scssそれぞれのimgにwidthとheightを設定したところ、反応されませんでした。そのため、反応しないと記しました。
※Develop Toolではきちんと反映されるため、何が原因なのか分からずにいたため、ここで質問させていただきました。
Develop Toolもvscodeでもエラーは出ていません。
こういった背景があります。何卒宜しくお願い致します。m(__)m
コンパイルは成功していますか？
成功しています。
Watch saasはサクセスになっています。
style.css に変更した部分は出力されていますか？
出力されています
workにbg-color: aquaにしたら、出力されました。
_works.scss はどこから import してるんですか？
contentsの中にある_work.scssは「style.scss」からimportしています。
頂いたファイルにはそれがないので、どうやら私たちは別のものを試しているようですね。結果が異なるのも仕方がありません。
おそらく、こちらにいただいていない部分に原因があるのだと思われます。
たぶん、コンパイルの問題だと思いますので、いろいろお試しになるのがいいのではないかな、と思いますよ。
https://32.gigafile.nu/0615-dc4c84e304cb759c9cfdb79f6e5a5727f
↑新しいデータです。
※以前のデータを
確認したところ、work.scssはありましたが、style.scssには書いてありませんでした。失礼いたしました。
また今回の件はheader.scssとconcept.scssについての画像ですが、どちらもコンパイルされてるようです。reset.cssを新しくdestyle.cssにしたのですが、こちらが間違っているのでしょうか？
あまり良くないrecet.style.cssですか？
頂いたコードで試してみましたが、_works.scss の末尾に
img {
width: 1000px;
}
を追加したところ、画像が大きくなりました。
推測ですが、やはりコンパイルの問題だと思います。
ありがとうございます。
Conceptの画像は解決できました。
文字へのwidth: 440px; を設定したところ、うまくできました。Conceptでmax-widthを設定したがために
小さくなったのだと思います。
Lhankor_Mhyさんは
いつも、親身に向き合っていただき、嬉しいです。
ありがとうございます。m(__)m
あなたの回答
tips
プレビュー
