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

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

新規登録して質問してみよう
ただいま回答率
85.51%
レスポンシブWebデザイン

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

HTML

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

CSS

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

Q&A

解決済

4回答

5668閲覧

スマホ用レイアウトで画像配置を変えたい

退会済みユーザー

退会済みユーザー

総合スコア0

レスポンシブWebデザイン

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

HTML

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

CSS

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

1グッド

1クリップ

投稿2016/07/07 12:27

###前提・実現したいこと
WEBサイトを作成しております。
以下の画像はパソコン用レイアウトで、スマホで見たときには配置を変えたいです。
文字の部分も画像なので、6枚の画像が表示されている形になっています。

イメージ説明

###発生している問題・エラーメッセージ
PC
イメージ説明
PCで見た時は横3×縦2のレイアウトなのを、スマホで見たときには横2×縦3のレイアウトにしたいのですが、
画像の配置している順番通りにしか表示されないので、以下の右画像のようなレイアウトにしたいのですが、左画像のようなレイアウトになってしまいます。

スマホ
イメージ説明 イメージ説明

###試したこと・該当のソースコード
現時点では、PC用とスマホ用で別の画像を用意しており、それらの表示・非表示で分けているのですが、それだとPC用画像6枚、スマホサイズ画像6枚で、計12枚使用しているため(画像サイズが変わるので同じ画像が使えない)
計6枚でレイアウトする方法がないか探しています。
できれば、background-imageで画像を指定したいです。

html

1<div class="pc"> 2 <div class="pc_box"> 3 <div class="backimageA"></div><div class="backimageB"></div><div class="backimageC"></div> 4 </div><!--/.pc_box--> 5 <div class="pc_box"> 6 <div class="backimageD"></div><div class="backimageE"></div><div class="backimageF"></div> 7 </div><!--/.pc_box--> 8</div><!--/.pc--> 9 10<div class="mobile"> 11 <div class="mobile_box"> 12 <div class="backimageG"></div><div class="backimageH"></div> 13 </div><!--/.mobile_box--> 14 <div class="mobile_box"> 15 <div class="backimageI"></div><div class="backimageJ"></div> 16 </div><!--/.mobile_box--> 17 <div class="mobile_box"> 18 <div class="backimageK"></div><div class="backimageL"></div> 19 </div><!--/.mobile_box--> 20</div><!--/.mobile-->

css

1.pc{display: block;} 2.mobile{display: none;} 3.backimageA{background-image: url(画像URL)} 4.backimageB{background-image: url(画像URL)} 5.backimageC{background-image: url(画像URL)} 6.backimageD{background-image: url(画像URL)} 7.backimageE{background-image: url(画像URL)} 8.backimageF{background-image: url(画像URL)} 9 10@media (max-width : 800px){ 11 .pc{display: none;} 12 .mobile{display: block;} 13 .backimageG{background-image: url(画像URL)} 14 .backimageH{background-image: url(画像URL)} 15 .backimageI{background-image: url(画像URL)} 16 .backimageJ{background-image: url(画像URL)} 17 .backimageK{background-image: url(画像URL)} 18 .backimageL{background-image: url(画像URL)} 19}
mondaminZ👍を押しています

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

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

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

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

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

guest

回答4

0

Flexboxで順番を作ってみるとか。

CSS

1.pc, 2.mobile { 3 overflow: hidden; 4} 5.pc { 6 width: 300px; 7} 8.mobile { 9 display: flex; 10 flex-wrap: wrap; 11 width: 200px; 12} 13.pc>div, 14.mobile>div{ 15 width: 100px; 16 height: 100px; 17 float: left; 18} 19.mobile > div:nth-child(1) {order: 1;} 20.mobile > div:nth-child(2) {order: 2;} 21.mobile > div:nth-child(3) {order: 4;} 22.mobile > div:nth-child(4) {order: 3;} 23.mobile > div:nth-child(5) {order: 5;} 24.mobile > div:nth-child(6) {order: 6;} 25.backimageA{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=A)} 26.backimageB{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=B)} 27.backimageC{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=C)} 28.backimageD{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=D)} 29.backimageE{background-image: url(http://placehold.jp/24/cc9999/993333/100x100.png?text=E)} 30.backimageF{background-image: url(http://placehold.jp/24/9999cc/333399/100x100.png?text=F)}

HTML

1<div class="pc"> 2 <div class="backimageA"></div><div class="backimageB"></div><div class="backimageC"></div> 3 <div class="backimageD"></div><div class="backimageE"></div><div class="backimageF"></div> 4</div><!--/.pc--> 5<div class="mobile"> 6 <div class="backimageA"></div><div class="backimageB"></div><div class="backimageC"></div> 7 <div class="backimageD"></div><div class="backimageE"></div><div class="backimageF"></div> 8</div><!--/.mobile-->

動くサンプル:https://jsfiddle.net/Lak7185n/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html#h210

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024#a13

投稿2016/07/07 15:51

kei344

総合スコア69357

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

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

0

前提が異なるので、私だったら…の参考までに。

まず、800px以下で2列だから、画像を縦横400pxで作成。

html

1<div> 2 <ul> 3 <li id="img01">画像1</li> 4 <li id="text01">テキスト画像1</li> 5 <li id="text02">テキスト画像2</li> 6 <li id="img02">画像2</li> 7 <li id="img03">画像3</li> 8 <li id="text03">テキスト画像3</li> 9 </ul> 10</div>

のワンソースにして、

css

1div { 2 position:relative; 3 width:900px;/*PCでは縦横300pxの場合*/ 4 height:600px; 5} 6div ul li { 7 position:absolute; 8 width:300px; 9 height:300px; 10} 11div ul li img { 12 width:100%; 13 height:auto; 14} 15#img01 { 16 left:0; 17 top:0; 18} 19#text01 { 20 left:0; 21 top:300px; 22}/*以下全て指定*/ 23@media (max-width : 800px){ 24 div { 25 width:100%; 26 height:auto; 27 } 28 div ul { 29 width:100%; 30 } 31 div ul li { 32 position:static; 33 float:left; 34 width:50%; 35 } 36}

とPC用で各IDに対して、表示位置を記述すれば、空タグが防げて(私は大嫌い)、
レスポンシブ対応出来るかと。あくまで、私ならです(笑)。

投稿2016/07/07 15:26

LibertyBell3

総合スコア1084

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

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

0

ベストアンサー

1枚の画像にしてしまうとka(●´ω`●)

投稿2016/07/07 13:04

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2016/07/07 13:13 編集

ありがとうございます。その発想はありませんでした。画像が変更になったときに面倒ですが、そのパターンも作成します。 何かアイディア一つで、6枚で出来そうな気がするのですが、ないでしょうか?
退会済みユーザー

退会済みユーザー

2016/07/07 13:21

background-imageは1枚しか出来ないんじゃなかったでしたっけ? window幅でレイアウトを自動でではなく手動で設定するとか
退会済みユーザー

退会済みユーザー

2016/07/07 13:28

ちょっと高度でメンドクサイけど CANVASで1画像として合成しbackground-imageに設定するとか?
退会済みユーザー

退会済みユーザー

2016/07/07 17:12 編集

To: dotさん 画像の合成まではしていないですが、 CANVASを使用することでマウスで選択したときに青くならなくなったので、求めていたものにすることが出来ました。 画像も6枚でレイアウトの切り分けができました!ご回答ありがとうございます!
guest

0

ビューポートで細かいクラス設定をしてみるのがいいのではないでしょうか?
セマンティックではないかもしれないですが、、

投稿2016/07/07 13:54

makoto-n

総合スコア436

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問