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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

536閲覧

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

revoiot

総合スコア188

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/04/10 07:43

編集2018/04/10 08:43

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

イメージ説明

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

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

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

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

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

HTML

1 <footer id="footer"> 2 <div className="footer__body"> 3 <div className="footer__body__wrapper cf"> 4 <div className="footer__logo"> 5 <a target="_blank" href="/"> 6 ChiePal 7 </a> 8 </div> 9 10 <div className="footer__menu"> 11 <ul className="cf"> 12 <li><a target="_blank" href="#" target="_blank">新規登録</a></li> 13 <li><a target="_blank" href="#">ログイン</a></li> 14 </ul> 15 <ul className="cf"> 16 <li><a target="_blank" href="#">トップ</a></li> 17 <li><a target="_blank" href="#">運営会社</a></li> 18 <li><a target="_blank" href="#">Contact</a></li> 19 </ul> 20 </div> 21 </div> 22 </div> 23 24 <div className="footer__bottom"> 25 <div className="footer__bottom__wrapper"> 26 <div className="bottom__left"> 27 <ul className="cf"> 28 <li><a target="_blank" href="#">利用規約</a></li> 29 <li><a target="_blank" href="#">プライバシーポリシー</a></li> 30 <li><a target="_blank" href="#">運営会社</a></li> 31 <li className = "needless"><a target="_blank" href="#">Contact</a></li> 32 </ul> 33 </div> 34 <div className="bottom__right cf"> 35 <p className="Copyright">Copyright © 2018 ChiePal Inc. All Rights Reserved.</p> 36 </div> 37 </div> 38 </div> 39 </footer> 40 ) 41 } 42} 43コード

CSS

1矢印*/ 2.arrow--down { 3 width: 0; 4 height: 0; 5 border-left: 20px solid transparent; 6 border-right: 20px solid transparent; 7 border-top: 20px solid #bcc4cc; 8 margin: 0 auto 20px; 9} 10/* ==================== 11 フッター 12==================== */ 13html { 14 position: relative; 15 min-height: 100%; 16} 17 18footer { 19 background: white; 20 position: relative; 21 bottom: 0; 22 z-index: 20; 23} 24 25.footer__body { 26 border-top: 1px solid #DBDBDB; 27 height: 108px; 28 background: white; 29} 30 31.footer__body__wrapper { 32 margin: 0 auto; 33 padding: 0 30px; 34} 35 36.footer__logo { 37 float: left; 38 width: 217px; 39 margin-top: 25px; 40} 41 42.footer__logo a { 43 display: block; 44 font-size: 30px; 45 color: gray; 46 /* background: url('/images/apple_img.jpg') no-repeat; */ 47 width: 50px; 48 height: 50px; 49 -webkit-background-size: 29px 29px; 50 -o-background-size: 29px 29px; 51 background-size: 50px 50px; 52 margin-bottom: 30px; 53 margin-top: 0px; 54 margin-left: 40px !important; 55} 56 57.footer__logo__img { 58 width: 217px; 59} 60 61.footer__menu { 62 float: none; 63 margin-top: 0px; 64} 65 66.footer__menu ul { 67 color: #dce0e0; 68 float: left; 69 margin-right: 110px; 70} 71 72.footer__menu ul li { 73 height: 11px; 74 font-size: 16px; 75 line-height: 11px; 76 margin-bottom: 10px; 77} 78 79.footer__bottom { 80 height: 200px; 81 background-color: rgb(160, 218, 233) ; 82} 83 84.footer__bottom__wrapper { 85 padding: 0 30px; 86 box-sizing: border-box; 87 height: 200px; 88} 89 90.bottom__left { 91 margin-top: 9px; 92 margin-left: 50px; 93} 94 95.bottom__left li:first-child { 96 padding-left: 0; 97} 98 99.bottom__left li { 100 float: left; 101 font-size: 16px; 102 padding: 0 15px; 103 color: #108aa0; 104 border-right: 1px solid #dce0e0; 105 height: 9px; 106 line-height: 9px; 107 display: inline-block; 108} 109 110.bottom__right { 111 margin-top: 29px; 112 margin-right: 0px; 113} 114 115.bottom__right p { 116 font-size: 16px; 117 line-height: 9px; 118 color: #546969; 119} 120 121 122/* スマホ用のスタイル */ 123@media screen and (max-width: 712px) { 124 footer { 125 background: white; 126 text-align: center; 127 bottom: 0; 128 z-index: 20; 129 } 130 131 .footer__logo { 132 width: 100px !important; 133 display:none; 134 } 135 .footer__logo a { 136 margin-left: 0px !important; 137 } 138 139 .footer__menu { 140 float: left; 141 display:none; 142 } 143 144 .footer__bottom { 145 width:100%; 146 margin-top: 100px; 147 height: 200px; 148 background-color: rgb(160, 218, 233) ; 149 } 150 151 152 .footer__bottom__wrapper { 153 padding: 0px; 154 width:100%; 155 } 156 157 158 .bottom__left li { 159 margin-left: 0px; 160 } 161 162 .bottom__left li a { 163 font-size: 15px; 164 margin-left: 0px; 165 } 166 167 .bottom__left li { 168 float: left; 169 font-size: 16px; 170 padding: 0 15px; 171 color: #108aa0; 172 border-right: 1px solid #dce0e0; 173 height: 9px; 174 line-height: 9px; 175 display: inline-block; 176 } 177 178 .bottom__left ul .needless{ 179 border-right:0; 180 padding-right:0; 181 } 182 183 .bottom__right p { 184 font-size: 16px; 185 text-align: center; 186 white-space: nowrap; 187 } 188 189 .footer__menu ul { 190 margin-left: 70px; 191 } 192 193 .bottom__right p { 194 font-size: 16px; 195 line-height: 9px; 196 color: #546969; 197 } 198 199 .footer__body { 200 border-top: 1px solid white; 201 } 202 203} 204コード

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

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

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

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

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

m.ts10806

2018/04/10 07:44 編集

純HTMLではなく何かしらサーバーの言語でHTMLを出力されていますよね?タグに追加をお願いします。
revoiot

2018/04/10 07:47

タグを追加しました。ご指摘ありがとうございます。
HayatoKamono

2018/04/10 08:37 編集

質問用にreactを用いない、現象の確認ができる最低限のHTMLとCSSを別途用意した方が回答が付きやすいと思います。質問に余計な部分を省き、必要な部分は全て含めた、codePenやjsfiddleに回答者がコピペですぐに動作確認できるレベルのものを。
revoiot

2018/04/10 08:46

貴重のご意見いただきありがとうございます。早速ですが、修正の方をさせていただきました。
HayatoKamono

2018/04/10 08:56 編集

後でこちらのリンク先は削除しますが、そのまま掲載コードを貼り付けるとこうなりますよ。※リンク先のcodepenページを削除しました。
stampdoor

2018/04/10 08:51

なにかhtml以外でコーディングしているのでしょうか?htmlではclassNameではなくclassです。
HayatoKamono

2018/04/10 08:58

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

2018/04/10 09:07

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

2018/04/10 09:08

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

回答1

0

ベストアンサー

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

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

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

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

投稿2018/04/10 09:20

編集2018/04/10 09:34
HayatoKamono

総合スコア2415

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問