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

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

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

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

CSS

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

Q&A

解決済

2回答

1154閲覧

felxで順番を入れ替えたい

sunglass

総合スコア303

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/03/10 08:33

PCとSP時で順番を入れ替えたいです。

理想
イメージ説明

現実
イメージ説明

<style> .container{ background:red; opacity:.6; display:flex; } .num01 ,.num02, .num03 ,.num04 ,.num05{ background: #fff; color: #666; padding: 40px; margin:8px; } .num01, .num02, .num03{ width:75%; } .num04, .num05{ width:25%; } .flexbox{ display:-webkit-box; display: -webkit-flex; display:-ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } .num01{ order:1; } .num02{ order:4; } .num03{ order:5; } .num04{ order:2; } .num05{ order:3; } </style> <div class="container"> <div class=”flexbox” style="width:75%"> <div class="num01">A</div> <div> <div class="num02">B</div> <div class="num03">C</div> </div> </div> <div class=”flexbox” style="width:25%;"> <div class="num04">D</div> <div class="num05">E</div> </div> </div>

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

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

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

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

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

guest

回答2

0

ベストアンサー

Flexboxを使うなら、下記でどうでしょう。

html

1<div class="container"> 2 <div class="flexbox"> 3 <div class="num01">A</div> 4 <div class="num02">B</div> 5 <div class="num03">C</div> 6 <div class="num04">D</div> 7 <div class="num05">E</div> 8 </div> 9</div>

css

1* { 2 box-sizing: border-box; 3} 4.container{ 5 background:red; 6 opacity:.6; 7 display:flex; 8} 9.num01 ,.num02, .num03 ,.num04 ,.num05{ 10 background: #fff; 11 color: #666; 12 padding: 40px; 13 margin: 1%; 14} 15.num01, .num02, .num03{ 16 width: 73%; 17} 18.num04, .num05{ 19 width: 23%; 20} 21.flexbox{ 22 display: -webkit-box; 23 display: -webkit-flex; 24 display: -ms-flexbox; 25 display: flex; 26 -webkit-flex-wrap: wrap; 27 -ms-flex-wrap: wrap; 28 flex-wrap: wrap; 29 width: 100%; 30} 31.num01{ 32 order:1; 33} 34.num02{ 35 order:3; 36} 37.num03{ 38 order:5; 39} 40.num04{ 41 order:2; 42} 43.num05{ 44 order:4; 45} 46 47@media screen and (max-width: 480px) { 48.num01 ,.num02, .num03 ,.num04 ,.num05{ 49 Width: 98%; 50 } 51 .num01{ 52 order:1; 53 } 54 .num02{ 55 order:4; 56 } 57 .num03{ 58 order:5; 59 } 60 .num04{ 61 order:2; 62 } 63 .num05{ 64 order:3; 65 } 66}

Codepenサンプル


CSS Gridを使って、PCサイズはメインとサイドバーの間に疑似要素でギャップを入れてみました。

html

1<div class="container"> 2 <div class="num01">A</div> 3 <div class="side"> 4 <div class="num04">D</div> 5 <div class="num05">E</div> 6 </div> 7 <div class="num02">B</div> 8 <div class="num03">C</div> 9</div>

css

1.container{ 2 background: red; 3 opacity: .6; 4 display: grid; 5 grid-template-columns: 75% 8px 1fr; 6} 7 8.num01, .num02, .num03, .num04, .num05{ 9 background: #fff; 10 color: #666; 11 padding: 40px; 12 margin: 8px; 13} 14 15.side { 16 grid-column: 3; 17 grid-row: 1 / 3; 18} 19.num01, .num02, .num03 { 20 grid-column: 1; 21} 22.container::after { 23 content: ''; 24 background: #fff; 25 grid-column: 2; 26 grid-row: 1 / 4 27} 28 29@media screen and (max-width: 480px) { 30 .grid { 31 grid-template-columns: 1fr; 32 } 33 .num01, .num02, .num03 { 34 grid-column: 1; 35 } 36 .side { 37 grid-column: 1; 38 grid-row: 2; 39 } 40}

Codepenサンプル

投稿2020/03/10 10:21

編集2020/03/10 19:04
hatena19

総合スコア33620

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

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

sunglass

2020/03/14 07:52

hatena19さんの回答で無事解決しました・・・ ありがとうございます。gridまだわからない事多いのでまた質問投稿します。
guest

0

(案1)PCの時は現在のままのコードを使用しAの下にD・Eを非表示にして挿入、SPの時はサイドバーを非表示にして、D・Eを表示。

(案2)A・D・E・B・Cの順でHTMLコーディングしておいて、D・Eをpositionで右に移動させる。

投稿2020/03/10 10:24

rjunakc

総合スコア368

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問