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

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

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

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

HTML5

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

Q&A

解決済

2回答

1803閲覧

CSS3のfont-sizeについて

nishi835

総合スコア15

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2018/02/09 21:41

前提・実現したいこと

HTML5,CSS3でWebページ作成の学習をしています。

CSS3側でfont-sizeを指定して、文書全体の文字サイズをコントロールしたいのですが、html要素をセレクタにしてfont-sizeを指定しても文字サイズが変わりません。

bodyをセレクタにすれば、可能なのですが。
リセットのCSSのリンクを切ったりしてみてもうまくいきません。

htmlセレクタで基本サイズを決めて、remプロパティで個別にコントロールしたいのですが、前提部分で躓いているので、お知恵をお貸しください。

該当のソースコード

html<!DOCTYPE

1<html lang="ja"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>スタンダードレイアウト</title> 5 <link rel="stylesheet" href="css/style.css"> 6 </head> 7 <body> 8 <header class="header"> 9 <h1 class="logo"> 10 <a href="#">Sample Site</a> 11 </h1> 12 <nav class="global-nav"> 13 <ul> 14 <li class="nav-item active"><a href="#">HOME</a></li> 15 <li class="nav-item"><a href="#">ABOUT</a></li> 16 <li class="nav-item"><a href="#">NEWS</a></li> 17 <li class="nav-item"><a href="#">TOPICS</a></li> 18 <li class="nav-item"><a href="#">DOCS</a></li> 19 <li class="nav-item"><a href="#">BLOG</a></li> 20 </ul> 21 </nav> 22 </header> 23 <div class="wrapper clearfix"> 24 <main class="main"> 25 <h2 class="hidden">Hot Topic</h2> 26 <a class="hot-topic" href="#"> 27 <img class="image" src="images/hot-topic.jpg" alt="コーディング画面"> 28 <div class="content"> 29 <h3 class="title">実務で使えるHTML/CSS<br>モダンコーディングTIPS</h3> 30 <p class="desc">webフロントエンドの進化の勢いはとどまるところを知りません。</p> 31 <time class="date" datetime="2015-09-01">2015.09.01 TUE</time> 32 </div> 33 </a> 34 <section class="news"> 35 <h2>News</h2> 36 <!-- Newsの中身が入ります --> 37 </section> 38 <section class="articles"> 39 <h2 class="hidden">Articles</h2> 40 <!-- Articlesの中身が入ります --> 41 </section> 42 </main> 43 <div class="sidemenu"> 44 </div> 45 </div> 46 <footer class="footer"> 47 </footer> 48 </body> 49</html>

CSS@charset

1 2html{ 3 font-size: 62.5%;; 4} 5 6body{ 7 color:#333; 8 font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 9} 10 11*, *::before, *::after{ 12 box-sizing: border-box; 13} 14 15a:link, a:visited, a:hover, a:active{ 16 color:#d03c56; 17 text-decoration: none; 18} 19 20.header{ 21 width: 100%; 22 padding: 28px 0 10px; 23 background: url(../images/bg-header.gif) repeat-x; 24 box-shadow: 0 0 10px 1px #e3e3e3; 25} 26 27.logo{ 28 width:225px; 29 height: 56px; 30 background: url(../images/logo.png) no-repeat; 31 margin: 0 auto; 32 text-indent: 100%; 33 white-space: nowrap; 34 overflow: hidden; 35} 36 37.logo a{ 38 display: block; 39 width:100%; 40 height:100%; 41} 42 43/* navi */ 44.global-nav{ 45 margin-top: 15px; 46 text-align: center; 47} 48 49.global-nav .nav-item{ 50 display: inline-block; 51 margin: 0 10px; 52} 53 54.global-nav .nav-item a{ 55 display: inline-block; 56 width:100px; 57 height:30px; 58 line-height:30px; 59 text-align: center; 60 border-radius: 8px; 61 color:#666; 62 1font-size: 1.3rem; 63 letter-spacing: 1px; 64 transition: 0.2s; 65} 66 67.global-nav .nav-item.active a, .global-nav .nav-item a:hover{ 68 background: #d03c56; 69 color:#fff; 70} 71 72.wrapper{ 73 width: 970px; 74 margin: 30px auto 40px; 75} 76/////////////////////////// 77// main領域 78/////////////////////////// 79.main{ 80 display: block; 81 width: 660px; 82 float: left; 83} 84 85.hot-topic{ 86 display:block; 87 height:300px; 88 margin-bottom:30px; 89 box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15); 90 transition: opacity 0.15s; 91} 92 93.hot-topic:hover{ 94 opacity: 0.85; 95} 96 97.hot-topic .image{ 98 float:left; 99 width:50%; 100 height:100%; 101} 102 103.hot-topic .content{ 104 position: relative; 105 float:left; 106 width:50%; 107 height:100%; 108 padding: 105px 25px 0; 109 background-color: #2d3d54; 110 line-height: 1.6; 111} 112 113.hot-topic .title{ 114 margin-bottom: 15px; 115 color: #fff; 116 font-weight: normal; 117 font-size: 2.0rem; 118} 119 120.sidemenu{ 121 width: 275px; 122 float: right; 123} 124 125.footer{ 126 width:100%; 127 128} 129 130.clearfix::after{ 131 content: ""; 132 display:block; 133 clear: both; 134} 135 136.hidden{ 137 display: none; 138}

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

Chrome
バージョン: 63.0.3239.132

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

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

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

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

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

guest

回答2

0

ベストアンサー

ざっと見, 修正すべき点は次の2箇所です.

(1)

CSS

1html{ 2 font-size: 62.5%;; 3}

%単位によるサイズ指定をpx等の絶対値で指定してみましょう.

(2)

CSS

11font-size: 1.3rem;/*font-sizeとすべき*/

のtypoを修正しましょう.

NOTE:
WEBブラウザの開発者ツールを用いると, CSSの記述上のミスやスタイルシートに記述したスタイルが正しくDOMノードに適用されているかを確認することが出来ます.

投稿2018/02/10 00:19

編集2018/02/10 00:21
defghi1977

総合スコア4756

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

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

defghi1977

2018/02/13 14:59

<percentage> 親要素のフォントサイズを基準とする相対値を指定します。 HTML要素はrootなので基準となる親要素が居ない →そのため, 私の環境ではフォントサイズが狂いました
guest

0

htmlへの%指定でも問題なく適用できると思います。

直接的な解決につながるかは不明ですが、以下気になる部分を挙げます。
1.headermainタグを使っているので<!DOCTYPE html>でドキュメントタイプ(HTML5)の宣言を。
2.;が一つ多いので削除

css

1html{ 2 font-size: 62.5%; 3}

3.CSSのコメント形式に直す

css

1/* 2 /////////////////////////// 3// main領域 4/////////////////////////// 5 */

投稿2018/02/13 06:36

dit.

総合スコア3235

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問