Q&A
ご提示のコードを試してみましたが、スクリーンを小さくするとフォントが大きくなりました。
つまり、問題が再現しませんでした。
ご提示いただいていない部分のコードが原因かもしれません。
問題が再現するコードをご提示ください。
メディアクエリが適用されません。
HTMLに
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" name="viewport">
CSSに
/メディアクエリ/
@media screen and (max-width:500px){
.header-right{
font-size: 1000px;
}
}
何度見返してもミスが見つからず、ネットで検索したviewportも全て試しましたが改善されません。
上記以外に考えられる改善点はありますか？
私の方では、どのCSSも適用されない状態ですので、問題がどこにあるかわからないのですが、
headの中身は
<html>
<head>
<mete charset="utf-8">
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
<title>自己紹介</title>
<link rel="stylesheet" href="/Users/ryoma/Desktop/作成サイトフォルダ/MYPORTFOLIO 【自己紹介】/assets/CSS/stylesheet.css">
<link rel="media" href="/Users/ryoma/Desktop/作成サイトフォルダ/MYPORTFOLIO 【自己紹介】/assets/CSS/media.css">
この様になっています。
stylesheetとmediaでシートを分けていますがここに問題はありますか？
全角ファイル名やめましょう。パスも含めて。
stylesheet.cssの中身はどのようなものですか？
全角ファイル、パス変更しました。
全角の場合だと読み込みされない可能性があると調べたら出てきましたが、imgは適用されていました。
他の言語を使う際に不都合があるのでしょうか？
stylesheetの中身です。
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
html{
width: 100%;
font-family: serif;
}
/*ヘッダー*/
header{
margin: 0px;
padding: 0px;
}
.header-item{
display: flex;
width: 100%;
position: fixed;
background-color: white;
z-index: 10;
}
.header-logo-left{
margin-right: auto;
}
.header-right{
font-size: 20px;
padding: 10px 10px 0 0;
}
.header-right a{
text-decoration: none;
margin: 10px;
color: black;
}
/*top-wrapper*/
.top-wrapper{
z-index: 1;
width: 100%;
}
.hero{
display:flex;
justify-content: center;
opacity: 0.5;
position: relative;
}
.hero-text{
white-space: pre;
font-size: 120px;
position: absolute;
top:20%;
right:5%;
z-index: 2;
}
/*top-items*/
.top-items{
display: flex;
justify-content: space-around;
margin: 0 0 100px 0 ;
}
.top h3{
text-align: center;
}
.top img{
margin-top: 100px;
border-radius: 20px;
}
/*section1*/
.section1-title{
margin-left: 120px;
width: 690px;
}
.section1-title p{
padding-top:20px ;
}
.section1-title span{
margin-left: 15px;
font-size: 15px;
}
.section1-menu{
display: flex;
justify-content: center;
}
.section1-text{
margin: 40px 0 0 100px;
text-align: center;
}
.section1-text p{
margin-top: 0;
}
/*section2-duties-menu*/
.section2-title{
width: 690px;
margin-left: 18%;
margin-top: 150px;
}
.section2-title span{
margin-left: 15px;
font-size: 15px;
}
.section2-text{
width: 690px;
margin-left: 18%;
}
.section2-text p{
margin:20px 0 5px 0;
}
/*section3-goal-menu*/
.section3-wrapper{
height: 430px;
background-color:palegoldenrod;
text-align: center;
}
.section3-goal-menu{
margin-top: 150px;
}
.section3-title span{
margin-left: 15px;
font-size: 15px;
}
.section3-title{
display: inline-block;
text-align: center;
width: 900px;
margin:50px 0;
}
.section3-text{
display: inline-block;
text-align: center;
width: 900px;
}
/*section4*/
.section4-wrapper{
height: 650px;
margin-top: 100px;
text-align: center;
background-color:#232323;
color: white;
}
.section4-title{
width: 690px;
padding-top:50px ;
margin: auto;
padding-bottom: 50px;
}
.contact-form{
display:flex;
justify-content: center;
text-align: left;
}
.section4-wrapper input{
width: 600px;
}
.section4-wrapper textarea{
width: 600px;
}
.contact-form-name,.contact-form-mail,.contact-form-comment{
margin: 30px 0;
}
.contact-form-submit{
box-shadow:0 7px gray;
}
.contact-form-submit:active{
box-shadow: none;
position: relative;
top:7px;
}
/*footer*/
.footer-logo{
height: 100px;
text-align: center;
margin-top: 10px;
}
.footer-logo a{
display: inline-block;
position: relative;
text-decoration: none;
color: black;
margin: 20px 20px;
}
.footer-logo a::after{
content: "";
display: inline-block;
width: 1px;
height: 24px;
position: absolute;
background-color: black;
top:0px;
right:-20px ;
opacity: 0.3;
}
.footer-logo-left::before{
content: "";
display: inline-block;
width: 1px;
height: 24px;
position: absolute;
background-color: black;
top:0px;
left:-20px;
opacity: 0.3;
}
footer{
position: relative;
}
.footer-logo-img{
position: absolute;
top: 50px;
left: 33%;
}
「どのCSSも適用されない」とのことですが、それはメディアクエリの問題ではなくて、CSS自体が読み込めていないのではないでしょうか？
他のCSSは全て適用されていて
@media screen and (max-width: 300px){
.hero-text{font-size: 1000px;}
}
このように指定してもメディアクエリのみ適用されません。
「どのCSSも適用されない」というのは、どのような意味ですか？
「Web 全角 弊害」「Web 全角 デメリット」で検索。
回答2件
0
もっと詳細度の高い別のCSSが適用されている、ということはありませんか？
メディアクエリは詳細度に影響しませんので、.classより詳細度の高いtag .classや#idのようなセレクタで別のスタイルが適用されていた場合、そちらが優先されます。
投稿2020/12/26 02:51
総合スコア146018
こちらがHTMLの全文になります。
idはページ内のaに飛ぶように使用しています。
これは問題ありますか？
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
<title>自己紹介</title>
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/stylesheet.css">
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/media.css">
</head>
<body>
<!--ヘッダー-->
<header>
<div class="header-item">
<div class="header-logo-left">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_0456.jpg" width:50px; height="50px" alt="">
</div>
<div class="header-right">
<a href="#section1-wrapper">細江遼真とは</a>
<a href="#section2-wrapper">職務履歴</a>
<a href="#section3-wrapper">WEBプログラマーを目指した理由</a>
<a href="#section4-wrapper">お問い合わせ
</a>
</div>
</div>
</header>
<!--ヘッダーメディアクエリhtml-->
<!--top-wrapper-自己PR-->
<div class="top-wraper">
<div class="hero">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2195.JPG" width="50%" height="50%" alt="">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2109.JPG" width="50%" height="50%" alt="">
</div>
<h1 class="hero-text">
28歳IT業界未経験
独学でプログラミンを学ぶ
</h1>
<!--top-items-->
<div class="top-items">
<div class="top item1">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2695.JPG" width="300px" height="300px" alt="">
<h3>細江 遼真という男</h3>
</div>
<div class="top item2">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2194.JPG" width="300px"
height="300px" alt="">
<h3>職務履歴</h3>
</div>
<div class="top item3">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_8244.JPG" width="300px" height="300px" alt="">
<h3>WEBプログラマーを目指した理由</h3>
</div>
</div>
</div>
<!--section1 細江とは-->
<div id="section1-wrapper" class="section1-wrapper">
<div class="section1-menu">
<div class="section1-title">
<h2>細江 遼真とは<span>/ 28歳IT未経験でWEBプログラマーを目指す</span></h2><hr>
<p>平成4年生まれの愛知県出身愛知県住みの28歳WEBプログラマーを独学で目指す男。<br>
Progateを軸にYouTubeに動画をあげているマナブさんの「プログラミング独学ロードマップ」を日々こなしテストWEBサイトを作成しながらWEB製作のスキルを上げるために日々奮闘中。<br><br>
現職のマネージャー業務と並行しての作業のため、身体的な負荷が大きいがコードを書かない日は落ち着かないほどWEB製作の楽しさに魅了されてしまった。<br><br>
IT業界は未経験者の中途採用がほとんどなく実務経験も数年必須になる事が多く仕事にしていくには今の環境では厳しいと感じ、会社立ち上げ時から働いていた人材派遣会社を退職し安定した給料、築き上げた役職を捨てて環境を大幅に変化させ本気でWEBプログラマーを目指す。<br><br>
趣味：ゴルフ<br>
好きなこと：人材育成<br>
得意なこと：ベンチャー企業立ち上げメンバーとして過ごした経験を活かした精神力と人間関係<br>
座右の銘：「千思万考」「今日やらないことは明日もやらない」
<br>
<br>
<br>
<hr>
</p>
</div>
<div class="section1-text">
<img class="section1-img" src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2695.JPG" width="400px" height="400px" alt="">
<p>28歳WEBプログラマーを独学で目指す男</p>
</div>
</div>
</div>
<!--section2 職務履歴-->
<div class="section2-wrapper">
<div id="section2-wrapper" class="section2-duties-menu">
<div class="section2-title">
<h2>職務履歴<span>/ 28歳IT未経験でWEBプログラマーを目指す</span></h2><hr>
</div>
<div class="section2-text">
<p>2014年3月 大学卒業</p>
<p>2014年4月 人材派遣会社の立ち上げメンバーとして入職</p>
<p>2020年12月末 人材派遣会社</p>
<p>2020年12月 WEBプログラマーとして働くために独学で勉強開始</p>
<p>現在 HTML,CSSを取得し現在PHPを勉強中</p><hr>
</div>
</div>
</div>
<!--section3-->
<div class="section3-wrapper">
<div id="section3-wrapper" class="section3-goal-menu">
<div class="section3-title">
<h2>WEBプログラマーを目指した理由<span>/ 利益だけでなくマネージメントを意識した提案を</span></h2><hr>
</div>
<div class="section3-text">
<p>WEBサービスを通してクライアント様の課題を改善し最高の結果を出したいと考えたからです。
<br><br>
人材派遣会社ではマネージャーとして人材の育成、管理を行い企業の支え、変化を与えていましたが、結果を体感しにくい商材であるWEBサービスが人材派遣以上に企業に大きな変化と成長を与えられると考え、自分の考えの中にある「企業を支え、成長させるために仕事がしたい」を体現できる仕事だと思いWEBプログラマーの道を選びました。<br><br>
将来のビジョンは、WEBプログラマーとしてスキルを上げ、ディレクター業務を経て最終的にはWEBマーケターとして自分の利益だけを考えず会社の規模は問わずに会社としても、人としても求められる人材になりたいと思っています。
</p><br><br><hr>
</div>
</div>
</div>
<!--section4-contact-form-->
<div id="section4-wrapper" class="section4-wrapper">
<div class="section4-title">
<h2>お問い合わせ</h2><hr>
</div>
<div class="contact-form">
<form action="" method="">
<div class="contact-form-name">
<p>お名前<span>※</span></p>
<input id="name" type="text" name="name" placeholder="お名前">
</div>
<div class="contact-form-mail">
<p>メールアドレス<span>※</span></p>
<input id="mail" type="email" name="mail" placeholder="メールアドレス">
</div>
<div class="contact-form-comment">
<label for="comment">お問い合わせ内容</label><br>
<textarea name="" id="comment" cols="30" rows="10" placeholder="お問い合わせ内容を入力してください"></textarea>
</div>
<div class="contact-form-submit">
<input type="submit" value="送信" >
</div>
</form>
</div>
</div>
<footer>
<div class="footer-logo">
<a class="footer-logo-left" href="#section1-wrapper">細江遼真とは</a>
<a href="#section2-wrapper">職務履歴</a>
<a href="#section3-wrapper">WEBプログラマーを目指した理由</a>
<a href="#section4-wrapper">お問い合わせ
</a>
</div>
<div class="footer-logo-img">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_0456.jpg"width=:100px; height="100px" alt="">
</div>
</footer>
</body>
</html>
iPhonex 375×812
サイズの場合は400pxで問題ありませんか？
試しにmax-width:10000pxでやってみたら適用されました。
0
ベストアンサー
html
1<link rel="media" href="/Users/ryoma/Desktop/作成サイトフォルダ/MYPORTFOLIO 【自己紹介】/assets/CSS/media.css">
rel="media"は有効ではないと思います。スタイルシートのリンク種別はstylesheetです。
この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。
<link>: 外部リソースへのリンク要素 - HTML: HyperText Markup Language | MDN
リンク種別 - HTML: HyperText Markup Language | MDN
コメントを受けて追記
クォーテーションが全角です。
html
1<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
投稿2020/12/26 02:16
編集2020/12/26 04:41総合スコア36960
rel の部分変更しましたが適用されませんでした。
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
<title>自己紹介</title>
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/stylesheet.css">
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/media.css">
</head>
繰り返しになりますが、ご提示いただいていない部分のコードが原因かもしれません。
また、補足欄でも指摘をされていたと思いますが、全角文字は避けた方がいいです。
こちらがHTMLの全文です。
デスクトップからフォルダを持ってくる際にDesktopとなってしまいますがこれは問題ないでしょうか？
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0″>
<title>自己紹介</title>
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/stylesheet.css">
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/media.css">
</head>
<body>
<!--ヘッダー-->
<header>
<div class="header-item">
<div class="header-logo-left">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_0456.jpg" width:50px; height="50px" alt="">
</div>
<div class="header-right">
<a href="#section1-wrapper">細江遼真とは</a>
<a href="#section2-wrapper">職務履歴</a>
<a href="#section3-wrapper">WEBプログラマーを目指した理由</a>
<a href="#section4-wrapper">お問い合わせ
</a>
</div>
</div>
</header>
<!--ヘッダーメディアクエリhtml-->
<!--top-wrapper-自己PR-->
<div class="top-wraper">
<div class="hero">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2195.JPG" width="50%" height="50%" alt="">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2109.JPG" width="50%" height="50%" alt="">
</div>
<h1 class="hero-text">
28歳IT業界未経験
独学でプログラミンを学ぶ
</h1>
<!--top-items-->
<div class="top-items">
<div class="top item1">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2695.JPG" width="300px" height="300px" alt="">
<h3>細江 遼真という男</h3>
</div>
<div class="top item2">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2194.JPG" width="300px"
height="300px" alt="">
<h3>職務履歴</h3>
</div>
<div class="top item3">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_8244.JPG" width="300px" height="300px" alt="">
<h3>WEBプログラマーを目指した理由</h3>
</div>
</div>
</div>
<!--section1 細江とは-->
<div id="section1-wrapper" class="section1-wrapper">
<div class="section1-menu">
<div class="section1-title">
<h2>細江 遼真とは<span>/ 28歳IT未経験でWEBプログラマーを目指す</span></h2><hr>
<p>平成4年生まれの愛知県出身愛知県住みの28歳WEBプログラマーを独学で目指す男。<br>
Progateを軸にYouTubeに動画をあげているマナブさんの「プログラミング独学ロードマップ」を日々こなしテストWEBサイトを作成しながらWEB製作のスキルを上げるために日々奮闘中。<br><br>
現職のマネージャー業務と並行しての作業のため、身体的な負荷が大きいがコードを書かない日は落ち着かないほどWEB製作の楽しさに魅了されてしまった。<br><br>
IT業界は未経験者の中途採用がほとんどなく実務経験も数年必須になる事が多く仕事にしていくには今の環境では厳しいと感じ、会社立ち上げ時から働いていた人材派遣会社を退職し安定した給料、築き上げた役職を捨てて環境を大幅に変化させ本気でWEBプログラマーを目指す。<br><br>
趣味：ゴルフ<br>
好きなこと：人材育成<br>
得意なこと：ベンチャー企業立ち上げメンバーとして過ごした経験を活かした精神力と人間関係<br>
座右の銘：「千思万考」「今日やらないことは明日もやらない」
<br>
<br>
<br>
<hr>
</p>
</div>
<div class="section1-text">
<img class="section1-img" src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_2695.JPG" width="400px" height="400px" alt="">
<p>28歳WEBプログラマーを独学で目指す男</p>
</div>
</div>
</div>
<!--section2 職務履歴-->
<div class="section2-wrapper">
<div id="section2-wrapper" class="section2-duties-menu">
<div class="section2-title">
<h2>職務履歴<span>/ 28歳IT未経験でWEBプログラマーを目指す</span></h2><hr>
</div>
<div class="section2-text">
<p>2014年3月 大学卒業</p>
<p>2014年4月 人材派遣会社の立ち上げメンバーとして入職</p>
<p>2020年12月末 人材派遣会社</p>
<p>2020年12月 WEBプログラマーとして働くために独学で勉強開始</p>
<p>現在 HTML,CSSを取得し現在PHPを勉強中</p><hr>
</div>
</div>
</div>
<!--section3-->
<div class="section3-wrapper">
<div id="section3-wrapper" class="section3-goal-menu">
<div class="section3-title">
<h2>WEBプログラマーを目指した理由<span>/ 利益だけでなくマネージメントを意識した提案を</span></h2><hr>
</div>
<div class="section3-text">
<p>WEBサービスを通してクライアント様の課題を改善し最高の結果を出したいと考えたからです。
<br><br>
人材派遣会社ではマネージャーとして人材の育成、管理を行い企業の支え、変化を与えていましたが、結果を体感しにくい商材であるWEBサービスが人材派遣以上に企業に大きな変化と成長を与えられると考え、自分の考えの中にある「企業を支え、成長させるために仕事がしたい」を体現できる仕事だと思いWEBプログラマーの道を選びました。<br><br>
将来のビジョンは、WEBプログラマーとしてスキルを上げ、ディレクター業務を経て最終的にはWEBマーケターとして自分の利益だけを考えず会社の規模は問わずに会社としても、人としても求められる人材になりたいと思っています。
</p><br><br><hr>
</div>
</div>
</div>
<!--section4-contact-form-->
<div id="section4-wrapper" class="section4-wrapper">
<div class="section4-title">
<h2>お問い合わせ</h2><hr>
</div>
<div class="contact-form">
<form action="" method="">
<div class="contact-form-name">
<p>お名前<span>※</span></p>
<input id="name" type="text" name="name" placeholder="お名前">
</div>
<div class="contact-form-mail">
<p>メールアドレス<span>※</span></p>
<input id="mail" type="email" name="mail" placeholder="メールアドレス">
</div>
<div class="contact-form-comment">
<label for="comment">お問い合わせ内容</label><br>
<textarea name="" id="comment" cols="30" rows="10" placeholder="お問い合わせ内容を入力してください"></textarea>
</div>
<div class="contact-form-submit">
<input type="submit" value="送信" >
</div>
</form>
</div>
</div>
<footer>
<div class="footer-logo">
<a class="footer-logo-left" href="#section1-wrapper">細江遼真とは</a>
<a href="#section2-wrapper">職務履歴</a>
<a href="#section3-wrapper">WEBプログラマーを目指した理由</a>
<a href="#section4-wrapper">お問い合わせ
</a>
</div>
<div class="footer-logo-img">
<img src="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/img/IMG_0456.jpg"width=:100px; height="100px" alt="">
</div>
</footer>
</body>
</html>
iPhonex 375×812
サイズの場合は400pxで問題ありませんか？
試しにmax-width:10000pxでやってみたら適用されました。
「サイズの場合は400pxで問題ありませんか？」とは、どのような意味でしょうか？
なお、コメント欄でご提示いただいたHTMLと、補足欄で示されたCSSで試してみましたが、スクリーンサイズ250pxで、問題なくフォントが大きくなりました。
つまり、問題が再現しません。
繰り返しになりますが、問題が再現するコードをご提示ください。
質問内容が雑で申し訳ありません。
@media screen and (max-width:400px){
}
max-widthの部分が400pxで問題ありませんか？ということです。
問題が再現するコードとはなんでしょうか？
iPhonex 375×812 のスクリーンサイズで表示させるためのメディアクエリは
@media screen and (max-width:400px){
}
で問題ないか、というご質問ですか？
それでしたら問題ないと思いますが、ご提示のコードでは 300px でしたので、当方ではそれで確認をしています。
「問題が再現するコード」とは、それを実行すれば第三者であってもどうように同じ問題（メディアクエリがきかない）が再現するコードのことです。
あ、わかりました。
追記します。
本当ですか！
ありがとうございます！お待ちしています！
行き違いかもしれませんが、追記済みです。
問題が再現するコード
@media screen and (max-width:400px){
.hero-text{
font-size: 10px;
}
}
上記コードが先ほど送ったHTMLに適用されない
でよろしいですか？
Lhankor＿Mhyさんはこのコード入力して適用されていますよね？
私の場合は同様に入力しても適用されません。
■stylesheet.cssは適用される
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/stylesheet.css">
■＠media用のmedia.cssは＠mediaは適用されないが、
header{
font-size:100px;
}
などのcssは適用されます。
<link rel="stylesheet" href="/Users/ryoma/Desktop/webfolder/ myportfolio/assets/CSS/media.css">
繰り返しになりますが、回答に追記済みです。
適用されました！コメント何度もしてしまいすいませんでした。
あなたの回答
tips
プレビュー
