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

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

ただいまの
回答率

87.60%

Fontのrem指定について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,906
退会済みユーザー

退会済みユーザー

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

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>WebCamp</title>
</head>

<body>

    <!-- HEADER -->
    <header>
        <div id="header-top" class="cf">
            <div id="header-inner">
                <h1>
                    <a href="#"><img src="img/DMM_WEBCAMP_white.png" alt="logo" width="136" height="14"></a>
                </h1>

                <h2 id="pc-head-logo">
                    <img src="img/DMM_WEBCAMP.svg" alt="pc-h-logo" width="215" height="21">
                </h2>
                <p class="head-st xl-display">
                    Webスキルの<br>パーソナルジム
                </p>
                <div id="tel-time">
                    <h3>03-6869-4700</h3>
                    <p>営業時間:10:00~19:00</p>
                </div>
                <ul id="head-btn">
                    <li><a href="#">受講申込</a></li>
                    <li><a href="#">無料説明会に申込む</a></li>
                    <i class="fas fa-bars fa-3x bar-icon"></i>
                </ul>
            </div>
        </div>
    </header>



    <!-- WHAT -->
    <section id="what">
        <h2><i>WHAT'S <span class="orange">"</span>WEBCAMP<span class="orange">"</span>?</i></h2>
        <p id="what-st">WEBCAMPとは?</p>
        <h3>
            <p id="masule-text">
                WEBCAMPは<br class="br-none"><span>「本気でスキルを習得させること」<br class="br-none"></span><br class="br-block">追求した<br>
                <small><span class="orange">"</span>Webスキルのパーソナルジム<span class="orange">"</span></small><br class="br-none">です。
            </p>
        </h3> 
        </div>
    </section>
</body>
</html>
@charset "utf-8";

/* FONT  デフォルトで"Noto Sans Japanese" */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/




/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size: 62.5%;
    vertical-align:baseline;
    background:transparent;
    color: #383948;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
    font-family: "Noto Sans Japanese", sans-serif;
}



/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー(行頭記号)を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size: 62.5%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}



/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}


/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}





body {
    font-family: "Noto Sans Japanese", sans-serif;
}

a {
    text-decoration: none;
    color: #fff;
}

p {
    font-size: 1.3rem;
    line-height: 21px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #383948;
    margin: 0;
    font-family: "Noto Sans Japanese", sans-serif;

}





/* HEADER */
header {
    width: 100%;
    background-color: #f8bd3f;
    position: fixed;
    z-index: 999;
}

#header-top {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 2px solid #ccc;
    box-sizing: border-box;
}

#header-inner {
    width: 100%;
    height: 48px;
    max-width: 1024px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

#header-inner h1 {
    margin-left: 15px;
    /* width: 136px; */
    width: 100%;
    max-width: 300px;
    /* height: 14px; */
    height: auto;

}

#header-inner h1 img {
    width: 90%;
    height: auto;
}


.head-st {
    color: #9e9ea2;
    line-height: 21px;
    padding-left: 26px;
}




.xl-display {
    display: none;
}




#pc-head-logo {
    display: none;
}

#tel-time {
    width: 131px;
    height: 34px;
    margin-left: auto;
    display: none;
}

#tel-time h3 {
    font-size: 1.8rem;
    line-height: 20px;
    color: #f8bd3f;
    letter-spacing: 0.04em;
}

#tel-time p {
    line-height: 19px;
    color: #9e9ea2;
    letter-spacing: 0;

}

#head-btn {
    display: flex;
    align-items: center;
    margin-left: auto;
}



#head-btn li {
    width: 70px;
    height: 33px;
    background-color: #ff005c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 5px;
    padding: 0 3
}

#head-btn li a {
    font-size: 1.1rem;
    color: #fff;
    display: block;
}

.bar-icon {
    display: block;
    color: #fff;
    margin: 0 5px;
}



/* WHAT */
#what {
    width: 100%;
    height: auto;
    border-top: 20px solid #f1f1f1;
    background-color: #fff;
    color: #383948;
    text-align: center;
}

#what h2 {
    margin: 45px 0 4px;
}

.orange {
    color: #ff9600;
}



#what h2 i {
    font-size: 3.5rem;
    line-height: 35px;
    font-weight: 500;
    font-family: 'Geomanist-Regular-Italic';
    letter-spacing: -0.04em;

}

#what-st {
    font-size: 1.3rem;
    line-height: 21px;
    font-weight: 500;
    color: #7b7b80;
}

#what h3 {
    /* width: 339px; */
    width: 100%;
    height: 201px;
    /* height: 0;
    padding-top: 45%; */
    background: url('img/muscle.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin: 45.5px auto 43px;
    position: relative;
    text-align: center;
}

#masule-text {
    width: 100%;
    font-size: 1.5rem;
    line-height: 32px;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.br-block {
    display: none;
}

#masule-text span {
    font-family: 'NotoSansCJKjp-Bold';
    font-weight: 600;
    letter-spacing: 0.1em;
}

#masule-text small {
    font-size: 1.8rem;
    line-height: 32px;
    font-weight: 600;
    font-family: 'NotoSansCJKjp-Bold';
    letter-spacing: 0.1em;
}

#what h4 {
    /* width: 339px; */
    width: 100%;
    /* height: 354px; */
    height: auto;
    background-color: #f2f2f2;
    margin: 0 auto;
    text-align: left;
    padding: 21.5px 19px 20.5px 19px;
}

#what h4 p {
    font-size: 1.3rem;
    line-height: 28px;
    font-weight: 400;
}

#what h4 p span {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: 'NotoSansCJKjp-Bold';
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

/*要素のフォントサイズやマージン・パディングをリセットしています*/ の部分で全ての要素に対して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 22:15

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

    キャンセル

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

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

関連した質問

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