HTML/CSSモバイルのみワンカラムに

2023/11/02 18:28

このQ&Aのポイント

WordpressのブログでPC表示では3カラムのレイアウトになっているが、モバイルから見た時には本文のみを表示するワンカラムのレイアウトに変更したい。
通常ではfloatを使用してレイアウトを表示しているが、メディアクエリを使用してモバイル時にはfloatを解除している。
しかし、iPhoneからの閲覧時にはヘッダーの右に本文がfloatで回り込んで表示されてしまう問題が発生している。

ベストアンサー

HTML/CSS　モバイルのみワンカラムに

2015/09/01 16:30

Webページのレイアウトについてです。 Wordpressでブログを書いていて、 PCで見たときは左サイドバーがあり、本文があり、右サイドバーがある３カラムのレイアウトになっています。 http://chanori.biz/xd/introduce これをモバイルからみたときだけ、本文のみのワンカラムにしたいのです。通常ではfloatを使い、カラム表示していて、モバイルの時のみメディアクエリでfloat解除しているのですが、 PCの画面を小さくした時しか反映されず困っております。なぜiPhone(モバイル)から見た時、ヘッダーの右に本文がfloatで回り込みしたままなのでしょうか？お詳しい方よろしくお願いします。

lostsymbol
お礼率60% (31/51)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

paradoxica
ベストアンサー率65% (60/91)

2015/09/02 10:20 回答No.2

No. 1のものです。すみません、ざっと見ただけだったので状況が確認できておりませんでした。根本設計の部分に関わる複合的な問題だと思われます。 ( こちらの問題を解消するには根本設計の見直しが必要になる可能性が高いです ) 1. #content の所で右側マージンと左側マージンが設定されているため、左側マージンが適用されてズレて見えているような気がします。 2. CSSのレスポンシブ部分に関しまして、 @media (max-width: 400px) { と記載されておりますが、 max-width のみを最後に指定する記述法はあまり見かけません(通例 min-width 等で区切ったりします )。 http://sole-color-blog.com/blog/php/71/ こちら等でお手数ですが一度レスポンシブデザインの書き方を参考にしてみてください。 (更にレスポンシブデザインをiPhoneで適切に表示するためには meta の viewport指定が必須となります。崩れてしまったという事でお話を伺いましたが、一般的なスマホ対応を実施する場合、viewport指定をして且つスマホでもデザイン崩れせず見られるようにコーディングする必要があります ) また iPhone デバイス対応をする場合 max-width:480px が通例です( 縦画面で見た際320px, 横画面で見た際 480pxのため )。 3. また、こちらは憶測ですが、PCのサイトが元々あって、追加でレスポンシブ対応した形になりますか？？レスポンシブデザインはモバイルファースト設計といってモバイルでの見え方 PCの見え方それぞれ考慮した上で設計する必要があります( PC版であらかじめガチガチに組んであるものをレスポンシブ対応するのは既存のPC版のデザインにも影響が出たり、結構難しい作業になってきます )ので、レスポンシブ対応する場合は SP / PC 両面で設計を見直す、あるいは SP版、PC版で表示するページを変える等の対応が良いと思われます。レスポンシブデザインに関してはこちらの文献に丁寧に記載されており、参考になりますので是非一度書店でぱらぱらと読んでみてください。 http://goo.gl/NI754B 以上となります。参考になりましたら幸いです。

質問者

お礼 2015/09/02 10:35

3番でおっしゃられている通りです。レスポンシブのことなど全く考えずデザインし、あとで自分の携帯で見てみると悲惨な事になっていたので... レスポンシブデザインについて勉強し直して、作り直してみます。 PCの方もワンカラムが流行っているみたいなのでモバイルファーストを意識したワンカラムで行きます！！この度はお世話になりました。良かったらサイトをまた見に来てやってください<(_ _)> ありがとうございました。

その他の回答 (1)

paradoxica
ベストアンサー率65% (60/91)

2015/09/01 16:59 回答No.1

metaでviewport設定が必要です。 http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/

質問者

補足 2015/09/02 08:25

すいません、サイトを参考にヘッダーに記述したのですが、本文が縦１行にずらっと並んでしまいおかしくなってしまいました。 floatも解除されませんでした。

関連するQ&A

floatを使わずに、cssレイアウトって可能でしょうか？
例えば、現在見ているこのページのように、ヘッダーとフッターがあり、コンテンツが左右二つのカラムで成り立っているようなレイアウトを、floatでなくpositionで、レイアウトすることは可能でしょうか？（その際、左右どちらのカラムの方が、高さが高くなっても、レイアウトが崩れないように。） floatを使いたくない理由は、親ボックスからはみ出さないように、ハック（clearfix）を使わないといけないからです。
- ベストアンサー
- CSS
【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。　↓　↓　↓ <img src="xxx.jpg" style="float:left; width:100px"> 　　画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』の説明が載っているのですが、同じように組んでも上手く行きません…。本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？何卒、宜しくお願い致します。
- ベストアンサー
- HTML
CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
AFFINGER6のヘッダーエリアの高さCSS
環境 Wordpress 6.0.2 AFFINGER6 AFFINGER6のレイアウトのブラウザ上端から94pxの高さの画像（写真）をいれたいのですが、図の青いバーを越えて、投稿（本文/記事）近に画像の下端が来ていました。そこでヘッダーに使用されている領域に色をつけてみたところ、図のように緑色の範囲が存在していることがわかりました。【質問】このうち、赤い枠で囲った範囲は不要で、上端から94pxの高さにピッタリと画像をいれたいと考えました。【やったこと】設定項目で探して設定したものは、図の下半分にあるように｜Wordpress ｜外観＞ヘッダー＞・各メニュー設定＞ヘッダー画像｜「ヘッダー画像エリア」｜AFFINGER管理＞ヘッダー＞ヘッダーエリア｜「PCのみ」をみつけ、そこに高さの数値（94）を入力しましたが、赤い枠のエリアは消えません。外観＞テーマファイルエディターから、 CSS（style.css）を開き「/** ヘッダー画像」と書かれている項目もみてみましたが、CSSを書き換える箇所がみつけられません。 AFFINGER6を購入してまだ日が浅いのでわかっていない箇所も多いのですが、どこ/どの設定を編集したら、図の赤いエリアは消える（ヘッダー画像は上から94pxのみに設定）できるでしょうか？（スマホ表示も同様にしたいのですが、とりあえず今はPCブラウザーでの表示設定について質問させていただきます）
- 締切済み
- ブログ
HTML・CSSタグの書き方教えてください！
画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。このHOMEの左側のボーダーを消したい（又は見えなくする）タグを教えてください。最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、変わらず…。どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか？よろしくお願いいたします。＜HTML＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> <div id="main"> <div id="contents"> ***コンテンツ*** </div> <div id="leftsidebar"> ***左サイドバー*** </div> </div> <div id="rightsidebar"> ***右サイドバー*** </div> <div id="footer"> ***フッター*** </div> </div> </body> </html> ＜CSS＞ <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅（#wrapper）を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅（#content）を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅（#content）を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }
- ベストアンサー
- HTML
ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/　Googleマップ http://map.yahoo.co.jp/　　Yahooマップどなたかお力添えをお貸しください。宜しくお願いします。
- ベストアンサー
- CSS
ie7の印刷レイアウトがくずれます。css対策　
質問です。印刷についてのIE7対策をうかがいたいです。画面上はまったく問題ないのですが、いざ、印刷となると崩れてしまいます。フッターがメインメニューの半ばまで　せりあがって（崩れた形）で印刷されてしまいます。たぶん3のメニューが短いからか... (今後　a-2　が更新する可能性があるためにheightはautoにしてありますが。。) 対策としてはどうしたらよいでしょうか？よろしくお願いします。 ※print用のcss　はすでに作成しています。 IE8,ＦＩＲＥＦＯＸについてはフッターを css改行コードに強制改ページさせることにより修正は成功しています。メイン部分のレイアウトとしてはこういった感じです。 http://css.uka-p.com/3column/image.html レイアウトの順番としては。 0コンテナでつつんでます。 1ヘッダー height=auto 2メイン height=auto float: right; 　（内部）a-1　右エリア height=auto float: right; 　　（内部）a-2　メインの部分 height=auto float: none; 3左メニュー height=auto float: left; 4フッター　　height=auto clear:both; ちなみに画面上では　ie6,ie7.firefoxはまったく問題がありません.... よろしくお願いします。
- ベストアンサー
- CSS
アメブロcss 3カラムを2カラムに変更の仕方
アメブロカスタマイズについて。現在アメブロの3カラムをcssを編集し2カラム右メニューにしようとしているのですが、上手く2カラム右メニューに表示出来ません。まずサイドバー項目を右に全てずらし、左は空とし、 #sub_a{display:none;}として、 #mainの幅を拡大し2カラム左メニューは問題なく出来たのですが、メニューを右にずらす事が出来ておりません。感覚としては#mainは動かせているのですが、#sub_bがびくともしないような感覚です。現在のcssは以下のようになっており、表示としては#sub_bも#mainも左に寄っており、 #sub_bの下に#mainが表示されている状態です。具体的にどの点を修正すれば2カラム右メニューとなりますでしょうか？ #main{ float:left; width:673px; left: 0px; top: 0px; } #sub_main{ width:100%; overflow:hidden; } #sub_a{ display:none; } #sub_b{ float: right; width:200px; margin-left: 688px; top: 0px; z-index: 100; }
- 締切済み
- ブログ
HTMLのfloatタグの使い方？
http://but.mods.jp/mtos/ 上記のブログで本文を、左右に分けて表示しました。出来れば、左右の縦幅を揃えて、左右の間の空白も無くしたいです。つまり、長方形の真ん中に一本線が引かれて、左右に本文を書けるレイアウトです。上記のブログは、floatタグを使って、右（width４９％）、左（width５０％）で表現しています。 widthの値を５０％ずつにすると、スペースが足りない為なのか、左右に配置出来ず、上下に配置されます。何か良い方法は無いでしょうか？
- ベストアンサー
- CSS
cssでのナビゲーションのレイアウトについて
ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。希望のレイアウトは、 ※ヘッダー（サイズ：760×59.8PX）の左端にロゴマーク（126×59.8PX）、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で３つあり、A（サイズ：80×36PX）、B（75×34.2PX）、C（75×36.3PX）で、ロゴの右側になるべく等間隔で配置したい。というものです。これまでに試したのは、１、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが３つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。２、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか？よろしくお願いいたします。
- ベストアンサー
- CSS