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

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

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

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

HTML

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

Q&A

解決済

1回答

2205閲覧

CSSのfloatで右寄せにした要素が画面からはみ出るのを直したい

alberifiore

総合スコア5

CSS3

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

HTML

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

0グッド

1クリップ

投稿2019/08/23 07:12

編集2019/08/23 08:04

前提・実現したいこと

HTML5、CSS、JavascriptでHPを作成しています

CSSでfloatをかけたときに以下の問題が発生しました。

発生している問題・エラーメッセージ

floatで右寄せにするとwidth100%にしているのに画面から右寄せにした画像がはみ出てしまう。 さらに下に固定していたフッターも浮き上がってくる。

該当のソースコード

HTML

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 7 <title>Aaaaaaa</title> 8 <link href="Aaaaaa02.css" rel="stylesheet" type="text/css" /> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 11 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> 12 <link rel="shortcut icon" href="images/favicon16.ico" type="image/vnd.microsoft.icon"> 13 <link rel="icon" href="images/favicon16.ico" type="image/vnd.microsoft.icon"> 14 15 16 17 <div class="nav"> 18 <div class="drawer"> 19 <a class="navbar_brand" href="index.html"><img src="images/logo02.png" alt="Aaaaaa" /></a> 20 <div class="navbar_toggle"> 21 <span class="navbar_toggle_icon"></span> 22 <span class="navbar_toggle_icon"></span> 23 <span class="navbar_toggle_icon"></span> 24 </div> 25 </div> 26 <div class="menu"> 27 <ul> 28 <li><a href="info.html"target="_blank">Info</a></li> 29 <li><a href="floor.html"target="_blank">Floor</a></li> 30 <li><a href="access.html"target="_blank">Access</a></li> 31 <li><a href="reserv.html"target="_blank">Reserv/Contact</a></li> 32 </ul> 33 </div> 34 </div> 35 36 <script type="text/javascript"> 37 $(document).ready(function(){ 38 $('.slider').bxSlider({ 39 auto: true, 40 pause: 5000, 41 }); 42 }); 43 </script> 44 45 <script> 46 $(function() { 47 $('.navbar_toggle').on('click', function () { 48 $(this).toggleClass('open'); 49 $('.menu').toggleClass('open'); 50 }); 51 }); 52 </script> 53 54</head> 55 56<body> 57 <div class="wrapper"> 58 <div class="main"> 59 <div class="main-image"> 60 <div class="slider"> 61 <img src="images/main1.png" alt="メイン画像" /> 62 <img src="images/main2.png" alt="メイン画像2"/> 63 <img src="images/main3.png" alt="メイン画像3"/> 64 <img src="images/main4.png" alt="メイン画像4"/> 65 <img src="images/main5.png" alt="メイン画像5"/> 66 </div> 67 </div> 68 <div class="container"> 69 <div class="main-text"> 70 <h2><p>本文記事欄</p></h2> 71 <p class="bun"> 72 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 73 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 74 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 75 </div> 76 <div class="SNS"> 77 <h3><p>SNS</p></h3> 78 <div class="twitter"> 79 <p>このサイトをシェア</p> 80 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Aaaaaa" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 81 </div> 82 </div> 83 </div> 84 </div> 85 <div class="bunner"> 86 <a href="#"><img src="images/aaaaaa.png" alt="aaaaaa" /></a> 87 <a href="#"><img src="images/aaaaaa.png" alt="aaaaa" /></a> 88 </div> 89 <div class="footer"> 90 <div class="footer-left"> 91 <p><img src="images/logo02.png" alt="Aaaaaa" /></p> 92 </div> 93 <div class="footer-right"> 94 <address> 95 123-0000 あああああああああああああああああああああ<br /> 96 ああああああああああああああああ<br /> 97 &copy; Aaaaaa All right reserved. 98 </address> 99 </div> 100 </div> 101 </div> 102 <p id="back-top"> 103 <a href="#top"><span><img src="images/arrow-top.png" alt="↑" width="22" height="29" /></span></a></p> 104 105</body> 106</html> 107

CSS

1@charset "utf-8"; 2/* CSS Document */ 3 4*{ 5 margin:0; 6 padding:0; 7} 8html body{ 9 margin: 0; 10 padding: 0; 11 width:100%; 12 height: 100%; 13 background-color: #add8e6; 14} 15.wrapper { 16 width: 100%; 17 height: 100%; 18 min-height:100vh; 19 padding-bottom:200px; 20 position: relative; 21 box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ 22 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 23 font-size: 14px; 24 line-height: 140%; 25 color: #191970; 26} 27 28/*bx slider*/ 29.bxslider{ 30 margin:0px; 31} 32 33.bx-wrapper { 34 position: relative; 35} 36 37.bx-wrapper img { 38 width:100%; 39} 40 41.bx-wrapper { 42 margin: 0 !important; 43 -moz-box-shadow: none !important; 44 -webkit-box-shadow: none !important; 45 box-shadow: none !important; 46 border: none !important; 47 background: none !important; 48} 49.bxslider img{ 50 width: 100% !important; 51 height: auto !important; 52} 53 54/*本文記事*/ 55.container{/*左寄せ*/ 56 width:60%; 57 float:left; 58} 59.main-text { 60 padding: 10px 10px 70px 10px; 61 margin:50px 10px 50px 100px; 62 color: #191970; 63 background: #fff; 64 border-left: solid 10px #4169e1; 65} 66.main-text h2 p{ 67 line-height:150%; 68} 69.bun{ 70 word-wrap:break-word; 71} 72 73.SNS{ 74 padding: 10px 10px 100px 10px; 75 margin:50px 10px 50px 100px; 76 color: #191970; 77 background: #fff; 78 border-left: solid 10px #00ced1; 79 position:relative; 80} 81.twitter{ 82 padding:10px; 83 text-align:center; 84 background-color:#e0ffff; 85 position:absolute; 86 top:30%; 87} 88 89.bunner img{/*右寄せ*/ 90 margin:50px 10px 10px 10px; 91} 92.bunner{ 93 width:20%; 94 float:right; 95} 96 97/*フッター*/ 98.footer{ 99 clear:both; 100 width: 100%; 101 height:200px; 102 background-image:url(images/footer.png); 103 position: absolute; 104 bottom: 0; 105} 106.footer-left{ 107 float: left; 108 margin-top:120px; 109 margin-left:20px; 110} 111.footer-right{ 112 float:right; 113 padding-top:50px; 114 margin-top:120px; 115 margin-right: 50px; 116 color: #fff; 117 font-size: 16px; 118 padding: 14px 5px 10px 0px; 119} 120.footer-left p{ 121 margin-bottom: 8px 122} 123 124/*トップに戻る矢印アイコン*/ 125#back-top { 126 position:fixed; 127 bottom: 0; 128 right: 0; 129} 130#back-top a { 131 width: 50px; 132 display: block; 133 text-align: center; 134 font: 11px/100% Arial, Helvetica, sans-serif; 135 text-transform: uppercase; 136 text-decoration: none; 137 color: #bbb; 138 /* transition */ 139 -webkit-transition: 1s; 140 -moz-transition: 1s; 141 transition: 1s; 142} 143#back-top a:hover { 144 color: #000; 145} 146/* arrow icon (span tag) */ 147#back-top span { 148 width: 50px; 149 height: 40px; 150 display: block; 151 margin-bottom: 7px; 152 padding: 10px 0 0; 153 background: rgba(195, 195, 195, 0.5) ; 154 font-size: 20px; 155 color:#000; 156 /* rounded corners */ 157 -webkit-border-radius: 15px; 158 -moz-border-radius: 15px; 159 border-radius: 15px; 160 /* transition */ 161 -webkit-transition: 1s; 162 -moz-transition: 1s; 163 transition: 1s; 164} 165#back-top a:hover span { 166 background-color: #777; 167} 168 169/*ハンバーガーメニュー*/ 170nav{ 171 width: 100%; 172 height: 70px; 173 position: relative; 174 background: #F6F6F6; 175} 176.drawer{ 177 display: flex; 178 flex-direction: row; 179 align-items: center; 180 justify-content: space-between; 181 position: relative; 182 height: 70px; 183 padding: 0 1em; 184} 185 186.navbar_toggle{ 187 z-index:9999; 188} 189.navbar_toggle_icon { 190 position: relative; 191 display: block; 192 height: 2px; 193 width: 30px; 194 background: #5c6b80; 195 -webkit-transition: ease .5s; 196 transition: ease .5s; 197} 198.navbar_toggle_icon:nth-child(1) { 199 top: 0; 200} 201.navbar_toggle_icon:nth-child(2) { 202 margin: 8px 0; 203} 204.navbar_toggle_icon:nth-child(3) { 205 top: 0; 206} 207/*OPEN時の動き*/ 208.navbar_toggle.open .navbar_toggle_icon:nth-child(1) { 209 top: 10px; 210 -webkit-transform: rotate(45deg); 211 transform: rotate(45deg); 212} 213.navbar_toggle.open .navbar_toggle_icon:nth-child(2) { 214 -webkit-transform: translateY(-50%); 215 transform: translateY(-50%); 216 opacity: 0; 217} 218.navbar_toggle.open .navbar_toggle_icon:nth-child(3) { 219 top: -10px; 220 -webkit-transform: rotate(-45deg); 221 transform: rotate(-45deg); 222} 223 224.menu{ 225 -webkit-transform: translateX(-100%); 226 transform: translateX(-100%); 227 -webkit-transition:ease .5s; 228 transition:ease .5s; 229 z-index:1000; 230} 231.menu ul li{ 232 padding: 2em; 233 border-bottom: 1px solid #CCC; 234} 235/*OPEN時の動き*/ 236.menu.open { 237 -webkit-transform:translateX(0); 238 transform:translateX(0); 239 overflow-y: auto; 240 -webkit-overflow-scrolling: touch; 241} 242 243

試したこと

widthの変更、floatをかける位置や解除の位置の変更

補足情報(FW/ツールのバージョンなど)

DWとGoogleを使用して作成しています。

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

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

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

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

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

azuapricot

2019/08/23 07:13

「CSSでfloatをかけたときに以下のエラーが発生しました。」 エラー出てないですよね?
x_x

2019/08/23 07:18

はみ出るというのはどの部分のことを言っていますか? aaa……となっているところでしょうか?
alberifiore

2019/08/23 07:20

失礼しました。問題に変更しました。 はみ出るに関しては右寄せにしたバナー画像が半分ほど画面外に見切れるということを言いたかったのですが、言葉が足りずわかりにくくてすみません。
dit.

2019/08/23 07:21

<div class="nav">~</div>は<body>内に記載するべきだと思いますが実際のコードもこのようになっていますか?
alberifiore

2019/08/23 07:25

その部分は検索をかけて出てきたサイトで<head>内に記述されていたのでそのまま真似して記述したため実際のコードも<head>内に記述しています。
x_x

2019/08/23 07:27

画像の幅と、見ているブラウザの幅はどうなっていますか?
alberifiore

2019/08/23 07:31

画像は470×210pxのPNGファイル、画面サイズは1920×1080、ブラウザサイズは1519×754です
x_x

2019/08/23 07:39

バナーというのはここですかね?(bannerのスペリングミス?) .bunner{ width:20%; float:right; }
dit.

2019/08/23 07:44

どちらを参考にされたかわかりませんが<head>内に<div>は書けません(ブラウザが良いように解釈してくれる場合はあるけど)。 HTML5なら<header>というタグがあるのでそれとお間違えかもしれません。 どちらにしろそれを<body>内に入れても質問にある問題は解決しないのでこれ以上の言及は避けておきます。
alberifiore

2019/08/23 07:47

バナーはその部分です。 全体の横幅の20%のサイズで表示したかったのですが…。 dit.様もご丁寧にありがとうございます。まだ初心者のためおかしな記述に自分で気づかないことも多いので指摘していただいてありがたいです。
x_x

2019/08/23 07:54

470 + 20(margin) が 20% に収まるためには全体の幅が 2450 は必要ですが……
kyoya0819

2019/08/23 08:01

そもそもHTML5のタグが付いているのにHTML4.01の宣言文ってどういうことですか?
alberifiore

2019/08/23 08:01

表示倍率?というのでしょうか、%を小さくするとなぜかさらに右にずれていってしまって… 私の認識ではwidthの%指定は全体の横幅の何%だと思っていたのですがもし違っていたらお恥ずかしい限りです。
alberifiore

2019/08/23 08:04

タグの付けまちがいすみません。ご指摘ありがとうございます。
kyoya0819

2019/08/23 11:03

一般的に%は親要素の何%で指定します。 全体の横幅を%で指定するならvwを使ってください。
alberifiore

2019/08/23 22:32

横幅の指定方法について教えてくださりありがとうございます!全体に対してだとvwになるのですね、勉強になりました。
kyoya0819

2019/08/23 23:02

vw,vh等を使うにはヘッダーにviewportを指定する必要があります。
alberifiore

2019/08/24 04:45

詳しく教えてくださりありがとうございます!自分でももう一度画面のサイズなどに関して勉強しなおそうと思います。
guest

回答1

0

ベストアンサー

どうしても幅が足りないので、考えられる手としては次の通り

・画像に必要な 490px を確保してレスポンシブにする

CSS

1@media screen and (min-width: 1250px) { 2 .bunner { 3 box-sizing: content-box; 4 width: 490px; 5 float: right; 6 } 7}

・画像を小さくする

CSS

1.bunner img { 2 max-width: calc(100% - 20px); 3}

投稿2019/08/23 08:20

x_x

総合スコア13749

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

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

alberifiore

2019/08/23 08:30

画面から画像がはみ出る問題は解決しました。 とても助かりました。 丁寧に教えていただきありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問