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
他に情報が必要であれば追加いたしますので、ご回答の程よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー