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>©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
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/26 17:11