前提・実現したいこと
上部が見切れているSS(幅狭めています)
下が画面を広げているSS
画面サイズの幅を狭めたときにフッターにある背景と、文字が見切れてしまっているのを修正したい
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <title>test</title> </head> <body> <h1 class="title">FTエンジニアリング</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <link rel="stylesheet" type="text/css" href=https://rmultigamingsever.com/wp-content/themes/hp_sakusei/reset.css> <link rel="stylesheet" href="style2.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <!-- header --> <header> <ul class="container-fluid"> <div class="row"> <a class="button col-sm" href="#">ホーム<br><span class="font-size">HOME</span></a> <a class="button col-sm" href="#">商品紹介<br><span class="font-size">INTRODUCTION</span></a> <a class="button col-sm" href="#">業務内容<br><span class="font-size">SERVICES</span></a> <a class="button col-sm" href="#">事業者情報<br><span class="font-size">PROFILE</span></a> <a class="button col-sm" href="#">お問い合わせ<br><span class="font-size">CONTANCT</span></a> </div> </ul> </header> <!-- main --> <nav class="profile container"> <h3>事業者情報</h3> <table class="mx-auto"> <tbody> <tr> <th class="list">会社名</th><th class="about">しゃめいがはいる</th> </tr> <tr> <th class="list">代表者</th><th class="about">なまえがはいる</th> </tr> <tr> <th class="list">創業</th><th class="about">2010年</th> </tr> <div class="row"> <tr> <th class="list">本社</th> <th class="about2"> <div class="leftbox"> <p>〒00000000</p> <p>じゅうしょがああああ</p> <br><p>電話:000-0000-0000</p> <p>FAX:000-0000-0000</p> </div> <div> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1650.0489172345121!2d135.14629784637495!3d34.194976627512034!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf024e7bed6d2044e!2z5ZKM5q2M5bGx44OV44Kp44O844Kv44Oq44OV44OI44K144O844OT44K5!5e0!3m2!1sja!2sjp!4v1560392176501!5m2!1sja!2sjp" width="300" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </th> </tr> </div> <div class="row"> <tr class="map"> <th class="list">してんめい</th> <th class="about2"> <div class="leftbox"> <p>〒0000000</p> <p>じゅうしょがはいるよ</p> <br><p>電話:000000000</p> <p>FAX:00000000000</p> </div> <div> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7894.725123382024!2d135.4210480589705!3d33.700589337709395!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6007a65e82baa591%3A0xffd025fea3815d5!2z44CSNjQ5LTIxMDUg5ZKM5q2M5bGx55yM6KW_54mf5amB6YOh5LiK5a-M55Sw55S65pyd5p2l77yS77yT77yU77yV4oiS77yR77yT!5e0!3m2!1sja!2sjp!4v1560392388845!5m2!1sja!2sjp" width="300" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </th> </tr> </div> <tr> <th class="list">営業時間</th><th class="about">平日 9:00~18:00</th> </tr> <tr> <th class="list">事業内容</th><th class="about">いろ色</th> </tr> </tbody> </table> </nav> <!-- onlineshop --> <aside class="onlineshop ml-5 text-center"> <div class=""> オンラインショップへ </div> </aside> <!-- footer --> <footer class="h5 mt-5 mb-n1 mr-n1 bg-secondary text-white"> <div class="w-100"> ああああああああああああ </div> <dl class="h6"> <dt>【本社】</dt> <dd>〒9999999 あああああああああああ</dd> <dt>【紀南営業作業所】</dt> <dd>〒0000000 aaaaaaaaaaaaaaaaaaaaaaaaa </dd> </dl> <p class="h6">COPYRIGHT(C)aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </footer> </body> </html>
body { font-family: Verdana, 'Arial Black', sans-serif; font-size: 20px; margin: 0; } /* header */ header { height:170px; } h1 { text-align: center; display: block; } .title { white-space: nowrap; } .container-fluid { display: flex; justify-content: center; } @media (min-width: 0px) and ( max-width:576px){ .container-fluid { margin-top: 100px; } } .font-size { font-size: 0.3vw; } div.row { width: 912px; } ul{ display: flex; justify-content: center; align-items: center; position: inherit; background-color: black; font-size: 20px; height: 49px; line-height: 20px; } ul > a { text-decoration: none; text-align: center; color: white; font-size: 1.2vw; } .button { background-color: black; color: #fff; text-align: center; } .button:hover { background: #888888; color: white; text-decoration: none; } /* main */ .profile { white-space: nowrap; } h3 { margin-left: 100px; } nav > p { width: 50%; font-size: 12px; } table,tr,th,td { border: solid black 1px; line-height: 22px; margin: 40px 0px 60px 0px; } .list { background: #EEEEEE; padding: 10px; } .about { width: 800px; padding-left: 10px; } .about2 { width: 800px; height: 200px; padding: 10px; } iframe { float: right; } .leftbox { float: left; width: 20%; } /* aside */ aside { width: 200px; } /* footer */ footer { width: 100%; min-height: 160px; margin: 0; padding: 20px 100px; display: grid; grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr); grid-template-rows: repeat(3, auto); } div, dl { grid-column: 2; } p.h6 { grid-row: 3; grid-column: 3; overflow-wrap: break-word; white-space: nowrap; } @media (max-width: 800px) { p.h6 { grid-column: 2; } }
試したこと
・padding,marginの調整
・widthで横幅調整すると画面サイズを変更するときに違和感が出る
補足情報(FW/ツールのバージョンなど)
Windows10 Bootstrap4