Q&A
「ネットで調べいろいろしました」内容を追記してください。もしかしたら導入の仕方が間違っているかもしれませんし、回答した後で「そこ見ました｣となってしまっては無駄なやり取りが発生します。
前提・実現したいこと
div要素のBOXを
PC時横並び
スマホ時縦並びにしたいです。
HTML
に対しpc.CSS(PC用：CSSソース1つめ） sp.css（スマホ用：CSSソース2つ目）
で
発生している問題・エラーメッセージ
スマホになっても横並びのままになります
該当のソースコード
html
1 <div class="boxA"> 2 <div class="boxB" > 3 <div class="box-title">✔POINT</div> 4 <p>●文章 5 <br>●文章 6 <br>●文章 7 <br>●文章 8 <br>●文章 9 </p> 10 </div> 11 <div class="boxB" > 12 <div class="box-title">✔POINT</div> 13 <p>●文章 14 <br>●文章 15 <br>●文章 16 <br>●文章 17 <br>●文章 18 </p> 19 </div> 20 </div> 21 <br class="clear"> 22 <br>
CSS
1/*-------------------- box--------------------*/ 2.boxB { 3 float: left; 4 width: 50%; 5 margin: 2em 0; 6 background: #f1f1f1; 7 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); 8} 9.boxB .box-title { 10 font-size: 1.2em; 11 background: #5fc2f5; 12 padding: 4px; 13 text-align: center; 14 color: #FFF; 15 font-weight: bold; 16 letter-spacing: 0.05em; 17} 18.boxB p { 19 padding: 15px 20px; 20 margin: 0; 21} 22/*-------------------- boxA--------------------*/ 23.boxA { 24 border: none; 25 &:after { 26 content: ""; 27 display: block; 28 clear: both; 29 } 30}
CSS
1/*-------------------- box--------------------*/ 2.boxB { 3 margin: 2em 0; 4 background: #f1f1f1; 5 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); 6} 7.boxB .box-title { 8 font-size: 1.2em; 9 background: #5fc2f5; 10 padding: 4px; 11 text-align: center; 12 color: #FFF; 13 font-weight: bold; 14 letter-spacing: 0.05em; 15} 16.boxB p { 17 padding: 15px 20px; 18 margin: 0; 19} 20/*-------------------- boxA--------------------*/ 21.boxA { 22 border: none; 23 &:after { 24 content: ""; 25 display: block; 26 clear: both; 27 } 28}
試したこと
14：25 追記
HTML内に
<meta name="viewport" content="width=device-width">
sp.css内に
/---------------------------- スマ-トフォン向けのスタイル ----------------------------/
@media only screen and (max-width: 679px) {
をレスポンシブ変更の際に記載しております。
補足情報（FW/ツールのバージョンなど）
pc.CSS、sp.cssを読み込ませている記述部分も追記してください。これだけでは「どうやってPC・スマホを判別しているか」が分かりません。
正にその通り。おそらくpc.cssとsp.cssの読み込み切り分けができていないのが原因っぽいですね。
ソースコードが長いので冒頭で1つ目、2つ目とするのではなくコードのすぐ上にファイル名を記載されたほうが見やすいです。
「レスポンシブ メディアクエリ」等で検索すると、良いかもです。
回答3件
0
UAで切り分けないのであればこんな感じにメディアクエリで判別して幅だけ変える。
PC版の.boxBの指定以降に追記してください。
CSS
1@media screen and (max-width:480px){ 2 .boxB { 3 width: 100%; 4 } 5}
max-width:480px
を変更するとそのサイズ以下での適応が出来ます。
投稿2018/04/12 04:40
総合スコア355
0
ベストアンサー
max-width: 679pxって結構大きな数字ではないでしょうか？
iPhone6/7/8 Plusでも縦方向に持った場合、ブラウザ横幅は414pxだったかと思います。
また、@media only screen and…で囲っていない部分はどの幅の場合でも適用されますので、
pc.cssのfloat: left;が適用されているのではないかと思います。
共通した部分も見受けられましたので、試しにまとめてみました。(flex使えばとかその辺の話は置いときます)
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width" /> 6 <link rel="stylesheet" href="common.css"> 7 <link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width:481px)"> 8 <link rel="stylesheet" href="sp.css" type="text/css" media="screen and (max-width:480px)"> 9 </head> 10 <body> 11 <div class="boxA"> 12 <div class="boxB" > 13 <div class="box-title">✔POINT</div> 14 <p> 15 ●文章<br> 16 ●文章<br> 17 ●文章<br> 18 ●文章<br> 19 ●文章<br> 20 ●文章<br> 21 ●文章<br> 22 ●文章<br> 23 </p> 24 </div> 25 <div class="boxB" > 26 <div class="box-title">✔POINT</div> 27 <p> 28 ●文章<br> 29 ●文章<br> 30 ●文章<br> 31 ●文章<br> 32 ●文章<br> 33 ●文章<br> 34 ●文章<br> 35 ●文章<br> 36 </p> 37 </div> 38 </div><!-- end of boxA --> 39 <br class="clear"> 40 </body> 41</html>
common.css(名前は任意/共通の部分)
css
1/*-------------------- boxB --------------------*/ 2.boxB { 3 margin: 2em 0; 4 background: #f1f1f1; 5 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); 6} 7.boxB .box-title { 8 font-size: 1.2em; 9 background: #5fc2f5; 10 padding: 4px; 11 text-align: center; 12 color: #FFF; 13 font-weight: bold; 14 letter-spacing: 0.05em; 15} 16.boxB p { 17 padding: 15px 20px; 18 margin: 0; 19} 20/*-------------------- boxA --------------------*/ 21.boxA { 22 border: none; 23 &:after { 24 content: ""; 25 display: block; 26 clear: both; 27 } 28}
pc.css
css
1/*-------------------- boxB --------------------*/ 2.boxB { 3 float: left; 4 width: 50%; 5}
sp.css
css
1/* まとめたら書くことがなくなっちゃいました */
今回はCSS内ではなく<style>で切り分けてますが、考え方は一緒です。
投稿2018/04/12 07:11
総合スコア3235
あなたの回答
tips
プレビュー
