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

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

新規登録して質問してみよう
ただいま回答率
85.51%
レスポンシブWebデザイン

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

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

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

2回答

2271閲覧

htmlをレスポンシブに!スマホでフォントを読み込まない・@mediaが適応されない

退会済みユーザー

退会済みユーザー

総合スコア0

レスポンシブWebデザイン

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

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

CSS

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

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

1グッド

0クリップ

投稿2016/08/09 03:00

google driveでhtmlをアップロードしました。

レスポンシブにしようと思い、cssで@mediaを指定しました。
webではフォントもデザインも崩れずに見れるのですが、スマートフォン(iPhone6s)でURLを確認するとフォントを読み込まない、デザインも崩れてしまうといった状況です。
スマホでもcssを読み込んでレスポンシブなホームページを作成したいです。

html

1<head> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <title>タイトル</title> 5 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 6 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 7 <script src="jquery.leanModal.min.js"></script> 8 <script> 9 $(function(){ 10 $("a[rel*=leanModal]").leanModal(); 11 }); 12 </script> 13</head>

html

1<div class="reserve-tokyo"> 2 <p class="region">あああ</p> 3 <div class="tokyo-box box"> 4 <p>いいい</p> 5 <a href="tel:0120-941-789">03-1234-5678</a> 6 <div class="price"><a rel="leanModal" href="#sample">ううう</a></div> 7 <div class="car"><p>えええ</p></div> 8 </div> 9</div>

css

1 .tokyo-box { 2 border: 5px solid #999999; 3 border-radius: 30px; 4 margin-right: 3%; 5 text-align: center; 6 margin:0; 7 padding-bottom:8%; 8 } 9 10 .tokyo-box p { 11 margin: 0; 12 padding-left:5%; 13 font-size: 5vw; 14 float: left; 15 } 16 17 .tokyo-box a { 18 font-size: 5vw; 19 text-decoration: none; 20 color:#000; 21 margin: 0; 22 margin-left: 8%; 23 } 24 25 .price { 26 border: 4px solid #fd0000; 27 width:50%; 28 margin: 0; 29 margin-left: 5%; 30 border-radius: 10px; 31 clear: both; 32 float: left; 33 } 34 35.price a { 36 font-size: 3.3vw; 37 margin: 0; 38 display: block; 39} 40.car { 41 float: left; 42 background-color: #fd0000; 43 color: #FFF; 44 border-radius:10px; 45 width:37%; 46 margin-left: 2%; 47 padding:2px,1%; 48} 49 50.car p { 51 font-size: 3.6vw; 52 padding: 2px,1%; 53 display: block; 54}

css

1 @media (max-width:768px) { 2 .box { 3 border: 4px solid #999999; 4 border-radius: 20px; 5 padding-bottom:7%; 6 } 7 8 .price { 9 border: 3px solid #fd0000; 10 border-radius: 7px; 11 } 12 13 .car { 14 float: left; 15 background-color: #fd0000; 16 color: #FFF; 17 border-radius:7px; 18 width:37%; 19 margin-left: 2%; 20 padding:2px,1%; 21 } 22 23 .car p { 24 font-size: 3.6458vw; 25 padding: 2px,1%; 26 display: block; 27 } 28 } 29 30 31/*---------------------------------------------media600px*/ 32@media (max-width:768px) { 33 .box { 34 border: 3px solid #999999; 35 border-radius: 17px; 36 } 37 38 .price { 39 border: 2px solid #fd0000; 40 border-radius: 5px; 41 } 42 43 .car { 44 border-radius:7px; 45 } 46} 47

他に情報が必要であれば追加いたしますので、ご回答の程よろしくお願いいたします。

kei344👍を押しています

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

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

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

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

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

kei344

2016/08/09 03:12

「フォントを読み込まない」とありますが、どこでフォントを読み込んでいるのでしょう。記述が見当たりません。
NatsumiOki

2016/08/09 03:29

@media (max-width:768px)が二つありますがどういう意図でしょうか?
退会済みユーザー

退会済みユーザー

2016/08/09 06:05

情報が不足していました。 cssのbodyでフォントを指定していたのを変更したら、フォントの問題が解決いたしました。 また、@mediaが2つあるというご指摘通り、記述が間違っておりました。 お二人のどちらかにベストアンサーをしたいと思っております。 回答になにか書かれたらそのタイミングでさせていただきますのでよろしくお願いします。
NatsumiOki

2016/08/09 06:08

自己解決したときは、ご自身でその内容を回答に書いて自己解決とすると良いですよ。
kei344

2016/08/09 06:26

NatsumiOkiさんと同じ意見です。解決できてよかったですね!
guest

回答2

0

ベストアンサー

css

1font-family:"メイリオ","Hiragino Kaku Gothic Pro",sans-serif;

フォントをこれに変更したことによって対応していない文字のの対処がなされるようになりました。

デザインの崩れは@mediaの記述が間違っていたので変更したのと、調節を行うことで改善しました。

投稿2016/08/09 06:35

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

投稿2016/08/09 05:39

Qual

総合スコア13

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問