• 締切済み

レスポンシブのコーディングについて

初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せのcss記述について 　　iPhone（320px）とAndroid（推定360px）の実機で表示確認をしながら 　　Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か 　　cssの書き方が悪いのか、画面の左右中央寄せにしたくて 　　片方のスマホサイズに合わせると、片方ずれてしまいます。 　　cssでどの画面サイズでも左右中央に寄る書き方はありますか？ ２：Media Queriesについて 　　１のcssの書き方がわからないので、画面サイズによって 　　Media Queriesを書き分ければ早いかなと思い、 　　iPhone用とAndroid用で別で記述してみたのですが、 　　画面サイズを指定してるにも関わらず、片方のMedia Queriesが 　　両方のスマホに反映してしまいます。 　　下記、Media Queriesの記述内容です。 　　iPhone用（幅320px） 　　@media screen and (max-width: 320px) { 　　Android用（幅：360px） 　　@media screen and (max-width: 360px) and (min-width: 321px) { 　　上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 　ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F　です よろしくお願いします。 よろしくお願いします。

  • CSS
  • 回答数4
  • ありがとう数3

みんなの回答

noname#206842
noname#206842
回答No.4

私の場合は、mediaQueriesを、下記のように記述しています。 携帯端末用 @media only screen and (min-width: 200px) and (max-width: 299px){} スマートホン用 @media only screen and (min-width: 300px) and (max-width: 400px){} タブレット用 @media only screen and (min-width: 401px) and (max-width: 600px){} PC用 @media only screen and (min-width: 601px) and (max-width: 960px){} 各機種ごとに設定すると、記述が面倒になってしまいますよ！ ＨＴＭＬに、viewpor は、記述されていますか？・・・ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

noname#205112
noname#205112
回答No.3

320pxと360pxは統一してもいいと思います。 <html>,<body>と<header>や<section>のような親要素を width:100%; にします。 その子要素のwidth:%は親要素の100%に対して計算されます。 width:95%; max-width:700px; (pc用) min-width;300px; (スマホ用) margin: 0 auto 0; (中央配置) また display:flex を使うと都合よくリサイズされます。 http://liginc.co.jp/web/html-css/css/21024 http://developers.linecorp.com/blog/?p=2479

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.2

あ、width:100%;でどうでしょう。 display: table; width: 100%; vertical-align: middle; text-align: center; こんな感じ！

  • doraneko66
  • ベストアンサー率11% (535/4742)
回答No.1

単に display: table; width:320px; vertical-align: middle; text-align:center; とかもあると思いますけどね。 ちょっと試してないから、実装みてないけど こんなんどうでしょう。

tarak0v0
質問者

補足

ご回答ありがとうございます。 ご教示頂いた内容で実装してみたのですが だめでした；；

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • webレスポンシブ　

    新たに問題が出てきまして、 iphoneの表示で確認した所、 footerの画像が消えてくれません。 [問題の箇所] Media QueriesにてCSS /*=============================================== 画面の横幅が320pxまで ===============================================*/ @media screen and (max-width:320px){ footer{ background-image: url(images/footer/footer_wood.jpg); display:none; } どうぞ宜しくお願いします。

  • Media Queries ってDBあるのですか？

    メディアクエリってジャバクエリみたいにデータベースがあるのですか？ ホームページを持っているのですが、リアルで知り合いの人に、スマホで見るときPC表示で見づらいといわれてしまいました。( ；∀；) 前々からメディアクエリというものがあるのは知っていたのですが、どう探してもDLページにたどり着けません。 一応それらしきサイトは見つけたのですがこちらであっているでしょうか？⇒（http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/）Media Queriesと書いてあるので、おそらくここなのかなと思いますがいかがでしょうか。 本題に戻りますが、Media QueriesってメディアごとにCSSを振り分けるやつらしいのですが、記述方法がよくわかりません。（ここ見ました：http://dev.classmethod.jp/smartphone/device-media-queries/） JQueryみたいにDB（データベース）は無いのでしょうか？あるとすると、どのサイトにあるか教えてください。DBが存在しない場合、http://dev.classmethod.jp/smartphone/device-media-queries/に書かれていた通り<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >でいいのでしょうか。また、下記のように書く際はどのように記述すればよいのですか？”セレクタ@media ～”でいいのでしょうか？ <style type="text/css"> <!-- //--> </style> よろしくお願いします。(´・ω・`)

    • ベストアンサー
    • CSS
  • レスポンシブWeb 右側の表示が切れてます

    　レスポンシブWebデザインのサイトを作っています。 　スマホの画面では右側の表示がきれてしまいます。 marginとpaddingは左に効いても、右には効きません。 　PCの画面では想定どおりに表示します。 <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/common-l.css"> <link rel="stylesheet" href="css/common-s.css" media="only screen and (max-width:599px)"> 　PC用のcommon-l.cssを使わずスマホ用のcommon-s.cssだけを使うと表示は正常 でmarginとpaddingも効きます。common-l.cssが影響しているのはわかりました。 ためしにPC用のwidthを削るとスマホ画面の表示は正常になりました。当然PC用 画面の表示はおかしくなりますが。 　なお「width: 650px;」を「width: 72.22%;」にしても結果は同じです、 ////　PC用 common-l.css　////////////////// #content{ float: left; width: 650px;　　←この行を削るとうまくいきます background-color: #FFFFFF; } ////　スマホ用 common-s.css　////////////////// p{width: 100%;} #content{ width: 100%; background-color: #FFFFFF; margin: 10px 50px 10px 10px; } 　原因まではわかりましたが、対策がわかりません。PC用とスマホ用の両方の表示を まともにするにはどうすればいいでしょうか？　心当たりがあればお答えください。

    • ベストアンサー
    • CSS
  • レスポンシブのデザインについて

    ポスポンシブのデザインを設計する際はどのように書いていますか？ iPhone5系などの320×568を基準に作っていますか？ それともシェアが多い375×667を基準ですか？ デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。 なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。 今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか？ 320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、 レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。

    • 締切済み
    • CSS
  • レスポンシブwebデザインでユーザに選択肢を与える

    解像度別でスタイルが自動適用されるレスポンシブwebデザインについて、詳しい方へお伺いいたします。 例：　http://www.webdesignerwall.com/demo/media-queries/ ※上の参考URLは違いますが、Media QueriesはjQuery Media Queries Plugin利用利用・W3C準拠前提。別の方法があればその方法も知りたいです。 端末別に4種類ほどデザインを用意した場合で、 例　http://mediaqueri.es/ ・携帯ユーザが最初にアクセスした時自動適用されたのが携帯用デザインで、 ・しかし携帯ユーザがその端末でく別サイズ用デザインを望んだとき、 ・携帯端末でも任意にCSSを選ぶことができ、 ・一度選んだら画面遷移後もPCサイズのCSSを適用 とすることはできるのでしょうか。 できるとしたら、そのためにはどのような方法（Javascript/Plugin）があるでしょうか。 そのようなサイトがあれば、参考URLも教えて頂けますと幸いです。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • cssで、全体を中央寄せ、文字は左寄せにする方法

    CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • widthでcss,js切換可能でしょうか。

    【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。

  • レスポンシブWEBデザインのメディアクエリについて

    いつもお世話になります。 レスポンシブWEBデザインでサイト制作を行っています。 メディアクエリについて詳しい方、いらっしゃいましたら教えてください。 フルHD（1080×1920）のスマホのビューポイントをどのように設定するのが適当か悩んでいます。 @media screen and (min-width:480px)and(max-width:1080px) のように設定しようかと思いましたが、iPadminiのように、解像度が1024×768だと かぶってしまい、適当じゃない表示になるのを危惧しています。 実機で試せば良いのですが、どのようにビューポイントを設定しているのか、 是非、参考にさせて頂ければ幸いです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 横スクロールサイトの中央寄せ

    お世話になります。 http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html 上記サイトを参考に横スクロールのサイトを作っているのですが、 中央寄せがうまく出来ません。 上記サイトのCSSで .page { margin:0px; bottom:0px; width: 2000px; // ページ幅を大きめに！ float: left; height: 100%; } ここの部分で幅が2000pxに設定してしまうので、それ以下の幅にしても中央寄せになってくれないのです。 何かいい手はないでしょうか。ご教示ください。 よろしくお願いします。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する