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

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

ただいまの
回答率

89.10%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 399

alberifiore

score 5

前提・実現したいこと

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

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

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

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

該当のソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>Aaaaaaa</title>
    <link href="Aaaaaa02.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <link rel="shortcut icon" href="images/favicon16.ico" type="image/vnd.microsoft.icon">
    <link rel="icon" href="images/favicon16.ico" type="image/vnd.microsoft.icon">



    <div class="nav">
         <div class="drawer">
              <a class="navbar_brand" href="index.html"><img src="images/logo02.png" alt="Aaaaaa" /></a>
              <div class="navbar_toggle">
               <span class="navbar_toggle_icon"></span>
               <span class="navbar_toggle_icon"></span>
               <span class="navbar_toggle_icon"></span>
              </div>
         </div>
         <div class="menu">
              <ul>
               <li><a href="info.html"target="_blank">Info</a></li>
               <li><a href="floor.html"target="_blank">Floor</a></li>
               <li><a href="access.html"target="_blank">Access</a></li>
               <li><a href="reserv.html"target="_blank">Reserv/Contact</a></li>
              </ul>
         </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.slider').bxSlider({
                auto: true,
                pause: 5000,
            });
        });
    </script>

    <script>
    $(function() {
         $('.navbar_toggle').on('click', function () {
              $(this).toggleClass('open');
              $('.menu').toggleClass('open');
         });
    });
    </script>

</head>

<body>
    <div class="wrapper">
        <div class="main">
            <div class="main-image">
                <div class="slider">
                <img src="images/main1.png" alt="メイン画像" />
                <img src="images/main2.png" alt="メイン画像2"/>
                <img src="images/main3.png" alt="メイン画像3"/>
                <img src="images/main4.png" alt="メイン画像4"/>
                <img src="images/main5.png" alt="メイン画像5"/>
                </div>
            </div>
            <div class="container">
                <div class="main-text">
                    <h2><p>本文記事欄</p></h2>
                    <p class="bun">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
                </div>
                <div class="SNS">
                    <h3><p>SNS</p></h3>
                    <div class="twitter">
                        <p>このサイトをシェア</p>
                        <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>
                    </div>  
                </div>
            </div>
        </div>
        <div class="bunner">
            <a href="#"><img src="images/aaaaaa.png" alt="aaaaaa" /></a>
            <a href="#"><img src="images/aaaaaa.png" alt="aaaaa" /></a>
        </div>
        <div class="footer">
            <div class="footer-left">
                <p><img src="images/logo02.png" alt="Aaaaaa" /></p>
            </div>
            <div class="footer-right">
                <address>
                123-0000 あああああああああああああああああああああ<br />
                ああああああああああああああああ<br />
                &copy; Aaaaaa All right reserved.
                </address>
            </div>
        </div>
    </div>
        <p id="back-top">
        <a href="#top"><span><img src="images/arrow-top.png" alt="↑" width="22" height="29" /></span></a></p>

</body>
</html>
@charset "utf-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
}
html body{
    margin: 0;
    padding: 0;
    width:100%;
    height: 100%;
    background-color: #add8e6;
}
.wrapper {
    width: 100%;
    height: 100%;
    min-height:100vh;
    padding-bottom:200px;
    position: relative;
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    line-height: 140%;
    color: #191970;
}

/*bx slider*/
.bxslider{   
    margin:0px;
}

.bx-wrapper {
    position: relative;
}

.bx-wrapper img {
    width:100%;
}

.bx-wrapper {
      margin: 0 !important;
      -moz-box-shadow: none !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      border: none !important;
      background: none !important;
}
.bxslider img{
      width: 100% !important;
      height: auto !important;
}

/*本文記事*/
.container{/*左寄せ*/
    width:60%;
    float:left;
}
.main-text {
    padding: 10px 10px 70px 10px;
    margin:50px 10px 50px 100px;
    color: #191970;
    background: #fff;
    border-left: solid 10px #4169e1;
}
.main-text h2 p{
    line-height:150%;
}
.bun{
    word-wrap:break-word;
}

.SNS{
    padding: 10px 10px 100px 10px;
    margin:50px 10px 50px 100px;
    color: #191970;
    background: #fff;
    border-left: solid 10px #00ced1;
    position:relative;
}
.twitter{
    padding:10px;
    text-align:center;
    background-color:#e0ffff;
    position:absolute;
    top:30%;
}

.bunner img{/*右寄せ*/
    margin:50px 10px 10px 10px;
}
.bunner{
    width:20%;
    float:right;
}

/*フッター*/
.footer{
    clear:both;
    width: 100%;
    height:200px;
    background-image:url(images/footer.png);
    position: absolute;
    bottom: 0;
}
.footer-left{
    float: left;
    margin-top:120px;
    margin-left:20px;
}
.footer-right{
    float:right;
    padding-top:50px;
    margin-top:120px;
    margin-right: 50px;
    color: #fff;
    font-size: 16px;
    padding: 14px 5px 10px 0px;
}
.footer-left p{
    margin-bottom: 8px
}

/*トップに戻る矢印アイコン*/
#back-top {
    position:fixed;
    bottom: 0;
    right: 0;
}
#back-top a {
    width: 50px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
/* arrow icon (span tag) */
#back-top span {
    width: 50px;
    height: 40px;
    display: block;
    margin-bottom: 7px;
    padding: 10px 0 0;
    background: rgba(195, 195, 195, 0.5) ;
    font-size: 20px;
    color:#000;
    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}

/*ハンバーガーメニュー*/
nav{
     width: 100%;
     height: 70px;
     position: relative;
     background: #F6F6F6;
}
.drawer{
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     position: relative;
     height: 70px;
     padding: 0 1em;
}

.navbar_toggle{
     z-index:9999;
}
.navbar_toggle_icon {
     position: relative;
     display: block;
     height: 2px;
     width: 30px;
     background: #5c6b80;
     -webkit-transition: ease .5s;
     transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1) {
     top: 0;
}
.navbar_toggle_icon:nth-child(2) {
     margin: 8px 0;
}
.navbar_toggle_icon:nth-child(3) {
     top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
     top: 10px;
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     opacity: 0;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
     top: -10px;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
}

.menu{
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
     -webkit-transition:ease .5s;
     transition:ease .5s;
     z-index:1000;
}
.menu ul li{
     padding: 2em;
     border-bottom: 1px solid #CCC;
}
/*OPEN時の動き*/
.menu.open {
     -webkit-transform:translateX(0);
     transform:translateX(0);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
}

試したこと

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • alberifiore

    2019/08/24 07:32

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

    キャンセル

  • asuchi0819

    2019/08/24 08:02

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

    キャンセル

  • alberifiore

    2019/08/24 13:45

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

    キャンセル

回答 1

checkベストアンサー

0

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

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

@media screen and (min-width: 1250px) {
    .bunner {
        box-sizing: content-box;
        width: 490px;
        float: right;
    }
}

・画像を小さくする

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/23 17:30

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

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る