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

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

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

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

HTML5

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

HTML

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

CSS

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

Q&A

2回答

5021閲覧

縦並びのレイアウトをmedia queryで別のレイアウトに変更する

ludient

総合スコア20

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/04/24 03:57

編集2022/01/12 10:55

PC版とSP版でレイアウトを変更したいのですが、
どのような記述をすれば目的が達成できるか分からなくて困っています。

実際にやりたいのは以下の画像のようなレイアウト変更です。

イメージ説明

PC版では画像,見出し,テキスト、のような順番で縦並びで表示していたものを
SP版で、見出しが横いっぱいに、その下に画像とテキストを横並びに表示したいです。

HTMLを以下のように記載し

html

1<div class="wrapper"> 2 3 <img src="https://placehold.jp/150x150.png" alt="" class="image"> 4 5 <h3 class="header">TEST HEADER</h3> 6 7 <p class="main_text"> 8 This is a test message.<br> 9 This is a test message.<br> 10 This is a test message.<br> 11 This is a test message.<br> 12 This is a test message.<br> 13 </p> 14 15</div>

SP版の時には以下のようなcssで実現できるかと考えたのですが
画像やテキストにwidthを指定するなども色々試してみたのですがうまくいきませんでした。

css

1.wrapper { 2 border: 1px solid #000; 3 display: flex; 4 flex-wrap: wrap; 5 flex-direction: column; 6} 7.image { 8 display: block; 9 height: auto; 10 order: 2; 11 flex: 1; 12} 13.header { 14 order: 1; 15 flex: 2; 16} 17.main_text { 18 order: 3; 19 flex: 1; 20}

flexの使用にはこだわりませんので、
何かいい解決策がありましたらご教授いただければ幸いです。

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

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

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

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

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

guest

回答2

0

質問者さんの行いたいことは以下のようにできると思いますが、いかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 body { 13 background-color: grey; 14 width: 100%; 15 } 16 17 img { 18 max-width: 100%; 19 } 20 21 .header { 22 background-color: black; 23 min-height: 100px; 24 } 25 26 .container { 27 display: flex; 28 flex-direction: column; 29 } 30 31 .header { 32 order: 1; 33 } 34 35 .left, .right { 36 width: 100%; 37 min-height: 300px; 38 } 39 40 .left { 41 background-color: yellow; 42 } 43 44 .right { 45 background-color: blue; 46 order: 2; 47 } 48 49 @media (max-width: 600px) { 50 .container { 51 width: 100%; 52 display: inline; 53 } 54 55 .header, .left, .right { 56 order: 0; 57 } 58 59 .left { 60 background-color: yellow; 61 min-height: 300px; 62 width: 50%; 63 float: left; 64 } 65 66 .right { 67 background-color: blue; 68 min-height: 300px; 69 width: 50%; 70 float: right; 71 } 72 73 .clearfix::after { 74 content: " "; 75 display: block; 76 clear: both; 77 } 78 79 } 80 </style> 81</head> 82<body> 83<div class="container"> 84 <header class="header"></header> 85 <section class="left"> 86 <img src="https://placehold.jp/150x150.png" alt="" class="image"> 87 </section> 88 <section class="right"></section> 89 <div class="clearfix"></div> 90</div> 91</body> 92</html>

投稿2017/04/24 09:43

編集2017/04/24 10:12
s8_chu

総合スコア14731

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

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

0

こうでは?

CSS

1 2.image { 3 display: block; 4 height: auto; 5 /*order: 2;*/ 6 order: 1; 7 flex: 1; 8} 9.header { 10 /*order: 1;*/ 11 order: 2; 12 flex: 2; 13} 14```**動くサンプル:**[https://jsfiddle.net/76s9na79/](https://jsfiddle.net/76s9na79/) 15 16--- 17 18**追記:** 19 20こんな感じでどうでしょう。 21 22```CSS 23.wrapper { 24 border: 1px solid #000; 25 display: flex; 26 flex-wrap: wrap; 27 /*flex-direction: column;*/ 28 flex-direction: row; 29} 30.image { 31 display: block; 32 height: auto; 33 order: 2; 34 /*flex: 1;*/ 35 flex: 1 1 25%; 36} 37.header { 38 order: 1; 39 /*flex: 2;*/ 40 flex: 1 1 100%; 41} 42.main_text { 43 order: 3; 44 /*flex: 1;*/ 45 flex: 1 1 75%; 46} 47```**動くサンプル:**[https://jsfiddle.net/76s9na79/1/](https://jsfiddle.net/76s9na79/1/)

投稿2017/04/24 04:02

編集2017/04/24 12:57
kei344

総合スコア69364

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

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

ludient

2017/04/24 08:53

動くサンプルを拝見させていただいたのですが、 こちらの環境だと 画像 見出し テキスト の順番に、縦に並んでいる状態でした。 htmlのマークアップの順序などは変わっても問題ないのですが 質問本文に添付したようなレイアウトの切り替えを実現する方法が知りたいです。
kei344

2017/04/24 10:05

ああ、質問文を読み込めていなかったですね、すみません。SPが縦積みだとばかり思っていました。 ちょっと手が離せないのであとで修正しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問