質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1087閲覧

cssでデフォルトのフォントサイズを外したい

seakai

総合スコア24

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/26 09:26

編集2021/04/26 09:53

前提・実現したいこと

リセットcssを使用しているのですが、そのfont-size:100%をコメントアウトしても画面にはfont-size:100%が表示されたままです。

画像が検証ツールでsmallタグの部分を選択した時のcssです。

どうすれば指定した文字サイズにできるのでしょうか?

該当のソースコード

html

1<header> 2 <div class="logo"><a href=""><img src="img/logo.jpg" alt="Engress"></a></div> 3 <nav> 4 <div class="ham"> 5 <a href=""> 6 <span class="ham-line ham-line1"></span> 7 <span class="ham-line ham-line2"></span> 8 <span class="ham-line ham-line3"></span> 9 </a> 10 </div> 11 <ul> 12 <li><a href="" class="p">1</a></li> 13 <li><a href="" class="p">2</a></li> 14 <li><a href="" class="p">3</a></li> 15 <li><a href="" class="p">4</a></li> 16 </ul> 17 <div class="header_right"> 18 <div class="tel"> 19 <small>open</small> 20 <p><a href="tel:+81-90-0000-0000" class="p">tel</a></p> 21 </div> 22 <div class="request-btn"><a href=""> 23 <span>資料請求</span> 24 </a></div> 25 <div class="contact-btn"><a href=""> 26 <span>お問い合わせ</span> 27 </a></div> 28 </div> 29 </nav> 30 </header>

scss

1 2//style.scss 3 4@charset 'utf-8'; 5 6/* 7html5doctor.com Reset Stylesheet 8v1.6.1 9Last Updated: 2010-09-17 10Author: Richard Clark - http://richclarkdesign.com 11Twitter: @rich_clark 12*/ 13 14html, 15body, 16div, 17span, 18object, 19iframe, 20h1, 21h2, 22h3, 23h4, 24h5, 25h6, 26p, 27blockquote, 28pre, 29abbr, 30address, 31cite, 32code, 33del, 34dfn, 35em, 36img, 37ins, 38kbd, 39q, 40samp, 41small, 42strong, 43sub, 44sup, 45var, 46b, 47i, 48dl, 49dt, 50dd, 51ol, 52ul, 53li, 54fieldset, 55form, 56label, 57legend, 58table, 59caption, 60tbody, 61tfoot, 62thead, 63tr, 64th, 65td, 66article, 67aside, 68canvas, 69details, 70figcaption, 71figure, 72footer, 73header, 74hgroup, 75menu, 76nav, 77section, 78summary, 79time, 80mark, 81audio, 82video { 83 margin: 0; 84 padding: 0; 85 border: 0; 86 outline: 0; 87 // font-size: 100%; 88 vertical-align: baseline; 89 background: transparent; 90} 91 92body { 93 line-height: 1; 94} 95 96article, 97aside, 98details, 99figcaption, 100figure, 101footer, 102header, 103hgroup, 104menu, 105nav, 106section { 107 display: block; 108} 109 110nav ul { 111 list-style: none; 112} 113 114blockquote, 115q { 116 quotes: none; 117} 118 119blockquote:before, 120blockquote:after, 121q:before, 122q:after { 123 content: ''; 124 content: none; 125} 126 127a { 128 margin: 0; 129 padding: 0; 130 font-size: 100%; 131 vertical-align: baseline; 132 background: transparent; 133} 134 135/* change colours to suit your needs */ 136ins { 137 background-color: #ff9; 138 color: #000; 139 text-decoration: none; 140} 141 142/* change colours to suit your needs */ 143mark { 144 background-color: #ff9; 145 color: #000; 146 font-style: italic; 147 font-weight: bold; 148} 149 150del { 151 text-decoration: line-through; 152} 153 154abbr[title], 155dfn[title] { 156 border-bottom: 1px dotted; 157 cursor: help; 158} 159 160table { 161 border-collapse: collapse; 162 border-spacing: 0; 163} 164 165/* change border colour to suit your needs */ 166hr { 167 display: block; 168 height: 1px; 169 border: 0; 170 border-top: 1px solid #cccccc; 171 margin: 1em 0; 172 padding: 0; 173} 174 175input, 176select { 177 vertical-align: middle; 178} 179 180// reset CSS ここまで 181 182html { 183 font-size: 62.5%; 184 /* -> 10px; */ 185 overflow-x: hidden; 186 overflow-y: auto; 187} 188 189body { 190 font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 191 ; 192} 193 194h1 { 195 font-size: 4.8rem; 196 font-weight: bold; 197 line-height: 1.4; 198} 199 200h2 { 201 font-size: 3.6rem; 202 font-weight: bold; 203 line-height: 1.4; 204} 205 206h3 { 207 font-size: 3.2rem; 208 font-weight: bold; 209 line-height: 1.7; 210} 211 212h4 { 213 font-size: 2.6rem; 214 font-weight: bold; 215 line-height: 1.5; 216} 217 218h5 { 219 font-size: 1.8rem; 220 font-weight: 200; 221 line-height: 1.7; 222} 223 224p, .p { 225 font-size: 1.6rem; 226 font-weight: 200; 227 line-height: 1.7; 228} 229 230small { 231 font-size: 1.2rem; 232 font-weight: 200; 233 line-height: 1.7; 234}

css

1//style.css 2 3@charset "UTF-8"; 4/* 5html5doctor.com Reset Stylesheet 6v1.6.1 7Last Updated: 2010-09-17 8Author: Richard Clark - http://richclarkdesign.com 9Twitter: @rich_clark 10*/ 11html, 12body, 13div, 14span, 15object, 16iframe, 17h1, 18h2, 19h3, 20h4, 21h5, 22h6, 23p, 24blockquote, 25pre, 26abbr, 27address, 28cite, 29code, 30del, 31dfn, 32em, 33img, 34ins, 35kbd, 36q, 37samp, 38small, 39strong, 40sub, 41sup, 42var, 43b, 44i, 45dl, 46dt, 47dd, 48ol, 49ul, 50li, 51fieldset, 52form, 53label, 54legend, 55table, 56caption, 57tbody, 58tfoot, 59thead, 60tr, 61th, 62td, 63article, 64aside, 65canvas, 66details, 67figcaption, 68figure, 69footer, 70header, 71hgroup, 72menu, 73nav, 74section, 75summary, 76time, 77mark, 78audio, 79video { 80 margin: 0; 81 padding: 0; 82 border: 0; 83 outline: 0; 84 vertical-align: baseline; 85 background: transparent; 86} 87 88body { 89 line-height: 1; 90} 91 92article, 93aside, 94details, 95figcaption, 96figure, 97footer, 98header, 99hgroup, 100menu, 101nav, 102section { 103 display: block; 104} 105 106nav ul { 107 list-style: none; 108} 109 110blockquote, 111q { 112 quotes: none; 113} 114 115blockquote:before, 116blockquote:after, 117q:before, 118q:after { 119 content: ''; 120 content: none; 121} 122 123a { 124 margin: 0; 125 padding: 0; 126 font-size: 100%; 127 vertical-align: baseline; 128 background: transparent; 129} 130 131/* change colours to suit your needs */ 132ins { 133 background-color: #ff9; 134 color: #000; 135 text-decoration: none; 136} 137 138/* change colours to suit your needs */ 139mark { 140 background-color: #ff9; 141 color: #000; 142 font-style: italic; 143 font-weight: bold; 144} 145 146del { 147 text-decoration: line-through; 148} 149 150abbr[title], 151dfn[title] { 152 border-bottom: 1px dotted; 153 cursor: help; 154} 155 156table { 157 border-collapse: collapse; 158 border-spacing: 0; 159} 160 161/* change border colour to suit your needs */ 162hr { 163 display: block; 164 height: 1px; 165 border: 0; 166 border-top: 1px solid #cccccc; 167 margin: 1em 0; 168 padding: 0; 169} 170 171input, 172select { 173 vertical-align: middle; 174} 175 176html { 177 font-size: 62.5%; 178 /* -> 10px; */ 179 overflow-x: hidden; 180 overflow-y: auto; 181} 182 183body { 184 font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 185} 186 187h1 { 188 font-size: 4.8rem; 189 font-weight: bold; 190 line-height: 1.4; 191} 192 193h2 { 194 font-size: 3.6rem; 195 font-weight: bold; 196 line-height: 1.4; 197} 198 199h3 { 200 font-size: 3.2rem; 201 font-weight: bold; 202 line-height: 1.7; 203} 204 205h4 { 206 font-size: 2.6rem; 207 font-weight: bold; 208 line-height: 1.5; 209} 210 211h5 { 212 font-size: 1.8rem; 213 font-weight: 200; 214 line-height: 1.7; 215} 216 217p, .p { 218 font-size: 1.6rem; 219 font-weight: 200; 220 line-height: 1.7; 221} 222 223small { 224 font-size: 1.2rem; 225 font-weight: 200; 226 line-height: 1.7; 227} 228/*# sourceMappingURL=style.css.map */

scss

1//header.scss 2 3@charset "utf-8"; 4 5@import 'style.scss'; 6 7header { 8 display: flex; 9 height: 8rem; 10 width: 100%; 11 background-color: pink; 12 13 .logo { 14 a { 15 16 img { 17 width: 13.6rem; 18 height: 2.7rem; 19 } 20 } 21 } 22 23 nav { 24 display: flex; 25 width: 100%; 26 27 .ham { 28 29 display: none; 30 31 a { 32 .ham-line {} 33 34 .ham-line1 {} 35 36 .ham-line2 {} 37 38 .ham-line3 {} 39 } 40 } 41 42 ul { 43 display: flex; 44 li { 45 a {} 46 } 47 } 48 49 .header_right { 50 display: flex; 51 margin-left: auto; 52 53 .tel { 54 small {} 55 56 p { 57 a {} 58 } 59 } 60 61 .request-btn { 62 a { 63 span {} 64 } 65 } 66 67 .contact-btn { 68 a { 69 span {} 70 } 71 } 72 } 73 } 74} 75

イメージ説明

試したこと

style.scssのpタグやsmallタグに付いているfont-size: 100%;をコメントアウトした。

補足情報(FW/ツールのバージョンなど)

scssで書いています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/04/26 09:42

コンパイル済みのcssはどうなのでしょうか。
seakai

2021/04/26 09:54

style.cssを追加しました。 よろしくお願い致します。
m.ts10806

2021/04/26 09:55

気になる点はデベロッパツールでSCSSを見ている点です。 画面にリンクさせるのはコンパイル後のcssになるのでは。
seakai

2021/04/26 10:21

デベロッパーツールの設定から「Enable CSS source maps」のチェックを外してもう一度付けると直りました。 ありがとうございました。
guest

回答1

0

自己解決

デベロッパーツールの設定から「Enable CSS source maps」のチェックを外してもう一度付けると直りました。

投稿2021/04/26 10:22

seakai

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問