前提・実現したいこと
PC用のレイアウトのコーディングを先に行っており、メディアクエリを利用してある画面幅になった時にスマホ用のレイアウトに切り替わるようにしています。PC用のレイアウトのhtmlタグに"font-size: 62.5%;"を記述し、"1rem=10px"になるようにしています。またmargin,paddingも同じくremで指定しています。
問題はスマホ用のレイアウトに切り替わる時です。
スマホ用ではPC用より文字サイズとmargin,paddingを小さくしたいと思っているので、スマホ用スタイルシートのhtmlタグに”font-size:55.6%;”を記述しました。私の認識ではこのように記述することで、スマホ用スタイルシートで再び小さいサイズを記述しなくても、先ほどPC用でremを指定した部分(文字サイズとmargin,padding)に”55.6%”が適用され、勝手にサイズが小さくなると考えていました。
しかし結果としては、文字サイズは希望通り小さくなりましたがmargin,paddingはPC用で指定したサイズのまま変わりませんでした。
この認識が間違っているのか、調べてもよくわからなかったので質問させて頂きました。よろしくお願いいたします。
該当のソースコード
全て記載すると長くなってしまうので、一部を抜粋しています。
PC用スタイルシート
*{ box-sizing: border-box; line-height: 1.5; list-style: none; margin: 0; padding: 0; text-decoration: none; } html{ font-size: 62.5%; scroll-behavior: smooth; } body{ background-color: #fafafa; color: #050505; font-family: sans-serif; font-size: 1.8rem; } /*---------------------------------- 共通のスタイル ----------------------------------*/ .sp{ display: none; } .pc{ display: block; } .flex{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .align-items{ -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .justify-content{ -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /*---------------------------------- ヘッダー ----------------------------------*/ header{ background-color: rgba(250, 250, 250, 0.9); color: #050505; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } .btn_menu{ -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .btn_menu .box_logo{ margin-left: 2rem; /*20px*/ } .logo_img{ vertical-align: bottom; /*画像下の余白を埋める*/ width: 100%; height: auto; } .menu_space{ padding: 1.5rem 0; /*15px 0*/ /*0.8% 0*/ margin-right: 2rem; /*20px*/ /*1%*/ width: 20.8%; /*400px*/ min-width: 300px; } .menu_space ul{ width: 90%; /*360px*/ min-width: 260px; } .menu_space ul li{ width: 44.4%; /*160px*/ /*44.4%*/ min-width: 110px; margin: 0 1rem; /*10px*/ /*0 2.3%*/ } .btn_link{ display: inline-block; background-color: #00bbff; border-radius: 5px; box-shadow: 2px 2px #000064; color: #050505; padding: 1.15rem 0; /*11.5px*/ /*7.2% 0*/ text-align: center; width: 100%; } .btn_link:hover{ background-color: #4ccfff; box-shadow: none; color: #525252; position: relative; top: 4%; /*2px*/ left: 0.6%; /*2px*/ } /*------------------------------------- ハンバーガーメニュー -------------------------------------*/ #nav-open { display: inline-block; width: 3rem; /*30px*/ padding-bottom: 2.8rem; /*28px*/ vertical-align: middle; margin-left: 1rem; /*10px*/ z-index: 4; cursor: pointer; } /*ハンバーガーアイコンをCSSで表現*/ #nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; transition: all 0.4s; padding-bottom: 0.4rem; /*線の太さ*/ /*4px*/ width: 3rem;/*長さ*/ /*30px*/ border-radius: 3px; background: #050505; display: block; content: ''; cursor: pointer; z-index: 5;/*最前面*/ } #nav-open span:before { top: 300%; /*12px*/ } #nav-open span:after { top: 600%; /*24px*/ } /*クリック時に三本線を動かす*/ #nav-open.active span { -webkit-transform: translateY(300%) rotate(-45deg); /*12px*/ transform: translateY(300%) rotate(-45deg); } #nav-open.active span:before { -webkit-transform: translateY(-600%) rotate(45deg);/*打ち消す* /*-24px*/ transform: translateY(-600%) rotate(45deg);/*打ち消す*/ opacity: 0; } #nav-open.active span:after { -webkit-transform: translateY(-600%) rotate(90deg); /*-24px*/ transform: translateY(-600%) rotate(90deg); } /*中身*/ #nav-content{ background-color: #00bbff; color: #050505; width: 32.6rem;/*最大幅*/ /*326px*/ overflow: auto; padding: 0 2rem; /*20px*/ position: fixed; top: 0; right: -32.6rem; /*-32.6rem*/ -webkit-transition: .3s ease-in-out;/*滑らかに表示*/ transition: .3s ease-in-out; } #nav-content.open { position: fixed; right: 0; top: 0; z-index: 3;/*最前面に*/ } .hamburger-top { padding: 2rem 0; /*20px*/ } #nav-content .menu_ttl{ border-bottom: 1px solid #050505; font-size: 2.4rem; margin-bottom: 2rem; /*20px*/ } .link li{ text-indent: -1em; position: relative; left: 1em; } .link li:not(:last-of-type){ display: block; margin: 2rem 0; /*20px 0*/ } .link li:last-of-type{ margin-bottom: 4.15rem; /*41.5px*/ } .link a{ background-color: #00bbff; color: #050505; } .link li::before{ font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; margin-right: 1rem; /*10px*/ } #nav-content a:hover{ background-color: #00bbff; color: #f0f0f0; } /*閉じる用の薄黒カバー*/ #nav-bg { background-color: #9f9f9f; color: #050505; display: none;/*はじめは隠しておく*/ height: 100%; left: 0; opacity: 0; position: fixed; top: 0;/*全体に広がるように*/ -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; width: 100%; z-index: 2; } #nav-bg.show{ display: block; opacity: 0.5; } }
スマホ用スタイルシート
@media (max-width: 375px){ *{ line-height: 1.7; } html{ font-size: 55.6%; } /*---------------------------------- 共通のスタイル ----------------------------------*/ .sp{ display: block; } .pc{ display: none; } .point_mainttl, .casualclass_ttl, .qa_ttl, .guide_ttl{ font-size: 2.444rem; width:90%; } .point_ttl, .casualclass_ttl, .qa_ttl, .guide_ttl{ width: 90%; margin:0 auto 40px auto; } /*---------------------------------- ヘッダー ----------------------------------*/ header{ position: fixed; } .btn_menu{ justify-content: flex-start; } .btn_menu .box_logo{ /* margin-left: 10px; */ } }
回答2件
あなたの回答
tips
プレビュー