前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/13 05:40
2018/02/13 14:59