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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

582閲覧

レスポンシブデザインが適切に適用されません。タブレット向けのcssの内容がスマホ画面で適用されてしまいます。

NirohShimashita

総合スコア19

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/03/19 10:28

編集2019/03/19 10:33

自分のブログを作成しています。レスポンシブデザインの設定でつっかかってしまいました。タブレット向けに書いたつもりのcssの内容がスマホ画面に適用されてしまいます。Webデザインに詳しい方いらっしゃいましたら対処法を教えていただけるとありがたいです。

<body>の<h1>にあるブログの題名(Niroh's Blog)をいじくろうとしています。 ローカル環境ではスマホ向けに書いたcssが適用されて、狙ったとおり大きく表示されるのですが、 本番環境ではスマホ画面でもタブレット向けのcssが適用されてしまって表示小さくなってしまいます。 画像はChromeで表示したものですが、実際にスマホで表示しても小さく表示されてしまっています。

ローカル環境のでの表示
こうなってほしい、という状態

本番環境での表示
こうなってしまう、という状態

デプロイはpythonのdjangoで行っています。
可能性としてはそちらに問題があるのかもしれません。

どなたか原因として考えられるアイデアがあれば教えていただけると嬉しいです。
何卒よろしくお願いいたします。

該当のソースコード

base.html

html

1<html> 2<head> 3<title>Niroh's Blog</title> 4<meta name="viewport" content="width=device-width,initial-scale=1"> 5{% load static %} 6<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}"> 7<link rel="stylesheet" type="text/css" href="{% static 'blog/responsive-style.css' %}"> 8</head> 9<body> 10<a href="{% url 'index' %}"> 11/*大きく表示したいのはここです*/ 12<h1>Niroh's Blog</h1> 13</a> 14<div> 15 <br><br> 16 {% block body %} 17 {% endblock %} 18 <br><br> 19</div> 20</body> 21</html>

style.css

css

1* { 2 background-color:white; 3} 4 5 6h1 { 7 font-size: 80; 8 font-family: 'arial black', sans-serif; 9 font-weight: bold; 10 text-align: center; 11 text-decoration: none; 12 color: rgb(197, 199, 199); 13} 14 15a:link { 16 text-decoration: none; 17} 18a :hover { 19 text-decoration: underline; 20} 21 22body { 23 margin: 50; 24 font-family: "Hiragino Kaku Gothic ProN", sans-serif; 25} 26

responsive-style.css

css

1/* スマホ向けレイアウト */ 2@media screen and (max-width: 480px) { 3 h1 { 4 font-size: 60; 5 margin: 40px 0px; 6 } 7 8 body { 9 margin: 40; 10 } 11 12} 13 14/* タブレット向けレイアウト */ 15@media screen and (min-width: 480px) and (max-width: 1030px) { 16 h1 { 17 font-size: 80; 18 padding: 40px 10px; 19 } 20 21 body { 22 margin: 100; 23 } 24}

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

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

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

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

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

guest

回答2

0

ベストアンサー

単位が要るのでは?

CSS

1font-size: 60px;

投稿2019/03/19 11:19

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2019/03/19 11:35

メディアクエリの MIN/MAXてこれでいいんだっけ?
kei344

2019/03/19 11:41

To: asahina1979さん 調べてみてください。
NirohShimashita

2019/03/19 16:35

kei344さん、asahina1979さん、ご回答をいただき有難うございます。 pxをつけてpushとpullをしてみたのですが、表示は変わらないみたいで、どうも別で原因があるようです。何か他でアイデアがありましたら教えていただけないでしょうか…? chrome上で仮想的にスマホ画面サイズで表示させて、css情報を表示させてみると、 @media screen and (max-width: 1030px) and (min-width: 480px) が読み込んでいるcssとして表示されます。画像でいうと2枚めの右の赤丸の部分です。これは本当はタブレット用に書いているcssの部分で、本来はスマホのサイズ、横幅が480px以下の画面で表示するときは読み込まれないはずのcssなのですが、この部分が読み込まれてしまうためにタブレット向けに書いているpaddingの設定が読み込まれてしまって、結果的に文字が小さくなっているという状態であるようです。 やはりメディアクエリの書き方に間違いがあるのでしょうか…?
kei344

2019/03/19 16:54

いくつもの箇所で単位が無いので、全て修正した後、とりあえずキャッシュを消してください。 提示された内容で特に問題なくmedhiaクエリが効いている事をWindows/Chromeで確認しました。 https://jsfiddle.net/mas2nv9r/ https://jsfiddle.net/mas2nv9r/show/ ※ 単位が無い箇所はデベロッパーツールのCSS部分でエラーとして表示されています。
NirohShimashita

2019/03/20 09:52

kei344さん デベロッパーツールでわざわざ確認までしていただいて有り難いです。 有難うございます。 pxをすべてちゃんとつけて改めてpush->pullしたのですが、表示に変わりがありませんでした。キャッシュを消すというのがどうやったらできるのかわからず、サーバーで利用しているnginxを再起動してみたのですがこれはキャッシュを消すことになっているでしょうか…? 何度も何度も申し訳ないです。もしよろしかったらご返事いただけると幸いです。
kei344

2019/03/20 12:04

サーバー側にもブラウザ側にもキャッシュがあり、ブラウザもキャッシュを消して読み込みなおすことをお勧めします。 【【みんなの知識 ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】 http://www.benricho.org/Tips/page_reload/
guest

0

kei344さん、asahina1979さん、ご協力いただいて本当に有難うございました。
アドバイスをいただきながらいろいろと試行錯誤させていただいたことで、無事解決することができました。
有難うございます。

kei344さん、キャッシュの消し方(スーパーリロードの仕方)を教えていただき有難うございます。普通の更新だとキャッシュなどは残されてしまうのだと知りませんでした。自分はMacでChromeを使うことが多いので⌘+Rでスーパーリロードできるようです。勉強になりました。今後使っていきます。ありがとうございます。

問題の方なんですが、結局ひょんなことから解決することになりました。本番環境ではDjangoで書いたプログラムをnginxとgunicornを使って動かしていまして、いつもプログラムを更新したときはnginxを再起動させてサイトを更新していたのですが、この時にgunicornもちゃんと再起動させるとresponsive-cssが適切に読み込まれました。なぜgunicornも再起動させるとresponsive-cssが適切に読み込まれ、そうでないとそうならないのか、自分には知識がなくてよくわからないのですが、偶然それを試してみたところそれでうまくいきました。

結局よくわからないところで解決することになったのですが、一人で行き詰まったときにアドバイスをくださる方がいるとそれだけで希望が持てるのでとても有難かったです。とくにkei344さん、たくさんお時間を割いていていただいてしまって恐縮ですが、おかげさまで無事解決することができました。ご協力頂いて本当に有難うございました。

投稿2019/03/20 13:46

NirohShimashita

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問