前提・実現したいこと
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 © 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を使用して作成しています。
「CSSでfloatをかけたときに以下のエラーが発生しました。」
エラー出てないですよね?
はみ出るというのはどの部分のことを言っていますか?
aaa……となっているところでしょうか?
失礼しました。問題に変更しました。
はみ出るに関しては右寄せにしたバナー画像が半分ほど画面外に見切れるということを言いたかったのですが、言葉が足りずわかりにくくてすみません。
<div class="nav">~</div>は<body>内に記載するべきだと思いますが実際のコードもこのようになっていますか?
その部分は検索をかけて出てきたサイトで<head>内に記述されていたのでそのまま真似して記述したため実際のコードも<head>内に記述しています。
画像の幅と、見ているブラウザの幅はどうなっていますか?
画像は470×210pxのPNGファイル、画面サイズは1920×1080、ブラウザサイズは1519×754です
バナーというのはここですかね?(bannerのスペリングミス?)
.bunner{
width:20%;
float:right;
}
どちらを参考にされたかわかりませんが<head>内に<div>は書けません(ブラウザが良いように解釈してくれる場合はあるけど)。
HTML5なら<header>というタグがあるのでそれとお間違えかもしれません。
どちらにしろそれを<body>内に入れても質問にある問題は解決しないのでこれ以上の言及は避けておきます。
バナーはその部分です。
全体の横幅の20%のサイズで表示したかったのですが…。
dit.様もご丁寧にありがとうございます。まだ初心者のためおかしな記述に自分で気づかないことも多いので指摘していただいてありがたいです。
470 + 20(margin) が 20% に収まるためには全体の幅が 2450 は必要ですが……
そもそもHTML5のタグが付いているのにHTML4.01の宣言文ってどういうことですか?
表示倍率?というのでしょうか、%を小さくするとなぜかさらに右にずれていってしまって…
私の認識ではwidthの%指定は全体の横幅の何%だと思っていたのですがもし違っていたらお恥ずかしい限りです。
タグの付けまちがいすみません。ご指摘ありがとうございます。
一般的に%は親要素の何%で指定します。
全体の横幅を%で指定するならvwを使ってください。
横幅の指定方法について教えてくださりありがとうございます!全体に対してだとvwになるのですね、勉強になりました。
vw,vh等を使うにはヘッダーにviewportを指定する必要があります。
詳しく教えてくださりありがとうございます!自分でももう一度画面のサイズなどに関して勉強しなおそうと思います。
回答1件
あなたの回答
tips
プレビュー