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

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

ただいまの
回答率

90.75%

  • HTML5

    3715questions

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

  • CSS3

    1907questions

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

CSS3のfont-sizeについて

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 436

nishi835

score 1

 前提・実現したいこと

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

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

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

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

 該当のソースコード

<html lang="ja">
  <head>
    <meta charset="UTF-8">
      <title>スタンダードレイアウト</title>
        <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="header">
      <h1 class="logo">
        <a href="#">Sample Site</a>
      </h1>
      <nav class="global-nav">
        <ul>
          <li class="nav-item active"><a href="#">HOME</a></li> 
          <li class="nav-item"><a href="#">ABOUT</a></li>    
          <li class="nav-item"><a href="#">NEWS</a></li>    
          <li class="nav-item"><a href="#">TOPICS</a></li>   
          <li class="nav-item"><a href="#">DOCS</a></li>    
          <li class="nav-item"><a href="#">BLOG</a></li>    
        </ul>
      </nav>
    </header>
      <div class="wrapper clearfix">
        <main class="main">
          <h2 class="hidden">Hot Topic</h2>
          <a class="hot-topic" href="#">
            <img class="image" src="images/hot-topic.jpg" alt="コーディング画面">
            <div class="content">
              <h3 class="title">実務で使えるHTML/CSS<br>モダンコーディングTIPS</h3>
              <p class="desc">webフロントエンドの進化の勢いはとどまるところを知りません。</p>
              <time class="date" datetime="2015-09-01">2015.09.01 TUE</time>
            </div>
          </a>
          <section class="news">
            <h2>News</h2>            
            <!-- Newsの中身が入ります -->
          </section>
          <section class="articles">
            <h2 class="hidden">Articles</h2>
            <!-- Articlesの中身が入ります -->
          </section>
        </main>
        <div class="sidemenu">
        </div>
      </div>
    <footer class="footer">
    </footer>
  </body>
</html>
html{
    font-size: 62.5%;;
}

body{
    color:#333;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

*, *::before, *::after{
    box-sizing: border-box;
}

a:link, a:visited, a:hover, a:active{
    color:#d03c56;
    text-decoration: none;
}

.header{
    width: 100%;
    padding: 28px 0 10px;
    background: url(../images/bg-header.gif) repeat-x;
    box-shadow: 0 0 10px 1px #e3e3e3;
}

.logo{
    width:225px;
    height: 56px;
    background: url(../images/logo.png) no-repeat;
    margin: 0 auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.logo a{
    display: block;
    width:100%;
    height:100%;
}

/* navi */
.global-nav{
  margin-top: 15px;
  text-align: center;
}

.global-nav .nav-item{
  display: inline-block;
  margin: 0 10px;
}

.global-nav .nav-item a{
  display: inline-block;
  width:100px;
  height:30px;
  line-height:30px;
  text-align: center;
  border-radius: 8px;
  color:#666;
  1font-size: 1.3rem;
  letter-spacing: 1px;
  transition: 0.2s;
}

.global-nav .nav-item.active a, .global-nav .nav-item a:hover{
  background: #d03c56;
  color:#fff;
}

.wrapper{
    width: 970px;
    margin: 30px auto 40px;
}
///////////////////////////
// main領域
///////////////////////////
.main{
    display: block;
    width: 660px;
    float: left;
}

.hot-topic{
  display:block;
  height:300px;
  margin-bottom:30px;
  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.15);
  transition: opacity 0.15s;
}

.hot-topic:hover{
  opacity: 0.85;
}

.hot-topic .image{
  float:left;
  width:50%;
  height:100%;
}

.hot-topic .content{
  position: relative;
  float:left;
  width:50%;
  height:100%;
  padding: 105px 25px 0;
  background-color: #2d3d54;
  line-height: 1.6;
}

.hot-topic .title{
  margin-bottom: 15px;
  color: #fff;
  font-weight: normal;
  font-size: 2.0rem;
}

.sidemenu{
    width: 275px;
    float: right;
}

.footer{
    width:100%;

}

.clearfix::after{
    content: "";
    display:block;
    clear: both;
}

.hidden{
  display: none;
}

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

Chrome
バージョン: 63.0.3239.132

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

(1)

html{
    font-size: 62.5%;;
}


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

(2)

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


のtypoを修正しましょう.

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/13 14:40

    htmlのfont-sizeに%ではなくpxを使うというのは何か根拠があるのでしょうか?
    MDNにはこの例が出てきます。
    https://developer.mozilla.org/ja/docs/Web/CSS/font-size

    キャンセル

  • 2018/02/13 23:59

    <percentage>
    親要素のフォントサイズを基準とする相対値を指定します。

    HTML要素はrootなので基準となる親要素が居ない
    →そのため, 私の環境ではフォントサイズが狂いました

    キャンセル

0

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

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

html{
    font-size: 62.5%;
}


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

/*
 ///////////////////////////
// main領域
///////////////////////////
 */

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    3715questions

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

  • CSS3

    1907questions

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