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

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

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

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1431閲覧

画面サイズにの幅を狭めると背景の右端が見切れてしまう

HozDer

総合スコア25

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/17 02:50

編集2022/01/12 10:55

前提・実現したいこと

イメージ説明
イメージ説明
上部が見切れている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

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

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

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

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

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

masshu

2019/06/17 03:41

min-heightが指定されてるからだったりしませんか? キャプチャがないのでイメージが難しいです・・・
HozDer

2019/06/17 03:49

返信ありがとうございます。 画像を追加しました。 おそらくですが、min-heightは関係ない? ごめんなさい自分ではしっかりと理解しきれてない部分が多いです。
masshu

2019/06/17 04:00

画像の追加ありがとうございます。 文字が見切れてしまっているのをどのように修正したいのでしょうか? 改行を入れて全て表示するようにしたいのか、文字自体を小さく縮小したりですとかその辺のイメージは固まってますか?
masshu

2019/06/17 04:06

white-space: nowrap; これ消したらいい感じになりませんか?
HozDer

2019/06/17 05:03

white-space: nowrap; を消してもおかしくなるだけですね。。。 幅を狭めたときに左揃えにすると収まりますかね? @media (max-width: 800px) { p.h6 { grid-column: 2; } } これに text-align: left; を入れても効果ないのですが、使い方間違ってますか
masshu

2019/06/17 05:16

とりあえず表示をどうしたいのか教えていただいてもいいですか? text-align: left;ではなくalign-items: start; を使用してくださーい
HozDer

2019/06/17 05:34

質問力足りなくて申し訳ない 画像追加しました。 赤の矢印がある位置にもっていきたいです。 あと、align-items: start; は @media (max-width: 800px) { p.h6 { grid-column: 2; } } に追加してみましたが見た目変更ありませんでした。
masshu

2019/06/17 05:48 編集

footerのpaddingが左に100px効いてると思うんですがここ直しても変わりませんか?
HozDer

2019/06/17 06:00

footer { width: 100%; min-height: 160px; margin: 0; padding: 20px; display: grid; grid-template-columns: minmax(20%, 1fr) auto minmax(20%, 1fr); grid-template-rows: repeat(3, auto); } これのことですよね この形にしても変わらないですね
masshu

2019/06/17 06:03

んんん? したら画面サイズが大きい時の要素を何かしらで引き継いでる感じでしょうかね? ご提示いただいたコードで再現したら私の環境ですと変わったんですよねー
guest

回答1

0

原因はこれだと思われます。footerだけの問題じゃないっぽいです。
0. about, about2のwidth:800px
0. コピーライトのカラム幅と文字数、white-space:nowrapの関係

1についてですが、
幅を狭めた時というのが、800pxよりも画面幅が小さい時とします。
about, about2に幅800pxが指定されてるので、800pxより狭くなるとはみ出します。(その中にあるgooglemapのiframeも300px固定なので影響していると思われます。)
はみ出してるので横スクロールが発生し、フッターはviewport分しか背景が表現されていなく、スクロールの分だけ見切れる形になっています。
対策としては、pxの固定値を使わず%の相対値を使うなどして、html内全ての要素がはみ出さないようにするといいと思います。

2については、
grid-column: 3;が記述されてるので、開始位置が3列あるうちの右側になります。
この右側のカラムは20%の指定がされてるので、画面幅が狭くなると内包できる文字数が少なくなります。
そこへwhite-space:nowrap;が記述されてるので折り返さず1行になりはみ出しが発生し、前述のようにはみ出しで発生したスクロールの分見切れるという流れになっています。
対策としてはいろいろあると思いますが、

  • copyrightの文字数を減らす・サイズを小さくするなどはみ出さないように調整
  • 開始位置を真ん中か左のカラムに変更する

また、余計なお世話かもしれませんが、下記の対策もしておいた方がいいかと思います。

  • bootstrapの.mb-n1->.mb-0
  • bootstrapの.mr-n1->削除
  • css footerの横padding100pxは大きすぎかと。10-20pxくらいにしておいて、中央配置されるように。

投稿2019/06/17 08:27

uemaSR

総合スコア257

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

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

HozDer

2019/06/21 14:22

返信遅くなり申し訳ないです。 今別の問題を抱えていまして、この問題を解決するよりそちらを優先しています。 お答えしていただいたのに、非常に申し訳ないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問