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

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

ただいまの
回答率

89.06%

レスポンシブデザイン対応を行う際のCSSについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 862
退会済みユーザー

退会済みユーザー

現在、PHPを使用してウェブサービスを作っております。
基本的な質問で大変恐縮なのですが、レスポンシブ対応を行う為にhtmlと
CSSを修正したのですが、google chromeの要素検証でスマホ画面を試してみても、CSSが適用されておらず、何が原因なのかがわからない状態でございます。

初歩的な質問で恐縮でございますが、
何が原因でCSS適用がされないのか、ご教示頂けますと幸いでございます。
宜しくお願い致します。

<html>

<!doctype html>
<html lang="ja" class="top">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body class="top">
   <?php require("header.php"); ?>
   <div class="top">
     <div class="main7">
        <p class="top1">
        テスト</p>

            <div style="margin-top:10%; margin-left:10%; color:black; padding:5px;
            background-color:#f8f8ff;
            height:120px; width:25%; border-radius:5px; float:left;">
                <p style="margin:0px 0px 5px 5px; text-decoration:underline;">特徴①</p>
                <p style="margin:0px">テスト</p>
            </div>

           <div style="margin-top:10%; margin-left:2%; color:black; background-color:#f8f8ff;
            height:120px; width:25%; border-radius:5px; float:left; padding:5px;">
                <p style="margin:0px 0px 5px 5px; text-decoration:underline;">特徴②</p>
                <p style="margin:0px;">テスト</p>
            </div>

            <div style="margin-top:10%; margin-left:2%; color:black; background-color:#f8f8ff;
            height:120px; width:25%; border-radius:5px; float:left; padding:5px;">
                <p style="margin:0px 0px 5px 5px; text-decoration:underline;">特徴③</p>
                <p style="margin:0px;">テスト</p>
            </div>

                        <a href="regis.php" style="color:white; background-color:#1e90ff; border-radius:5px;
            padding:2px 5px 2px 5px; float:left; text-decoration:none; margin:40px 0px 0px 45%; font-size:20px;">登録して始める</a>

     </div>
   </div>
   <?php require("footer.php"); ?>
</body>

また、以下がCSSになります。
後段は前段をコピーした状態なのですが、CSS適用自体がなされず、
要素検証をしても背景色も何も変わらない状態である為、
止まってしまっております。

<css>

@media  screen( min-width:1000px ){
body.top{margin:0px; width:100%; height:700px;}
p.top1{color:black; font-size:20px; margin:0px; padding-top:55px;
        margin-left:150px;}
p.top2{margin:0px 0px 5px 5px; text-decoration:underline;}
a.header{display:block; text-decoration:none; color:white; margin:0px 0px 0px 20px; font-size:30px; padding-top:10px; width:20%; float:left;}
html.top{margin:0px; width:100%; height:700px;}
div.top{height:400px width:100%; margin:0px;}
div.header{background-color:#fa8072; margin:0px; height:70px; width:100%;}
div.footer{background-color:#fa8072; margin:0px; height:150px; width:100%;}
div.main{height:970px; width:100%; }
div.main7{height:500px; width:100%; background-image: url("top.jpeg"); background-size:100% 100%;}
div.login{height:370px; width:100%; background-color:#fffafa; padding-top:20px;}
body.login{margin:0px; width:100%; height:500px;}
html.login{margin:0px; width:100%; height:500px;}
div.mypage{min-height:970px; width:100%; background-color:#fffafa; padding-top:40px;}
div.regis{margin:0px; height:400px; background-color:#fffafa; padding-top:20px;}
html.regis{margin:0px;}
body.regis{margin:0px;}
div.regis_form{margin-left:22%; width:46%; border-style:solid; border-width:2px; 
height:200px; margin-top:20px; margin-bottom:70px; border-color:#fa8072; background-color:white;}
div.mypage_news{height:200px; width:60%;  margin:1% 0% 0% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; }
div.mypage_book{height:130px; width:56%;  margin:1% 0% 0% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; padding:2%;}
div.mypage_event{min-height:200px; width:40%;  margin:1% 0% 3% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; } 
body.message{margin:0px; width:100%; height:1000px;}
html.message{margin:0px; width:100%; height:1000px;}
div.message{min-height:800px; width:100%; margin:0px; background-color:#fffafa;}
div.message_form{margin-left:20%; width:60%; heihgt:70%;}
div.message_detail{width:60%; height:80px; margin:0% 0% 0% 20%; border-top:solid; padding-bottom:7px; 
border-width:1px; border-color:#dcdcdc; position:relative; 
background-color:white;}

body.event{margin:0px; width:100%; min-height:1800px;}
html.event{margin:0px; width:100%; min-height:1800px;}
div.event{min-height:1800px; width:100%; margin:0px; background-color:#fffafa; padding-top:30px;}
div.event_cont{min-height:1500px; margin-top:20px; width:60%; margin-left:15%; padding-bottom:40px;}
div.event_cont2{height:100px; width:100%; border-top:solid; background-color:white;
border-width:1px; border-color:#dcdcdc; }
body.event_detail{margin:0px; width:100%; height:1000px; }
html.event_detail{margin:0px 0px 0px 0px; width:100%; height:1000px;}
div.event_detail{height:800px; width:100%; margin:0px; background-color:#fffafa;
padding-top:20px;}
div.event_form{margin-left:20%; width:40%; height:600px;  background-color:white; padding:20px 20px 20px 20px;}
div.book_form2{margin-left:20%; width:40%; height:640px;  background-color:white; padding:20px 20px 20px 20px;}
}

/* スマホ用CSS */
@media screen( max-width:999px ){
   body.top{margin:0px; width:100%; height:700px;}
p.top1{color:black; font-size:20px; margin:0px; padding-top:55px;
        margin-left:150px;}
p.top2{margin:0px 0px 5px 5px; text-decoration:underline;}
a.header{display:block; text-decoration:none; color:white; margin:0px 0px 0px 20px; font-size:30px; padding-top:10px; width:20%; float:left;}
html.top{margin:0px; width:100%; height:700px;}
div.top{height:400px width:100%; margin:0px;}
div.header{background-color:#fa8072; margin:0px; height:70px; width:100%;}
div.footer{background-color:#fa8072; margin:0px; height:150px; width:100%;}
div.main{height:970px; width:100%; }
div.main7{height:500px; width:100%; background-image: url("top.jpeg"); background-size:100% 100%;}
div.login{height:370px; width:100%; background-color:#fffafa; padding-top:20px;}
body.login{margin:0px; width:100%; height:500px;}
html.login{margin:0px; width:100%; height:500px;}
div.mypage{min-height:970px; width:100%; background-color:#fffafa; padding-top:40px;}
div.regis{margin:0px; height:400px; background-color:#fffafa; padding-top:20px;}
html.regis{margin:0px;}
body.regis{margin:0px;}
div.regis_form{margin-left:22%; width:46%; border-style:solid; border-width:2px; 
height:200px; margin-top:20px; margin-bottom:70px; border-color:#fa8072; background-color:white;}
div.mypage_news{height:200px; width:60%;  margin:1% 0% 0% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; }
div.mypage_book{height:130px; width:56%;  margin:1% 0% 0% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; padding:2%;}
div.mypage_event{min-height:200px; width:40%;  margin:1% 0% 3% 20%; border-style:solid;
border-width:2px; border-color:#fa8072; background-color:white; } 
body.message{margin:0px; width:100%; height:1000px;}
html.message{margin:0px; width:100%; height:1000px;}
div.message{min-height:800px; width:100%; margin:0px; background-color:#fffafa;}
div.message_form{margin-left:20%; width:60%; heihgt:70%;}
div.message_detail{width:60%; height:80px; margin:0% 0% 0% 20%; border-top:solid; padding-bottom:7px; 
border-width:1px; border-color:#dcdcdc; position:relative; 
background-color:white;}

body.event{margin:0px; width:100%; min-height:1800px;}
html.event{margin:0px; width:100%; min-height:1800px;}
div.event{min-height:1800px; width:100%; margin:0px; background-color:#fffafa; padding-top:30px;}
div.event_cont{min-height:1500px; margin-top:20px; width:60%; margin-left:15%; padding-bottom:40px;}
div.event_cont2{height:100px; width:100%; border-top:solid; background-color:white;
border-width:1px; border-color:#dcdcdc; }
body.event_detail{margin:0px; width:100%; height:1000px; }
html.event_detail{margin:0px 0px 0px 0px; width:100%; height:1000px;}
div.event_detail{height:800px; width:100%; margin:0px; background-color:#fffafa;
padding-top:20px;}
div.event_form{margin-left:20%; width:40%; height:600px;  background-color:white; padding:20px 20px 20px 20px;}
div.book_form2{margin-left:20%; width:40%; height:640px;  background-color:white; padding:20px 20px 20px 20px;}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/04 18:50

    「適用されていない」というのはどのような状態でしょうか。ファイルが読み込まれていないのか、またどのように確認したのかを質問文に追記されてはいかがでしょうか。

    キャンセル

回答 2

+4

mediaクエリーの書き方が間違っています。

@media screen and (min-width:1000px){
  /* PC用 */
@media screen and (max-width:999px){
  /* スマホ用 */
}

です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/02 12:36

    皆様、アドバイスご教示頂きありがとうございました、
    キャッシュを削除したら反映されるようになりました^^
    今後ともよろしくお願い致します!

    キャンセル

checkベストアンサー

+2

@media screen and (min-width:1000px)
{
    //PC
}

@media screen and (max-width:999px)
{
    //スマホ
}

andが抜けていますね。
また、余談ですがメンテナンスすることを考慮して
CSSファイルが存在するのであればHTMLに直接スタイル書くのはお勧めしません。
デザインのバグが出た際に原因が特定しづらいからです。

あとはレスポンシブのサイトを作成するのであればViewPortを使用する事を推奨します。
<meta name="viewport" content="width=device-width,initial-scale=1">
HTMLに挿入すればOKです!
↑ごめんなさい。書かれてました。。無視してください><

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る