Q&A
「定義したクラスをHTMLで使っていない可能性」も含めて「スペルミス」ではないでしょうか。
前提・実現したいこと
メディアクエリがききません。
なぜでしょうか？ご教授頂けますと幸いです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>サンプルページ</title> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 11 12</head> 13 14<body> 15 <header> 16 <div class="header-wrapper title wrapper"> 17 <div class="header-top "> 18 <h1>はじめてのコーディング</h1> 19 </div> 20 <div class="top-message title"> 21 <img class="top-image" src="images/kv-img.jpg"> 22 <p class="top">コーディングを学習して、<br>オリジナルサイトを作成しよう</p> 23 </div> 24 <h2>はじめに</h2> 25 <div class="header-text"> 26 <p>このサイトはコーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイト<br>を「使える状態」にすることです。</p> 27 </div> 28 </div> 29 </header> 30 31 <div class="content-wrapper title wrapper"> 32 <div class="kokorogamae "> 33 <h2>学習の心構え</h2> 34 <div class="content-text"> 35 <p>暗記しようとしない</p><br> 36 <p>反復練習する</p><br> 37 <p>習得するまでコピペ禁止</p><br> 38 <p>1回で理解できなくても気にしない</p><br> 39 </div> 40 </div> 41 42 43 <div class-="content wrapper"> 44 <h2>学習すること</h2> 45 46 <div class="container"> 47 <div class="items HTML5"> 48 <img src="images/icon_html.jpg"> 49 <p class="contents">HTML5</p> 50 </div> 51 52 <div class="items CSS3"> 53 <img src="images/icon_css.jpg"> 54 <p class="contents">CSS3</p> 55 </div> 56 57 <div class="items js"> 58 <img src="images/icon_js.jpg"> 59 <p class="contents">JavaScript/Jquery</p> 60 </div> 61 </div> 62 63 </div> 64 </div> 65 66 67 68 <a href="#" class="button">Webサイトを見る</a> 69 70 <footer> 71 <p>@2020cresta.design</p> 72 </footer> 73 74 75 76</body></html> 77
CSS
1@meta charset="utf-8"; 2 3@import "variables"; 4 5/*全体のレイアウト*/ 6html { 7 width: 100%; 8 text-align: center; 9 font-family: $font; 10 box-sizing: border-box; 11} 12 13/*共通レイアウト 表題*/ 14.title h2 { 15 color: $orange; 16 font-size: 25px; 17 font-weight: 500px; 18 margin-top: 100px; 19 margin-bottom: 50px; 20} 21 22/*共通レイアウト 各項目余白*/ 23.wrapper { 24 margin-bottom: 100px; 25 width: auto; 26} 27 28 29 30/*メインタイトル*/ 31.header-top { 32 background-color: $orange; 33 height: 30px; 34 color: $white; 35 text-align: center; 36 font-size: 33px; 37 line-height: 16px; 38 font-weight: bold; 39 padding: 30px; 40} 41 42/*親：トップ 背景画像*/ 43.top-image { 44 height: 300px; 45 position: relative; 46 width: 100%; 47 48} 49 50/*子：画像上テキスト 配置*/ 51.top-message p { 52 position: absolute; 53 color: white; 54 top: 30%; 55 left: 35%; 56 text-align: center; 57 font-size: 33px; 58} 59 60/*中央ぞろえ かつ 左寄せ*/ 61.header-text { 62 text-align: left; 63 display: inline-block; 64 line-height: 30px; 65} 66 67 68 69/*コンテンツ部 背景色*/ 70.kokorogamae { 71 background-color: #f0f0f0; 72 padding-bottom: 100px; 73 padding-top: 30px; 74 box-sizing: border-box; 75} 76 77 78/*コンテンツ部 横ならべ*/ 79.container { 80 display: flex; 81 justify-content: center; 82 align-items: center; 83 84 img { 85 width: 40%; 86 height: auto; 87 } 88 89 p { 90 text-align: start; 91 margin-left: 30%; 92 } 93} 94 95/*コンテンツ部 各三つの要素のレイアウト*/ 96/*コンテンツ部 各三つの要素のテキスト部 レイアウト*/ 97.items { 98 margin: 0 auto; 99 font-weight: bold; 100} 101 102/*コンテンツ部 背景*/ 103.content-wrapper { 104 width: 100%; 105} 106 107 108 109/*コンテンツ部 コンテンツ間余白調整*/ 110.CSS3 { 111 margin-right: -170px; 112 margin-left: -170px; 113} 114 115/*コンテンツ部 ボタンレイアウト*/ 116.button { 117 width: 150px; 118 font-size: 15px; 119 text-decoration: none; 120 display: block; 121 text-align: center; 122 padding: 12px 0 12px; 123 background-color: $orange; 124 color: $white; 125 outline: 0; 126 text-align: center; 127 display: inline-block; 128 margin-top: 50px; 129 margin-bottom: 200px; 130} 131 132/*コンテンツ部 ボタン テキスト*/ 133.content p .button { 134 font-weight: bold; 135} 136 137 138 139 140/*フッター部 レイアウト設定*/ 141footer { 142 background-color: darkslategray; 143 height: 5px; 144 padding-top: 15px; 145 padding-bottom: 15px; 146 color: $white; 147 font-size: 8px; 148} 149 150/*----------以下、レスポンシブデザイン------------------*/ 151 152 153 154 155@media screen and(max-width: 768px) { 156 157 158 .header-top { 159 font-size: 26px; 160 } 161} 162 163
試したこと
・スペルミスを疑う
ほかのサイトなどでメディアクエリ導入の記述をコピペしてみましたがききません。
補足情報（FW/ツールのバージョンなど）
Windows
おっしゃる通り、クラス名をまちがっておりました????
初歩的なミスでした。ご回答ありがとうございます！
あ、というより「スペルミスを疑う」だけでは「やったこと」は他人には伝わらない ということが分かってもらえたらと。
大変失礼致しました????
質問の仕方すら模索中ですが、改善していくよう努めます。
メディアクエリが効く効かないの問題が解決され解決済みにしたのであれば、この質問のコードを「解決した後」の状態に書き換えるのはやめましょう。
質問と回答の内容が食い違ってしまいます。
新たに質問をするか、書き換えではなく追記する形で現状のコードを提示した方がよろしいかと。
あと、「解決」したあとに追加質問はマナー違反かと思います。
解決してないなら「解決済み」を「受付中」に戻して回答くれた人に事情を伝えられるべきで、
要件変わるなら別質問にすべきです。
>dit.様
>m.ts10806様
大変申し訳ございませんでした。
これ以上は控えることに致します。
本当にごめんなさい
ひとまず解決したときの状態に質問を戻すところから。
文字だけだとキツい印象を持ってしまうかもしれませんが怒っていたり説教をしているわけではないのでご了承を。
いつか誰かが同じ問題に直面した時、このページを見るかもしれません。
そのときに「なんで問題のないコードなのに質問してるんだろう、なんで質問のコードと食い違うことを回答してるんだろう」と思われないようにしましょう、ということです。
このページを見た全員が質問の編集履歴を見るわけではないので。
>m.ts10806様
>dit.様
ご指導のうえフォローまで頂き、ありがとうございます。
おっしゃられる理由は十分に理解できますので、以後は解決した後も誰かが見るかもしれないことを忘れないように致します。
マナーを守った質問ができるよう精進致しますので、ぜひまたご教授頂けますと幸いです。
回答3件
0
ベストアンサー
.headertop
↓
.header-top
class名ミスってる
投稿2021/01/15 01:30
総合スコア18
おっしゃる通りですね！
自分で何度も確認はしたつもりだったのですが、焦っていたもので見落としていました????
ありがとうございます！！
何のブラウザ使ってるか分からんけど、CHROMEやったら「F12キー」押したら検証モード出るからそこで「Ctrl+F」押せば要素を検索する為の入力欄が出る。
その入力欄で「.headertop」で検索掛けて出なければ、その要素は無いってこと。
検証ツールは知っていましたが、その機能は初めてしりました！
大変為になる情報ありがとうございます！
あなたの回答
tips
プレビュー
