質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

画像のwidthが反応しません

free_teku
free_teku

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0回答

-1評価

0クリップ

18閲覧

投稿2021/06/04 17:51

編集2022/01/12 10:55

表題の通り、画像が小さくなってしまい、widthが反応していないため質問いたしました。

やったこと
「width 画像」「画像小さい コード」などで検索しましたが、解決策が見つかりませんでした。

追記です。
デザインです」。

以下 コードです.何卒よろしくお願いいたします。

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中級編</title> <link rel="stylesheet" href="css/destyle.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!--ヘッダー--> <header class="header"> <div class="header-inner"> <div class="header-wrapper"> <div id="logo"> <p> Design</p> </div> <nav class="nav"> <ul class="header-list"> <li class="list-item"><a href="#">Concept</li></a> <li class="list-item"><a href="#">Service</li></a> <li class="list-item"><a href="#"> Works</li></a> <li class="list-item"><a href="./concept">Contact</li></a> </ul> </nav> </div> <div class="image-inner"> <div class="main-image"> <img src="./image/fv-bgi_01@2x.jpg" alt=""> </div> <div class="image-message"> <p>Design for Smile.快適なオフィスをデザインする</p> </div> </div> </div> </header> <!----> <!--メイン--> <main class="main"> <!--コンセプト--> <section class="concept"> <h2 class="sub-title">CONCEPT</h2> <div class="section-inner"> <p class="message"> “働きたくなる空間”をデザインすることで <br> 人々を幸せにする。" </p> <div class="explain"> <p class="text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を 幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させて いただきます。 </p> <div class="concept-image"> <img src="image/concept-image@2x.jpg" alt="コンセプトイメージ"> </div> </div> <div class="section-bottom">Our concept </div> </div> </section> <!----> <!--Works--> <section class="works"> <div class="sub-title">Works</div> <ul class="works-list"> <li class="works-item"> <a href="#"> <p class="works-text"> 新規サイトを公開しました。今回のサイトは <br> 白と黒を基調にしたミニマルなデザインに <br> なっています。 </p> </a> <div class="works-image"><img src="image/card-img01@2x.jpg" alt=""></div> </li> <li class="works-item"> <a href="#"> <p class="works-text"> 新規サイトを公開しました。今回のサイトは <br> 白と黒を基調にした </p> </a> <div class="works-image"><img src="image/card-img02@2x.jpg" alt=""></div> </li> <li class="works-item"> <a href="#"> <p class="works-text"> 新規サイトを公開しました。今回のサイトは <br> 白と黒を基調にしたミニマルなデザインに <br> なっています。 </p> </a> <div class="works-image"><img src="image/card-img03@2x.jpg" alt=""></div> </li> </ul> <div class="works-link cmn-link"> <a href="#"> <p>View more</p> </a> </div> <div class="section-bottom">Our works </div> </section> <!----> <!--Service--> <section class="service"> <h2 class="sub-title">Service</h2> <ul class="service-list"> <li class="service-item"><a href="#">Hearing</a></li> <li class="service-item"><a href="#">Planning</a></li> <li class="service-item"><a href="#">Direction</a></li> </ul> <div class="section-bottom">Our service </div> </section> <!----> <!--Contact--> <section class="contact"> <h2 class="sub-title">Contact</h2> <div class="contact-inner"> <p class="contact-text">お気軽にご相談ください。</p> <a href="./contact" class="cmn-link">Contact</a> <div class="section-bottom">Our contact </div> </div> </section> <!----> </main> <!--メイン--> <footer class="footer"> <small>&copy; .design all rights reserved</s> </footer> </body> </html>

general.scss

html{ font-size: 62.5%; } body{ max-width: 1440px; max-height: 752px; background-color: #fff; font-size: 1.6rem; letter-spacing: .05em; color: #171717; font-family: 'Noto Serif' 'Noto Serif JP' serif; } img{ width: 100%; height: auto; vertical-align: bottom;/*余白ができるから指定する*/ } a{ text-decoration: none; } /*共通項*/ .section-wrapper{ padding: 100px 0px 70px; } .sub-title{ max-width: 1000px; color: #282f35; font-size: 6rem; font-style: italic; margin: 0 auto 80px; padding: 0 20px; } /*擬似要素*/ .sub-title::after{ content: ""; display: inline-block; background-color: #282f35; width: 200px; height: 5px; margin-left: 30px; vertical-align: middle;/*線を中央揃え*/ color: #282F35; } .section-bottom{ max-width: 1200px; margin: 0 auto; font-size: 9rem; opacity: .05; } /*ボタン*/ .cmn-link{ width: 235px; line-height: 60px; margin: 0 auto 70px; background-color: #F7D43F; border: 0px 0px 6px #1b1310; box-shadow: #1B1310; border-radius: 30px; text-align: center; color: #171717; font-weight:bold ; text-decoration: none; transition: .3s; } .cmn-link:hover{ opacity: .7; transition: .3s; }

header.scss

.header{ padding: 19px 30px; width: 183px; height: 35px; box-sizing: border-box; } .header-inner{ display: flex; justify-content: center; align-items: center; position: relative; max-width: 1200px; margin: 0 auto; } .header-wrapper{ display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; right: 0; z-index: 1; #logo{ margin-left: 120px; margin-top: 19px; font-family: 'Noto Serif'; >p{ font-size: 26px; } } .header-list{ display: flex; justify-content: flex-end; align-items: center; margin-right: 120px; .list-item{ text-transform: uppercase; font-size: 16px } } }

concept.scss

.concept{ margin: 10rem 12rem 7rem 22rem; } .section-inner{ text-align: center; .message{ font-size: 3rem; //margin: 110.5px 420px ; } } .explain{ display: flex; justify-content: space-around; .text{ display: block; } .concept-image{ width: 440px; height: 240px; margin-top: 60px; } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2021/06/04 20:17

どうなるつもりがどうなっているのでしょうか。 元画像も提示されないと手元で再現不可です。
meg_
meg_

2021/06/05 00:49

> 表題の通り、画像が小さくなってしまい よく分かりませんが、widthを変更しても画像の大きさが変わらない、ということでしょうか? どの画像のことを指していますか?
free_teku
free_teku

2021/06/05 01:28 編集

失礼いたしました。 画像が小さくなります。 日本語がおかしくなり、申し訳ございません。 画像は、 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名の間違いかな?とも思い確認しましたがミスはなさそうです
Lhankor_Mhy
Lhankor_Mhy

2021/06/05 01:44

ご提示のコードで <img src="\./image/fv-bgi_01@2x\.jpg" alt="" style="width:500px"> などとしたところ、問題なく画像が大きくなりました。 ご提示いただいていない部分に原因があると思われます。
free_teku
free_teku

2021/06/05 02:25 編集

Lhankor _Mhyさん、ご回答ありがとうございます。 2021年から、htmlにwidth,heightを指定する方法を推奨される記事をみましたが、 画像 widthなどはCSSにかくのではなく、htmlに書いた方がいいのでしょうか?
free_teku
free_teku

2021/06/05 02:20

ここでは、CSSに書いたにも関わらず、変わらなかったため、質問させていただきました????
Lhankor_Mhy
Lhankor_Mhy

2021/06/05 02:29

> 2021年から、htmlにwidth,heightを指定する方法を推奨される記事 興味があるので良ければ教えてください。
Lhankor_Mhy
Lhankor_Mhy

2021/06/05 02:32

img{ width:1000px; } としたところ、やはり画像が大きくなったので、ご提示いただいていない部分に原因があると思われます。
free_teku
free_teku

2021/06/05 02:50

https://t\.co/rNTXl67sZ7 記事はこちらです。2020年夏でした。
free_teku
free_teku

2021/06/05 02:57

今、外出中のため、今晩にフォルダーお送りしたいと思います。もし、可能でしたら改めて添削していただける幸いです よろしくお願いします。m\(_ _\)m
Lhankor_Mhy
Lhankor_Mhy

2021/06/05 03:02

ありがとうございます。 サイズの指定はCSSでして構わないのですが、属性を書いておくとアスペクト比が画像読み込み前に確定するので……という記事ですね。 なお、先ほど私が書いたstyle属性に書くやり方では、この記事のような効果は出ないです。
meg_
meg_

2021/06/05 03:19

cssと書かれていますがコードを見るとネストが見られるので素のcssではないですよね?
free_teku
free_teku

2021/06/05 14:00

CSSではないですね。フォルダーをzipファイルでお送りいたします。 何卒よろしくお願いいたします。m\(__\)m
free_teku
free_teku

2021/06/05 14:22

https://18\.gigafile\.nu/0612-c087dd5d4758dae7c57e5eb7d0430a15d フォルダーはこちらになります。お手数をおかけしますが、よろしくお願いいたします。
Lhankor_Mhy
Lhankor_Mhy

2021/06/07 03:18 編集

やはり、 img{ width:1000px; } としたところ、画像が大きくなりましたので、問題が確認できませんでした。 再現する手順を具体的に書いていただいた方がいいと思います。
free_teku
free_teku

2021/06/08 05:09

再現する手順は、よくわかりません。 手順を考えたことがないからです(苦笑) 上から順番にコードを書いていました。 私は今回Saasでコードを書いています。 初めに、サイトの共通点を洗い出し,general\.scssにコードを書いて その後 headerもうまく反映されないので、先に飛ばし、 conceptやworkなどの中身を先に書こうと思っています。
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 05:21

そう難しく考える必要はないです。 「再現する手順」とは、「widthが反応していない」という問題をどうやって確認するのか、ということです。私は問題を確認できなかったのですが、free_tekuさんはどのようにして確認したのか、ということをお聞きしています。
free_teku
free_teku

2021/06/08 05:58

ご返信ありがとうございます。 「widthが反応していない」という問題ですが、\[vccode\]のheader\.scssとwork\.scssそれぞれのimgにwidthとheightを設定したところ、反応されませんでした。そのため、反応しないと記しました。 ※Develop Toolではきちんと反映されるため、何が原因なのか分からずにいたため、ここで質問させていただきました。 Develop Toolもvscodeでもエラーは出ていません。 こういった背景があります。何卒宜しくお願い致します。m\(__\)m
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 06:03

コンパイルは成功していますか?
free_teku
free_teku

2021/06/08 07:03 編集

成功しています。 Watch saasはサクセスになっています。
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 07:30

style\.css に変更した部分は出力されていますか?
free_teku
free_teku

2021/06/08 08:26

出力されています workにbg-color: aquaにしたら、出力されました。
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 08:31

_works\.scss はどこから import してるんですか?
free_teku
free_teku

2021/06/08 08:39

contentsの中にある_work\.scssは「style\.scss」からimportしています。
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 08:47

頂いたファイルにはそれがないので、どうやら私たちは別のものを試しているようですね。結果が異なるのも仕方がありません。 おそらく、こちらにいただいていない部分に原因があるのだと思われます。
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 08:48

たぶん、コンパイルの問題だと思いますので、いろいろお試しになるのがいいのではないかな、と思いますよ。
free_teku
free_teku

2021/06/08 09:05 編集

https://32\.gigafile\.nu/0615-dc4c84e304cb759c9cfdb79f6e5a5727f ↑新しいデータです。 ※以前のデータを 確認したところ、work\.scssはありましたが、style\.scssには書いてありませんでした。失礼いたしました。 また今回の件はheader\.scssとconcept\.scssについての画像ですが、どちらもコンパイルされてるようです。reset\.cssを新しくdestyle\.cssにしたのですが、こちらが間違っているのでしょうか? あまり良くないrecet\.style\.cssですか?
Lhankor_Mhy
Lhankor_Mhy

2021/06/08 09:20

頂いたコードで試してみましたが、_works\.scss の末尾に img { width: 1000px; } を追加したところ、画像が大きくなりました。 推測ですが、やはりコンパイルの問題だと思います。
free_teku
free_teku

2021/06/08 10:09

ありがとうございます。 Conceptの画像は解決できました。 文字へのwidth: 440px; を設定したところ、うまくできました。Conceptでmax-widthを設定したがために 小さくなったのだと思います。 Lhankor_Mhyさんは いつも、親身に向き合っていただき、嬉しいです。 ありがとうございます。m\(__\)m

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。