メディアクエリーをHTMLに記載したのに、スマホサイズにならない。

HTMLにこれを入れたのに、スマホサイズにはならず、pcサイズとタブレットサイズのみ大きさが変わる。

スマホサイズにも適用したいです。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4      <meta charset="utf-8">
5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>My Portfolio</title>
7        <link rel="stylesheet" href="stylesheet.css">
8        <link rel="stylesheet" href="responsive.css">
9        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
10        <!-- fontawesome -->
11        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
12        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
13    </head>
14<body>
15<header>
16<div class="container">
17<div class="header-left"><!-- menu-section -->
18  <div class="menu-toggle">
19    <div class="menu-toggle">
20    <div class="one"></div>
21    <div class="two"></div>
22    <div class="three"></div>
23  </div>
24</div>
25
26
27<div class="header-right">
28<a href="http://pikacho.jp" target="_blank">My Blog</a>
29<a href="https://twitter.com" target="_blank">Twitter</a>
30<a href="https://github.com/pikacho007" target="_blank">github</a>
31<a
32</div>
33</div>
34</header>
35<!-- header -->
36<div class="top-wrapper">
37<div class="container">
38<h1>HELLO.</h1>
39<h1>WELCOME TO MY PORTFOLIO.</h1>
40</div>
41</div>
42<!-- top-wrapper -->
43<div class="introduction">
44<div class="container">
45<div class="heading">
46<img src="img/my_face.jpg">
47<h2>Who I am</h2>
48<p>鹿島学園高等学校卒後、<br>約１年間ヒューマンアカデミーでお世話になる。</p>
49<h3>Love</h3>
50<p>うさぎ、英語、ゲーム、海外ドラマ鑑賞、海外映画鑑賞、静かなカフェに行く。<br>特に本屋さんの横についているカフェが好き。</p>
51</div>
52</div>
53</div>
54<!-- introduction -->
55<div class="lesson-wrapper">
56<div class="container">
57<div class="heading">
58<h2>What I Can Do!</h2>
59</div>
60<div class="lessons">
61<div class="lesson">
62<div class="lessons-icon">
63<img src="https://prog-8.com/images/html/advanced/html.png">
64<p>HTML & CSS</p>
65</div>
66</div>
67<div class="lesson">
68<div class="lessons-icon">
69<img src="https://prog-8.com/images/html/advanced/jQuery.png">
70<p>JavaScript</p>
71</div>
72</div>
73<div class="lesson">
74<div class="lessons-icon">
75<img src="https://prog-8.com/images/html/advanced/ruby.png">
76<p>Illustrator</p>
77</div>
78<p class="text-contents"></p>
79</div>
80<div class="lesson">
81<div class="lessons-icon">
82<img src="https://prog-8.com/images/html/advanced/php.png">
83<p>Photoshop</p>
84</div>
85</div>
86<div class="clear"></div>
87</div>
88</div>
89</div>
90<!-- lesson-wrapper -->
91<div class="works">
92<div class="container">
93
94<div class="bottom">
95<h2>What I Made</h2>
96  <div class="portfolio">
97    <h3>My Portfolio</h3>
98      <img src="img/portfolio.png">
99      <p>今までに作った作品を載せているサイトです。このサイトはHTML,CSS,JSを使って作成しました。</p>
100  </div>
101  <div class="icons">
102    <h3>Logo</h3>
103      <img src="img/instagram_logo_by_myself.jpg">
104      <img src="img/pokemon_ball.png">
105      <img src="img/smartphone.png">
106      <p>Photoshop,Illustratorの操作の練習をしたくて、youtubeで作り方の動画を見ながら作って見ました。</p>
107  </div>
108  <div class="website">
109    <h3>komorikomasha</h3>
110      <img src="img/website.png">
111          <p>本を見ながら、ヒューマンアカデミーのクラスではじめて作ったウェブサイトです。HTML,CSS,jQueryを使って制作しました。</p>
112  </div>
113</div>
114<!-- works -->
115<div class="contact">
116<h2>Contact Me</h2>
117<img src="img/mail.png">
118<p><a href="hikaripoppo@gmail.com" target="_blank">hikaripoppo@gmail.com</p>
119</div>
120<!-- contact -->
121<p id="page-top">
122  <a href="#"><i class="fas fa-angle-up my-small"></i></a>
123</p>
124<!-- page-top -->
125<footer>
126<div class="container">
127  <p>Copyright 2018 Pikacho</p>
128</div>
129</footer>
130<!-- footer -->
131<script>
132$(function () {
133    var topBtn = $('#page-top');
134    topBtn.hide();
135    //スクロールが500に達したらボタン表示
136    $(window).scroll(function () {
137        if ($(this).scrollTop() > 500) {
138            topBtn.fadeIn();
139        } else {
140            topBtn.fadeOut();
141        }
142    });
143    //スルスルっとスクロールでトップへもどる
144    topBtn.click(function () {
145        $('body,html').animate({
146            scrollTop: 0
147        }, 500);
148        return false;
149    });
150});
151</script>
152</body>
153</html>

css
1* {
2box-sizing: border-box;
3}
4
5body {
6margin: 0;
7font-family: "Hiragino Kaku Gothic ProN", sans-serif;
8}
9
10a {
11text-decoration: none;
12}
13
14.clear {
15clear: left;
16}
17
18.header-left p .fas.fa-bars {
19  font-size: 1.8em;
20  padding-top: 4px;
21}
22
23header p {
24color: white;
25font-family: "Hiragino Kaku Gothic ProN", sans-serif;
26}
27
28.container {
29max-width: 1170px;
30width: 100%;
31padding: 0 15px;
32margin: 0 auto;
33}
34
35.container h1 {
36  color: white;
37}
38
39.top-wrapper {
40padding: 180px 0 100px 0;
41background-image: url("img/top.jpg");
42/*
43↑こっちは自分で選んだ画像。
44↓プロゲートの時に使っていた画像。
45background-image: url(https://prog-8.com/images/html/advanced/top.png);
46*/
47background-size: cover;
48color: white;
49text-align: center;
50}
51
52.top-wrapper h1 {
53opacity: 0.7;
54font-size: 45px;
55letter-spacing: 5px;
56}
57
58.top-wrapper p {
59opacity: 0.7;
60}
61
62.btn {
63padding: 8px 24px;
64color: white;
65display: inline-block;
66opacity: 0.8;
67border-radius: 4px;
68text-align: center;
69}
70
71.btn:hover {
72opacity: 1;
73}
74
75.fa {
76margin-right: 5px;
77}
78
79header {
80height: 65px;
81width: 100%;
82background-color: rgba(34, 49, 52, 0.9);
83position :fixed;
84top: 0;
85z-index: 10;
86}
87
88.header-left {
89float: left;
90}
91
92.header-right {
93float: right;
94margin-right: -25px;
95}
96
97.header-right a {
98line-height: 65px;
99padding: 0 25px;
100color: white;
101display: block;
102float: left;
103transition: all 0.5s;
104}
105
106.header-right a:hover {
107background-color: rgba(255, 255, 255, 0.3);
108}
109
110.introduction {
111  text-align: center;
112  padding-top: 30px;
113  padding-bottom: 30px;
114}
115
116.introduction img {
117  width: 250px;
118  height: 250px;
119}
120
121.introduction h2 {
122  padding-top: 35px;
123}
124
125.introduction h3 {
126  padding-top: 35px;
127}
128
129.lesson-wrapper {
130  padding-bottom: 80px;
131  padding-left: 5%;
132  padding-right: 5%;
133  background-color: #f7f7f7;
134  text-align: center;
135}
136
137.heading {
138  padding-top: 80px;
139  padding-bottom: 50px;
140  color: #5f5d60;
141}
142
143.heading h2 {
144  font-weight: normal;
145}
146
147.lesson {
148  float: left;
149  width: 25%;
150}
151
152.lessons-icon {
153  position: relative;
154}
155
156.lessons-icon p {
157  position: absolute;
158  top: 44%;
159  width: 100%;
160  color: white;
161}
162
163.works {
164  text-align: center;
165}
166
167.works h2 {
168  padding-top: 100px;
169}
170
171.contact {
172  text-align: center;
173}
174
175.contact h2 {
176  padding-top: 100px;
177}
178
179.contact img {
180  padding-top: 30px;
181}
182
183#page-top {
184    position: fixed;
185    bottom: 20px;
186    right: 20px;
187    font-size: 80%;
188}
189
190#page-top a {
191    color: gray;
192    padding: 0 25px;
193    border-radius: 10px;
194}
195
196#page-top a:hover {
197    text-decoration: none;
198}
199
200.my-small {
201  font-size: 2.5em;
202}
203
204i.fa-angle-up {
205  padding: 1px;
206}
207
208.portfolio h3 {
209  color: black;
210  padding-top: 30px;
211}
212
213
214.icons h3 {
215  color: black;
216  padding-top: 50px;
217}
218
219.icons img {
220  width: 100px;
221  height: 100px;
222}
223
224.website h3 {
225  color: black;
226  padding-top: 50px;
227}
228
229.website p {
230  padding-top: 10px;
231}
232
233/*
234.portfolio img {
235}
236*/
237
238footer img {
239  width: 125px;
240}
241
242footer p {
243  color: #b3aeb5;
244  font-size: 12px;
245  text-align: center;
246  border-top: 1px solid #f7f7f7;
247  padding-top: 30px;
248}
249
250footer {
251  padding-top: 30px;
252  padding-bottom: 20px;
253}

yoshinavi

2018/10/08 04:57

メディアクエリがありませんが、各要素の「ブレイクポイント」は設定せず、全体的にデバイス幅に対応させるのでしょうか？

hikari_poppo

2018/10/08 06:43

今さっき、メディアクエリがないのを知りました。ブレイクポイントがあってもなくてもいいです。全体的にデバイス幅を対応させたいです。

yoshinavi

2018/10/08 06:54

＞ブレイクポイントがあってもなくてもいい･･･　→　これには大きな違いがあります。それは、各要素の大きさに制限を掛けるかどうかで、「見やすさ」が変わります。PCの画面で丁度良い大きさの文字やボタンが、スマホだと、小さく読めない・ボタンが押せない等出てきます。逆もあり、PCだとデカ過ぎて見難いとなります。じゃぁ「大きさは固定」で、これも弊害が出てきます。なぜブレイクポイントが必要な場合があるのか？を、少し勉強されると良いかと思います。

yoshinavi

2018/10/08 07:02

＞全体的にデバイス幅を対応させたいです。　→　問題の要素に変動する単位「％」「vw」「vh」等を使用されると良いかと思います。

行動規範の内容に同意します

回答3件

えっとメディアクエリらしい記述が見つからないんですが...
<meta name="viewport" content="width=device-width">←はビューポートです。

もし、スマホで文字を大きくしたいなら上でいいはずですが別のスタイルを指定したい場合は

HTML
1<meta name="format-detection" content="telephone=no">
2<link media="only screen and (max-device-width:480px)"
3href="smart.css" type="text/css" rel="stylesheet" />
4<link media="screen and (min-device-width:481px)" href="design.css"
5type="text/css" rel="stylesheet" />
6<!--[if IE]>
7<link href="design.css" type="text/css" rel="stylesheet" />
8<![endif]-->

投稿2018/10/08 04:46

編集2018/10/08 04:50

退会済みユーザー

総合スコア0

hikari_poppo

2018/10/08 04:59

ビューポートでしたか・・・すみません。メディアクエリでスマホサイズ、タブレットサイズ、pcサイズにしたいです。そういう場合ですと、上のyoshiさんが書いてくださったhtmlを記述すればいいのでしょうか？

退会済みユーザー

2018/10/08 06:11

試してみてください。私の語彙力では質問者さんの求めたいものがわからないので...

hikari_poppo

2018/10/08 06:18

yoshiさんの書いてくださった、HTMLのmetaを追加して見たんですが、メディアクエリが効いていないのか？下の<h3>Logo</h3>の画像などがスマホのサイズにならず大きいままなのですが、それはスマホサイズにならなくても仕方のないことなんですか？

退会済みユーザー

2018/10/08 07:00

画像のサイズはビューポートではできないです。今から上に書き直します。

行動規範の内容に同意します

ベストアンサー

これを半分に

HTML
1<meta name="format-detection" content="telephone=no">
2<link media="only screen and (max-device-width:480px)"
3href="sp.css" type="text/css" rel="stylesheet" />
4<link media="screen and (min-device-width:481px)" href="pc.css"
5type="text/css" rel="stylesheet" />
6<!--[if IE]>
7<link href="pc.css" type="text/css" rel="stylesheet" />
8<![endif]-->

sp.cssとしてアップロード

CSS
1.gazou {
2width: スマホにおける幅を;
3}

pc.cssとしてアップロード

CSS
1.gazou {
2width: パソコンにおける幅を;
3}

あと切り替えたい画像にclass="gazou"も追加してください

投稿2018/10/08 07:04

退会済みユーザー

総合スコア0

シンプルにこの書き方が簡単だと思います。
こちらのメディアクリエリはcssファイルの中に記載してください。

lang=css
1// pcのときのスタイルを設定する
2footer p {
3  color: #b3aeb5;
4  font-size: 12px;
5  text-align: center;
6  border-top: 1px solid #f7f7f7;
7  padding-top: 30px;
8}
9
10// ここからはSPのスタイルを設定する
11@media screen and (max-width: 480px) {
12  // 最大幅が480pxのときに適用する
13}