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

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

ただいまの
回答率

90.34%

footerのブロックの大きさが変わらない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 761

revoiot

score 141

現在websiteを作成している途中ですが、footerの作成の中でつまづいてしまったので、ここで質問させていただきます。

イメージ説明

画像のように水色のブロックが見れると思いますが、いろんな修正を加えても、この部分がなぜかこの大きさが変わりません。どれかのブロックにwidthを指定すれば、もちろん大きさは変わるのですが、今回は、レスポンシブデザインを作っていて、表示崩れはさせたくないので、footerのいずれのブロックにもwidthは指定していません。(%での表示はさせているところはありますが、pxでなどの指定はしていないという意味です。)

試した事
.footerbottomwrapper
.bottomleft  .footerbottom
などのwidthを100%、margin:auto;、text-align:center;を指定したりした。

質問したい事
・レスポンシブデザインを作成する上において、footerを作成する際、親要素ブロックのwidthを指定するべきでしょうか?(%ではなく、px指定など)

・水色のブロックをpx指定せずに広げてあげるには、どのようにしてあげたらよろしいでしょうか?

相談したい事
footerのコードがぐちゃぐちゃで非常に見にくい状況です。なにか工夫できるアドバイスをいただけると幸いです。

      <footer id="footer">
        <div className="footer__body">
          <div className="footer__body__wrapper cf">
            <div className="footer__logo">
              <a target="_blank" href="/">
              ChiePal
              </a>
            </div>

            <div className="footer__menu">
              <ul className="cf">
                <li><a target="_blank" href="#" target="_blank">新規登録</a></li>
                <li><a target="_blank" href="#">ログイン</a></li>
              </ul>
              <ul className="cf">
                <li><a target="_blank" href="#">トップ</a></li>
                <li><a target="_blank" href="#">運営会社</a></li>
                <li><a target="_blank" href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div className="footer__bottom">
          <div className="footer__bottom__wrapper">
            <div className="bottom__left">
              <ul className="cf">
                <li><a target="_blank" href="#">利用規約</a></li>
                <li><a target="_blank" href="#">プライバシーポリシー</a></li>
                <li><a target="_blank" href="#">運営会社</a></li>
                <li className = "needless"><a target="_blank" href="#">Contact</a></li>
              </ul>
            </div>
            <div className="bottom__right cf">
              <p className="Copyright">Copyright © 2018 ChiePal Inc. All Rights Reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    )
  }
}
コード
矢印*/
.arrow--down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #bcc4cc;
  margin: 0 auto 20px;
}
/* ====================
  フッター
==================== */
html {
  position: relative;
  min-height: 100%;
}

footer {
  background: white;
  position: relative;
  bottom: 0;
  z-index: 20;
}

.footer__body {
  border-top: 1px solid #DBDBDB;
  height: 108px;
  background: white;
}

.footer__body__wrapper {
    margin: 0 auto;
    padding: 0 30px;
}

.footer__logo {
  float: left;
  width: 217px;
  margin-top: 25px;
}

.footer__logo a {
  display: block;
  font-size: 30px;
  color: gray;
  /* background: url('/images/apple_img.jpg') no-repeat; */
  width: 50px;
  height: 50px;
  -webkit-background-size: 29px 29px;
       -o-background-size: 29px 29px;
          background-size: 50px 50px;
  margin-bottom: 30px;
  margin-top: 0px;
  margin-left: 40px !important;
}

.footer__logo__img {
  width: 217px;
}

.footer__menu {
  float: none;
  margin-top: 0px;
}

.footer__menu ul {
  color: #dce0e0;
  float: left;
  margin-right: 110px;
}

.footer__menu ul li {
  height: 11px;
  font-size: 16px;
  line-height: 11px;
  margin-bottom: 10px;
}

.footer__bottom {
  height: 200px;
  background-color: rgb(160, 218, 233) ;
}

.footer__bottom__wrapper {
    padding: 0 30px;
    box-sizing: border-box;
    height: 200px;
}

.bottom__left {
  margin-top: 9px;
  margin-left: 50px;
}

.bottom__left li:first-child {
  padding-left: 0;
}

.bottom__left li {
  float: left;
  font-size: 16px;
  padding: 0 15px;
  color: #108aa0;
  border-right: 1px solid #dce0e0;
  height: 9px;
  line-height: 9px;
  display: inline-block;
}

.bottom__right {
  margin-top: 29px;
  margin-right: 0px;
}

.bottom__right p {
  font-size: 16px;
  line-height: 9px;
  color: #546969;
}


/* スマホ用のスタイル */
@media screen and (max-width: 712px) {
  footer {
    background: white;
    text-align: center;
    bottom: 0;
    z-index: 20;
  }

  .footer__logo {
    width: 100px !important;
    display:none;
  }
  .footer__logo a {
    margin-left: 0px !important;
  }

  .footer__menu {
    float: left;
    display:none;
  }

  .footer__bottom {
    width:100%;
    margin-top: 100px;
    height: 200px;
    background-color: rgb(160, 218, 233) ;
  }


  .footer__bottom__wrapper {
    padding: 0px;
    width:100%;
  }


  .bottom__left li {
    margin-left: 0px;
  }

  .bottom__left li a {
    font-size: 15px;
    margin-left: 0px;
  }

  .bottom__left li {
    float: left;
    font-size: 16px;
    padding: 0 15px;
    color: #108aa0;
    border-right: 1px solid #dce0e0;
    height: 9px;
    line-height: 9px;
    display: inline-block;
  }

  .bottom__left ul .needless{
    border-right:0;
      padding-right:0;
  }

  .bottom__right p {
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
  }

  .footer__menu ul {
    margin-left: 70px;
  }

  .bottom__right p {
    font-size: 16px;
    line-height: 9px;
    color: #546969;
  }

  .footer__body {
    border-top: 1px solid white;
  }

}
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • HayatoKamono

    2018/04/10 17:58

    classNameをclassに一括置換して確認しましたが、Chrome環境では少なくともフッター部分の水色ブロックは横幅サイズがウィンドウ幅に応じて変動していましたよ。

    キャンセル

  • revoiot

    2018/04/10 18:07

    react.jsという言語を用いて、htmlのようなjsxfile を作成しています。なにかjsx,file とcss.file を読み込んで、プレビュー環境で確認できるはないでしょうか?

    キャンセル

  • revoiot

    2018/04/10 18:08

    もしかすると、reactがらみで、横幅サイズを変えられないのかもしれません。

    キャンセル

回答 1

checkベストアンサー

0

普通のHTML、CSSのみの環境とReact環境でChrome上で確認しましたが、どちらもフッター部分の横幅はウィンドウサイズに応じて変動していました。

現象を確認されている環境を追記した方が良いかもしれません。

キャッシュが影響していないかも確認したほうが良いと思います。

以下のリンク先ページでCSSコードを貼り付ければ、CSSの検証が可能です。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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