teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップCSSに関する質問
CSS

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

Q&A

解決済

2回答

1488閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

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

0グッド

0クリップ

投稿2017/03/04 09:14

0

0

現在、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;}

}

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

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

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

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

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

kei344
kei344

2017/03/04 09:50

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

回答2件

0

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

css
1@media screen and (min-width:1000px){
2  /* PC用 */
3@media screen and (max-width:999px){
4  /* スマホ用 */
5}
6```です。

投稿2017/03/04 10:46

shi_ue
shi_ue

総合スコア4437

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

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

退会済みユーザー

退会済みユーザー

2017/04/02 03:36

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

0

ベストアンサー

css
1@media screen and (min-width:1000px)
2{
3    //PC
4}
5
6@media screen and (max-width:999px)
7{
8    //スマホ
9}

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

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

投稿2017/03/12 14:21

編集2017/03/12 14:23
AmisakiGou
AmisakiGou

総合スコア64

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップCSSに関する質問

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