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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

Q&A

解決済

1回答

2450閲覧

Fontのrem指定について

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

font

近年は、コンピュータ上、紙面上で利用できる書体データのことをfontといいます。数える時の単位は「書体」で、データとしてのフォントは、デジタルフォントと呼ばれる場合があります。 HTML/CSSでは要素を指定し、フォント情報を調整することができます。

0グッド

0クリップ

投稿2019/01/01 06:10

fontをpxからremに変更したところ思ってたのと違う表示になるところがいくつかありました。spanとiタグを使っているところだけ表示が思いどうりのサイズになっていません(青線を引いたところイメージ説明

HTML

1 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" 10 crossorigin="anonymous"> 11 <link rel="stylesheet" href="style.css" type="text/css"> 12 <title>WebCamp</title> 13</head> 14 15<body> 16 17 <!-- HEADER --> 18 <header> 19 <div id="header-top" class="cf"> 20 <div id="header-inner"> 21 <h1> 22 <a href="#"><img src="img/DMM_WEBCAMP_white.png" alt="logo" width="136" height="14"></a> 23 </h1> 24 25 <h2 id="pc-head-logo"> 26 <img src="img/DMM_WEBCAMP.svg" alt="pc-h-logo" width="215" height="21"> 27 </h2> 28 <p class="head-st xl-display"> 29 Webスキルの<br>パーソナルジム 30 </p> 31 <div id="tel-time"> 32 <h3>03-6869-4700</h3> 33 <p>営業時間:10:00~19:00</p> 34 </div> 35 <ul id="head-btn"> 36 <li><a href="#">受講申込</a></li> 37 <li><a href="#">無料説明会に申込む</a></li> 38 <i class="fas fa-bars fa-3x bar-icon"></i> 39 </ul> 40 </div> 41 </div> 42 </header> 43 44 45 46 <!-- WHAT --> 47 <section id="what"> 48 <h2><i>WHAT'S <span class="orange">"</span>WEBCAMP<span class="orange">"</span>?</i></h2> 49 <p id="what-st">WEBCAMPとは?</p> 50 <h3> 51 <p id="masule-text"> 52 WEBCAMPは<br class="br-none"><span>「本気でスキルを習得させること」<br class="br-none"></span>を<br class="br-block">追求した<br> 53 <small><span class="orange">"</span>Webスキルのパーソナルジム<span class="orange">"</span></small><br class="br-none">です。 54 </p> 55 </h3> 56 </div> 57 </section> 58</body> 59</html>

CSS

1 2@charset "utf-8"; 3 4/* FONT デフォルトで"Noto Sans Japanese" */ 5@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 6 7 8/* 9html5doctor.com Reset Stylesheet 10v1.6.1 11Last Updated: 2010-09-17 12Author: Richard Clark - http://richclarkdesign.com 13Twitter: @rich_clark 14*/ 15 16 17 18 19/*要素のフォントサイズやマージン・パディングをリセットしています*/ 20html, body, div, span, object, iframe, 21h1, h2, h3, h4, h5, h6, p, blockquote, pre, 22abbr, address, cite, code, 23del, dfn, em, img, ins, kbd, q, samp, 24small, strong, sub, sup, var, 25b, i, 26dl, dt, dd, ol, ul, li, 27fieldset, form, label, legend, 28table, caption, tbody, tfoot, thead, tr, th, td, 29article, aside, canvas, details, figcaption, figure, 30footer, header, hgroup, menu, nav, section, summary, 31time, mark, audio, video { 32 margin:0; 33 padding:0; 34 border:0; 35 outline:0; 36 font-size: 62.5%; 37 vertical-align:baseline; 38 background:transparent; 39 color: #383948; 40} 41 42/*行の高さをフォントサイズと同じにしています*/ 43body { 44 line-height:1; 45 font-family: "Noto Sans Japanese", sans-serif; 46} 47 48 49 50/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/ 51article,aside,details,figcaption,figure, 52footer,header,hgroup,menu,nav,section { 53 display:block; 54} 55 56/*nav要素内ulのマーカー(行頭記号)を表示しないようにしています*/ 57/*nav ul { 58 list-style:none; 59}*/ 60ol, ul { 61 list-style: none; 62} 63 64/*引用符の表示が出ないようにしています*/ 65blockquote, q { 66 quotes:none; 67} 68 69/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/ 70blockquote:before, blockquote:after, 71q:before, q:after { 72 content:''; 73 content:none; 74} 75 76/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/ 77a { 78 margin:0; 79 padding:0; 80 font-size: 62.5%; 81 vertical-align:baseline; 82 background:transparent; 83 text-decoration: none; 84} 85 86 87 88/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/ 89table { 90 border-collapse:collapse; 91 border-spacing:0; 92} 93 94 95/*縦方向の揃え位置を中央揃えに指定しています*/ 96input, select { 97 vertical-align:middle; 98} 99 100/*画像を縦に並べた時に余白が出ないように*/ 101img { 102 vertical-align: top; 103 font-size: 0; 104 line-height: 0; 105} 106 107/*box-sizingを全ブラウザに対応*/ 108*, *:before, *:after { 109 -webkit-box-sizing: border-box; 110 -moz-box-sizing: border-box; 111 -o-box-sizing: border-box; 112 -ms-box-sizing: border-box; 113 box-sizing: border-box; 114} 115 116 117 118 119 120body { 121 font-family: "Noto Sans Japanese", sans-serif; 122} 123 124a { 125 text-decoration: none; 126 color: #fff; 127} 128 129p { 130 font-size: 1.3rem; 131 line-height: 21px; 132 font-weight: 500; 133 letter-spacing: 0.04em; 134 color: #383948; 135 margin: 0; 136 font-family: "Noto Sans Japanese", sans-serif; 137 138} 139 140 141 142 143 144/* HEADER */ 145header { 146 width: 100%; 147 background-color: #f8bd3f; 148 position: fixed; 149 z-index: 999; 150} 151 152#header-top { 153 display: flex; 154 align-items: center; 155 height: 50px; 156 border-bottom: 2px solid #ccc; 157 box-sizing: border-box; 158} 159 160#header-inner { 161 width: 100%; 162 height: 48px; 163 max-width: 1024px; 164 display: flex; 165 align-items: center; 166 margin: 0 auto; 167} 168 169#header-inner h1 { 170 margin-left: 15px; 171 /* width: 136px; */ 172 width: 100%; 173 max-width: 300px; 174 /* height: 14px; */ 175 height: auto; 176 177} 178 179#header-inner h1 img { 180 width: 90%; 181 height: auto; 182} 183 184 185.head-st { 186 color: #9e9ea2; 187 line-height: 21px; 188 padding-left: 26px; 189} 190 191 192 193 194.xl-display { 195 display: none; 196} 197 198 199 200 201#pc-head-logo { 202 display: none; 203} 204 205#tel-time { 206 width: 131px; 207 height: 34px; 208 margin-left: auto; 209 display: none; 210} 211 212#tel-time h3 { 213 font-size: 1.8rem; 214 line-height: 20px; 215 color: #f8bd3f; 216 letter-spacing: 0.04em; 217} 218 219#tel-time p { 220 line-height: 19px; 221 color: #9e9ea2; 222 letter-spacing: 0; 223 224} 225 226#head-btn { 227 display: flex; 228 align-items: center; 229 margin-left: auto; 230} 231 232 233 234#head-btn li { 235 width: 70px; 236 height: 33px; 237 background-color: #ff005c; 238 border-radius: 8px; 239 display: flex; 240 align-items: center; 241 justify-content: center; 242 text-align: center; 243 margin-left: 5px; 244 padding: 0 3 245} 246 247#head-btn li a { 248 font-size: 1.1rem; 249 color: #fff; 250 display: block; 251} 252 253.bar-icon { 254 display: block; 255 color: #fff; 256 margin: 0 5px; 257} 258 259 260 261/* WHAT */ 262#what { 263 width: 100%; 264 height: auto; 265 border-top: 20px solid #f1f1f1; 266 background-color: #fff; 267 color: #383948; 268 text-align: center; 269} 270 271#what h2 { 272 margin: 45px 0 4px; 273} 274 275.orange { 276 color: #ff9600; 277} 278 279 280 281#what h2 i { 282 font-size: 3.5rem; 283 line-height: 35px; 284 font-weight: 500; 285 font-family: 'Geomanist-Regular-Italic'; 286 letter-spacing: -0.04em; 287 288} 289 290#what-st { 291 font-size: 1.3rem; 292 line-height: 21px; 293 font-weight: 500; 294 color: #7b7b80; 295} 296 297#what h3 { 298 /* width: 339px; */ 299 width: 100%; 300 height: 201px; 301 /* height: 0; 302 padding-top: 45%; */ 303 background: url('img/muscle.png'); 304 background-repeat: no-repeat; 305 background-position: center center; 306 background-size: 100%; 307 margin: 45.5px auto 43px; 308 position: relative; 309 text-align: center; 310} 311 312#masule-text { 313 width: 100%; 314 font-size: 1.5rem; 315 line-height: 32px; 316 font-weight: 500; 317 position: absolute; 318 top: 50%; 319 left: 50%; 320 -webkit-transform: translate(-50%, -50%); 321 transform: translate(-50%, -50%); 322} 323 324.br-block { 325 display: none; 326} 327 328#masule-text span { 329 font-family: 'NotoSansCJKjp-Bold'; 330 font-weight: 600; 331 letter-spacing: 0.1em; 332} 333 334#masule-text small { 335 font-size: 1.8rem; 336 line-height: 32px; 337 font-weight: 600; 338 font-family: 'NotoSansCJKjp-Bold'; 339 letter-spacing: 0.1em; 340} 341 342#what h4 { 343 /* width: 339px; */ 344 width: 100%; 345 /* height: 354px; */ 346 height: auto; 347 background-color: #f2f2f2; 348 margin: 0 auto; 349 text-align: left; 350 padding: 21.5px 19px 20.5px 19px; 351} 352 353#what h4 p { 354 font-size: 1.3rem; 355 line-height: 28px; 356 font-weight: 400; 357} 358 359#what h4 p span { 360 font-size: 1.5rem; 361 font-weight: 600; 362 font-family: 'NotoSansCJKjp-Bold'; 363} 364 365 366

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

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

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

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

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

guest

回答1

0

ベストアンサー

/*要素のフォントサイズやマージン・パディングをリセットしています*/ の部分で全ての要素に対してfont-size: 62.5%;を指定しているからです。

当該記述を削除したらこうなります。
動くサンプル:https://jsfiddle.net/6jqk9n4h/


デベロッパーツールで確認してみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【デベロッパーツール(開発者ツール)でCSSを丸裸にする | さくっとwordpress∞】
https://wp.clean-navi.com/デベロッパーツール(開発者ツール)でcssを丸裸-2130.html

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿2019/01/01 12:36

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2019/01/01 13:15

ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問