前提
レスポンシブデザインを使用し、パソコンとスマホで画面表示が変わるようにしていますが、
バナーとサービスの下の画像三枚のサイズが変更できません。
実現したいこと
バナー→スマホサイズ時に横のサイズに合わせたい
サービスの下の画像三枚→スマホサイズ時に縮小したい
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>株式会社 LiNew</title> <link rel="stylesheet" type="text/css" href="base.css"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <div class="header"> <div class="logo"> <img src="./images/logo_icon.png" width="43" height="auto"> <img src="./images/logo_name.png" width="93" height="auto"> </div> <div class="menu"> <ul> <li>VISION</li> <li>SERVICE</li> <li>COMPANY</li> </ul> </div> </div> <div class="content"> <div class="main"> <div class="titlebar"> VISION</div> <div class="vision"> ・私たちは情熱を持ってあらゆるニーズに対応していきます。<br> ・努力を怠らない事によりやりたいことを追求しつづけます。<br> ・最大限のパフォーマンスを発揮し効果を出し続け相乗効果を生み出します。 </div> <div class="titlebar"> SERVICE</div> <div class="content_service"> <div class="service"> <img src="./images/system_development.jpg"> <p> あらゆる受託開発においてプロフェッショナル集団がお客さまの環境変化に 対応・改善し常に最適化されたシステムにしていきます。 </p> </div> <div class="service"> <img src="./images/outsourcing.jpg"> <p> JavaやPHP、オープン系開発からネイティブアプリ、 デザインやWebディレクションなど、幅広い領域に対応しております。 </p> </div> <div class="service"> <img src="./images/recruit.jpg"> <p> 専門分野に特化したエージェントがお仕事をご紹介します。 </p> </div> </div> <div class="titlebar"> COMPANY</div> <div class="content_company"> <div class="company"> <table> <tr> <th>会社名</th> <td>株式会社LiNew</td> </tr> <tr> <th>代表</th> <td>西本弘昌</td> </tr> <tr> <th>資本金</th> <td>500万円</td> </tr> <tr> <th>本社住所</th> <td>東京都港区芝2-27-13芝尾島ビル3F</td> </tr> </table> </div> </div> </div> <div class="banner"> <img src="./images/banner.png"><br> <img src="./images/banner.png"><br> <img src="./images/banner.png"> </div> </div> <div class="footer"> <div class="boder"> </div> <div class="logo2"> <img src="./images/logo_icon2.png"> </div> </div> <div id="wrapper"> <div id="box1"> </div><!-- box1 --> <div id="box2"> </div><!-- box2 --> </div><!-- wrapper --> <div class="border-bottom-text"> Copyright © 2020 LINew Inc. All Rights. </div> </body> </html>
CSS
@charset "UTF-8";/* reset */body, h1, h2, h3, h4, h5, h6, p, address,ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; border-collapse: collapse;} textarea { font-size: 100%; vertical-align:middle;}img { border-style: none; display: block; }hr { display: none; }em{font-style: normal}input{line-height:auto;vertical-align:middle;}strong.more{color:#c30}a{text-decoration: none;} body { font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;} * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} /* 上の部分は気にせずここから書く */*{ float: none; position: static;}img{ max-width: 100%; height: auto;}body{ background-color:#eaeaea; margin-left: auto; margin-right: auto; width: 100%; padding: 0px;} /*＜header＞*/.header{ overflow: hidden;}.logo{ display: flex; width: 980px; margin-left: auto; margin-right: auto;}.menu{ display: flex; background-color: #279b8f; height: 20px; margin-bottom: 25px} .menu ul { display: flex; max-width: 980px; margin: 0 auto 0 auto; } .menu ul li{ width: 980px; justify-content: center; text-align: center; border-right: 1px solid #eaeaea; border-left: 1px solid #eaeaea; color: #eaeaea;} /*＜/header＞*/ /*＜main＞*/.main{ width: 700px; margin-right: 20px;} .content{ display: flex; margin: 0 auto 0 auto; max-width: 980px;} .titlebar{ height: 40px; background-color: #279b8f; color: #eaeaea; margin-bottom: 25px; font-size: 18px; font-weight: 900; line-height: 45px;}.vision{ margin-bottom: 25px; font-size: 13px;}.content_service{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;} .service{ margin-bottom: 25px} /*.content_service .service img{ margin-bottom: 10px; } .text{ font-size: 13px; margin-bottom: 25px; }*/ .banner{ width: 260px; margin-left: 0px; padding-bottom: 10px;} th{ text-align: center; padding-bottom: 10px; padding-right: 10px; }td{ padding-bottom: 10px;} .company{ font-size: 13px; margin-bottom: 25px} .boder{ border-top: 5px solid #279b8f;} .logo2{ display: flex; margin: 25px; justify-content: center;} .border-bottom-text{ background-color: #279b8f; width: 100%; height: 50px; text-align: center; color: #eaeaea; line-height: 45px; } @media screen and (max-width: 860px) { .menu ul { width: 100%; } .main{ width: 100%; } .titlebar{ width: 100%; } .vision{ width: 100%; } .content_service{ display: block; } .service{ display: flex; } .content{ display: block; } .banner{ width: 100%; } th{ text-align: left; display: block; } td{ display: block; border-bottom: 3px solid #279b8f; width: 100vmax; padding-bottom: 10px; } }
よろしくお願いいたします。
0 コメント