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

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

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

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

Q&A

1回答

887閲覧

画像がどうしても大きくなります。理由が知りたいです

free_teku

総合スコア103

CSS3

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

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

0グッド

0クリップ

投稿2021/05/26 14:47

serviseとnewsのそれぞれの画像が大きくなります。

やったこと
DevelopToolで確認し
widthたheight
textにflex: 1;を行ってみましたが、改善されずにいます。

教えていただけることは可能ですか?
原因を知りたいので、もし可能でしたららよろしくお願いいたします

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>Document</title> 8 <link rel="stylesheet" href="CSS/reset-html5.css"> 9 <link rel="stylesheet" href="CSS/style.css"> 10</head> 11<body> 12 <header class="header"> 13 <div class="header-inner"> 14 <div class="logo"> 15 <h1><a href="#"> クリ☆スタ</a></h1> 16 </div> 17 <div class="header-wrapper"> 18 <nav> 19 <ul class="header-list"> 20 <li class="list-item">About</li> 21 <li class="list-item">Service</li> 22 <li class="list-item">Contents</li> 23 </ul> 24 </nav> 25 </div> 26 </div> 27 28 </header> 29 <main> 30 <!--メイン画像--> 31 <div class="image-inner"> 32 <div class="main-image"> 33 <img src="image/main-image-creat.png" alt="メインイメージ"> 34 35 </div> 36 37 </div> 38 <!--About--> 39 <section class="about"> 40 <div class="about-inner"> 41 <h2 class="cmn-title about-title">About</h2> 42 <h3 class="sub-title"> 43 ミニマルで<br> 44 洗練されたデザインを。 45 </h3> 46 <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを <br> 47 致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて<br> 48 頂きます。 49 </p> 50 </div> 51 52 </section> 53 54 <!--service--> 55 <section class="service"> 56 <div class="service-inner"> 57 <h2 class="cmn-title service-title">service</h2> 58 <ul class="servise-list"> 59 <li class="servise-item"> 60 <div class="text"> 61 <h3 class="sub-title"> 62 リリース時のサポートで <br> 63 サービスのブランディングを 64 </h3> 65 <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを <br> 66 致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて<br> 67 頂きます。 68 </p> 69 </div> 70 71 <div class="service-img"> 72 <img src="image/camera.png" alt="カメラ画像"> 73 </div> 74 </li> 75 76 77 <li class="servise-item"> 78 <div class="text"> 79 <h3 class="sub-title"> 80 リリース時のサポートで <br> 81 効果を最大化させる 82 </h3> 83 <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題 <br> 84 にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を <br> 85 最大化させます。 86 </p> 87 </div> 88 89 <div class="service-img"> 90 <img src="image/smartfon.png" alt="スマートフォン"> 91 </div> 92 </li> 93 </ul> 94 </div> 95 96 </section> 97 <section class="News"> 98 <div class="news-inner"> 99 <h2 class="cmn-title">News</h2> 100 <ul class="news-list"> 101 <li class="news-item"> 102 <p class="news-text"> 103 新規サイトを公開しました。今回のサイトは白と <br> 104 黒を基調にしたミニマルなデザインになっています。 105 </p> 106 <div class="image-smt"> 107 <img src="image/oliver-pecker-HONJP-1.png" alt="スマートフォン背面" > 108 </div> 109 </li> 110 <li class="news-item"> 111 <p class="news-text"> 112 新規サイトを公開しました。今回のサイトは白と <br> 113 黒を基調にしたミニマルなデザインになっています。 114 </p> 115 <div class="image-smt"> 116 <img class="image-smt" src="image/smartfon-screen.png" alt="スマートフォンスクリーン"> 117 </div> 118 </li> 119 <li class="news-item"> 120 <p class="news-text"> 121 新規サイトを公開しました。今回のサイトは白と <br> 122 黒を基調にしたミニマルなデザインになっています。 123 </p> 124 <div class="image-smt"> 125 <img class="image-smt" src="image/pc.png" alt="PC"> 126 </div> 127 </li> 128 129 130 </ul> 131 </div> 132 133 </section> 134 <section class="inquiry"> 135 <h2 class="cmn-title">お問い合わせ</h2> 136 137 <form action="" class="form"> 138 <div class="form-part"> 139 <label for="input-name">担当者名</label> 140 <input type="text" name="name"> 141 </div> 142 <div class="form-part"> 143 <label for="input-tel">電話番号</label> 144 <input type="text" name="tel"> 145 </div> 146 147 <div class="form-part"> 148 <label for="input-mail">メールアドレス</label> 149 <input type="text" name="e-mail"> 150 </div> 151 152 <div class="form-part"> 153 <label for="detail">お問い合わせ内容</label> 154 <textarea name="" type="text" id="detail" cols="30" rows="10"></textarea> 155 </div> 156 157 158 159 <div class="link-btn"> 160 <p> <a href="#">送信</a> </p> 161 </div> 162 </form> 163 164 165 </section> 166 167 </main> 168 <footer class="footer"> 169 <div class="footer-inner"> 170 <p>&copy;crest.design all rights reserved</p> 171 </div> 172 173 </footer> 174</body> 175</html>

SCSS(service)

1.service{ 2 //.service-inner{} 3 .service-title{ 4 margin-top: 147px; 5 6 text-align: center; 7 } 8 .service-list{ 9 display: flex; 10 11 justify-content: space-between; 12 align-items: center; 13 .service-item{ 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 18 + .service-item{ 19 display: flex; 20 flex-direction: column-reverse; 21 } 22 23 24 25 .text{ 26 flex: 1; 27 28 .sub-title{ 29 > p{ 30 font-size: 14px; 31 line-height: 2.14; 32 33 } 34 } 35 } 36 37 .service-img { 38 39 40 } 41 } 42 } 43}

SCSS(News)

1.News{ 2 3} 4.news-inner{ 5 6} 7 8.news-list{ 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 margin-top: 71px; 13 list-style: none; 14 15 16 17 18 19 .news-item{ 20 max-width: 320px; 21 box-shadow: 0px 0px 6px #1B1310; 22 margin-right: 10px; 23 display: flex; 24 flex-direction: column-reverse; 25 justify-content: space-between; 26 align-items: center; 27 28 .news-text{ 29 padding: 33px 24px; 30 31 } 32 33 .image-smt{ 34 vertical-align: bottom; 35 max-height: 200px; 36 37 } 38 39 40 } 41 .news-item:nth-of-type(2) { 42 margin-left: 34px; 43 margin-right: 34px; 44 } 45 46 47 48 49} 50

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

画像を表示する要素のwidth, heightを適切に設定し、img要素のheight, weightを100%にすればimgを内包する要素の大きさで画像が表示されます。そのwidth, height指定が抜けています。

※クリスタの課題ならクリスタに質問すべきです。解説資料や動画も公開しているらしいですが、そういう情報は全部見ていますか?

投稿2021/05/26 15:34

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

free_teku

2021/05/26 17:11

大変申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問