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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

700閲覧

flexboxを使ってスマホの時要素の順序を変更

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/18 04:12

編集2019/07/18 04:14

お世話になってます。
CSSとHTMLの学習を1からしようと思い、現在はflexboxについて学習しています。

そして、今実現したいのがfloatを使わずに、レスポンシブに以下のような図を作りたいです。

■ デスクトップ
デスクトップ

■ スマホ
スマホ

下記のようにデスクトップの方はできていますが、このコードだと
スマホの幅にした時に、サイドがフッターの下にきてしまいます。
htmlで、footerを一番下にしてあげたいのですが、
そうなるとsideの高さがfooterの横まで伸びません。

html

1<div id="wrapper"> 2 <div id="left"> 3 <div id="main1">main1</div> 4 <div id="main2">main2</div> 5 <div id="footer">footer</div> 6 </div> 7 <div id="right"> 8 <div id="side"></div> 9 </div> 10</div>

css

1#wrapper { 2 width: 1000px; 3 margin: 0 auto; 4 display: flex; 5 border: 2px solid black; 6} 7 8#left { 9 width: 75%; 10} 11 12#right { 13 width: 25%; 14} 15 16#main1, #main2, #footer, #side { 17 margin: 20px 10px; 18 border: 2px solid black; 19 text-align: center; 20} 21 22#main1, #footer { 23 height: 50px; 24} 25 26#main2 { 27 height: 100px; 28} 29 30#side { 31 height: calc(100% - 44px); 32} 33 34 35@media screen and (max-width: 599px) { 36 /* 37 ここで、sideをフッターの上に入れ、 38 結果、フッターを一番下にしたい 39 */ 40} 41

どのようにしたら良いでしょうか。
floatではできるのですが、今回は極力使いたくないです。
お力を貸していただけますと嬉しいです。

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

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

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

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

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

m.ts10806

2019/07/18 04:14

reset.cssは入れられましたか?
退会済みユーザー

退会済みユーザー

2019/07/18 04:16 編集

こちら、choromeのみでとりあえず試したいなと思ってます。 この後、autoprefixerを使ってブラウザ対応したいと考えています。
退会済みユーザー

退会済みユーザー

2019/07/18 04:19

これは... リセットCSSというものがあるというのを、今知りました... ありがとうございます。flexboxの問題が解決したのち、調べて入れてみます。。
m.ts10806

2019/07/18 04:21

wrapperにボーダーがあるうえで内部のwidthが75%25%になってるのではみ出る可能性ありそうだなぁと思っては見てました(コードを実際に動かしたわけではないですが) 要素にはデフォルトで持っている幅とか(特にpadding,margin)があるので個別に0をいれるくらいならreset.cssでリセットしておいてブラウザ間の差がないようにしてから対応したほうがスムーズにいくことも多いです。
退会済みユーザー

退会済みユーザー

2019/07/18 04:29

ありがとうございます。 #wrapperは、内部のwidthを1000pxにして固定し、#leftと#rightで3:1にして、margin等は使っていないのでbox自体は問題なかったです。 reset.cssを使って、ブラウザ間の差異がないようにできるように。ですね! 勉強します!
guest

回答3

0

grid がいいでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

CSS

1#wrapper { 2 display: grid; 3 grid-template-columns: 3fr 1fr; 4 grid-template-rows: 1fr 2fr 1fr; 5 grid-template-areas: 6 'main1 side' 7 'main2 side' 8 'footer side'; 9 gap: 20px; 10 box-sizing: border-box; 11 margin: 0 auto; 12 padding: 20px 10px; 13 height: 300px; 14 border: 2px solid black; 15} 16 17#left, #right { 18 display: contents; 19} 20 21#main1, #main2, #footer, #side { 22 border: 2px solid black; 23 text-align: center; 24} 25 26#main1 { 27 grid-area: main1; 28} 29 30#main2 { 31 grid-area: main2; 32} 33 34#footer { 35 grid-area: footer; 36} 37 38#side { 39 grid-area: side; 40} 41 42@media screen and (max-width: 599px) { 43 #wrapper { 44 grid-template-columns: 1fr; 45 grid-template-rows: 1fr 2fr 4fr 1fr; 46 grid-template-areas: 47 'main1' 48 'main2' 49 'side' 50 'footer'; 51 } 52}

投稿2019/07/18 04:56

x_x

総合スコア13749

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

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

0

ベストアンサー

以下の方法で解決しました。
① 「<div id="footer></div>」を#leftから外にだす(HTML)
② 「<div id="footer></div>」を一番下に配置(HTML)
③ cssより、#sideのheightを 100% + footerのheight分に指定(CSS)

html

1<div id="wrapper"> 2 <div id="left"> 3 <div id="main1">main1</div> 4 <div id="main2">main2</div> 5 </div> 6 <div id="right"> 7 <div id="side">side</div> 8 </div> 9     <!-- ここ --> 10 <div id="footer">footer</div> 11</div>

css

1#wrapper { 2 width: 1000px; 3 margin: 0 auto; 4 display: flex; 5 border: 2px solid black; 6 flex-wrap: wrap; 7} 8 9#left { 10 width: 75%; 11} 12 13#right { 14 width: 25%; 15} 16 17#main1, #main2, #footer, #side { 18 margin: 20px 10px; 19 border: 2px solid black; 20 text-align: center; 21} 22 23#main1, #footer { 24 height: 50px; 25} 26 27#main2 { 28 height: 100px; 29} 30 31/* ここ */ 32#side { 33 height: calc(100% + 30px); 34} 35 36/* widthを合わせる */ 37#footer { 38 margin-top: 0; 39 width: calc(75% - 24px); 40} 41 42 43/*スマホ!*/ 44@media screen and (max-width: 599px) { 45 #wrapper { 46 width: auto; 47 } 48 49 #left,#right,#footer { 50 width: 100%; 51 } 52 53 /* ここ */ 54 #side { 55 margin-top: 0; 56 height: 30px; 57 } 58} 59

投稿2019/07/18 04:44

編集2019/07/18 04:53
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

モダンなやり方はGridだと思います。
Gridが使えない場合は、position:absolute;を使う方もあります。

https://codepen.io/mattari-panda/pen/oKNjXe

ちょっと発想を変えて、スマホをベースにHTMLを組み直しメディアクエリでPC用に組み替えています。
HTMLは構文が正しければ良いので、PCがベースでなくてはならないという事はありません。
(あくまで回答の一例です)

投稿2019/07/18 06:41

mattari_panda

総合スコア429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問