backgroundがfont-sizeに影響を受ける理由

font-sizeを14px以下に指定したときにbackgroundが効かなくなる理由がわかりません。

コメントアウトpriceの.question, aのところです。⇓

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>day9</title>
8  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
9  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
10  <script src="https://kit.fontawesome.com/31fb040bc9.js" crossorigin="anonymous"></script>
11  <link rel="stylesheet" href="day9.css">
12  <link rel="stylesheet" href="day9.res.css">
13</head>
14
15<body>
16
17  <!-- price -->
18  <div class="outer">
19    <h1 class="title">Price</h1>
20    <div class="price-inner">
21      <div class="price-img">
22        <img src="../img/price-img/price-img.png">
23      </div>
24      <div>
25        <table class="price-table">
26          <tr>
27            <th class="first"></th>
28            <th class="second">column1</th>
29            <th class="third">column2</th>
30          </tr>
31          <tr>
32            <th>row2</th>
33            <td>100円</td>
34            <td>100円</td>
35          </tr>
36          <tr>
37            <th>row2</th>
38            <td>6,000円</td>
39            <td>0円</td>
40          </tr>
41          <tr>
42            <th>row3</th>
43            <td><span class="sel">6,000円</span>
44              <p class="discount">※ 今だけ半額</p>
45            </td>
46            <td>0円</td>
47          </tr>
48          <tr>
49            <th>row4</th>
50            <td>100円</td>
51            <td>100円</td>
52          </tr>
53        </table>
54        <p class="question">※ 目安なので詳しくは<a>お問い合わせ</a>ください。</p>
55      </div>
56    </div>
57  </div>
58
59  <!-- access -->
60  <div class="outer white">
61    <h1 class="title">Access</h1>
62    <div class="access-inner">
63      <div class="iframe-wrap">
64        <iframe
65          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.3806634936454!2d139.70079541439685!3d35.69224908019173!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cda24ca0baf%3A0x361a54c7f2d9b93!2z44CSMTYwLTAwMjIg5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yT5LiB55uu77yR77yX4oiS77yX!5e0!3m2!1sja!2sjp!4v1586349503756!5m2!1sja!2sjp"
66          width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
67          tabindex="0"></iframe>
68      </div>
69      <table class="access-table">
70        <tr>
71          <th class="th">住所</th>
72          <td class="td">ほげほげほげのほげの場所</td>
73        </tr>
74        <tr>
75          <th class="th">アクセス</th>
76          <td class="td">〇〇駅から右に5分</td>
77        </tr>
78      </table>
79      <a href="https://goo.gl/maps/HMMc1sUQGb6dHsGU8" class="btn2">
80        Googleマップで見る
81      </a>
82    </div>
83  </div>
84
85  <!-- contact -->
86  <div class="outer">
87    <h1 class="title">Contact</h1>
88    <form action="post">
89      <ul class="contact-ul">
90        <li>
91          <label class="required" for="your-name">お名前</label>
92          <input class="name" id="your-name" type="text" name="name" placeholder="山田太郎">
93        </li>
94        <li>
95          <label class="required" for="e-mail">メールアドレス</label>
96          <input class="name" id="e-mail" type="email" name="name" placeholder="text@example.com">
97        </li>
98        <li>
99          <label class="question">お問い合わせ種別</label>
100          <select name="select" >
101            <option value="none">ーーー</option>
102            <option value="phone">お電話</option>
103            <option value="e-mail">メール</option>
104          </select>
105        </li>
106        <li class="question">
107          <label for="fuge">お問い合わせ内容</label>
108          <textarea id="fuge" cols="30" rows="10" placeholder="お問い合わせを入力してください"></textarea>
109        </li>
110        <li class="radio-button">
111          <label><input class="radio" type="radio" name="radio" value="radio1"><span class="radio-span">ラジオ１</span></label>
112          <label><input class="radio" type="radio" name="radio" value="radio2"><span class="radio-span">ラジオ２</span></label>
113          <label><input class="radio" type="radio" name="radio" value="radio3"><span class="radio-span">ラジオ３</span></label>
114        </li>
115        <li>
116          <input class="checkbox" type="checkbox">
117          <p><a>プライバシーポリシー</a>に合意する</p>
118        </li>
119        <li class="submit2">
120          <input type="submit" class="btn2 submit" value="送信する">
121          <img class="right2" src="img/right.png" width="16px" height="16">
122        </li>
123      </ul>
124    </form>
125  </div>
126
127  <!-- footer -->
128  <footer>
129    <ul class="footer-inner">
130      <div class="top">
131        <div class="left">
132          <img src="../img/logo/logo.png" width="170" height="30" alt="">
133          <p>住所：ほげほげのほげほげ</p>
134          <p>TEL：0000-00-0000</p>
135        </div>
136        <ul class="center">
137          <li>Card</li>
138          <li>News</li>
139          <li>Price</li>
140          <li>Access</li>
141          <li>Contact</li>
142        </ul>
143        <div class="right">
144          <div class="div1"></div>
145          <div class="div2"></div>
146          <div class="div3"></div>
147        </div>
148      </div>
149      <div class="bottom">
150        <small>Copyright &copy; @haniwa008 All rights reserved.</small>
151      </div>
152    </ul>
153  </footer>
154</body>
155
156</html>

scss
1
2html {
3  font-size: 62.5%;
4}
5
6body {
7  margin: 0;
8  box-sizing: border-box;
9  font-family: 'Noto Sans JP', sans-serif;
10}
11
12ul {
13  display: flex;
14  list-style: none;
15  padding: 0;
16}
17
18li {
19  padding-left: 30px;
20  &:first-of-type {
21    padding: 0;
22  }
23  a {
24    @include tekiou($white);
25    font-size: 1.6rem;
26  }
27}
28
29.inner {
30  padding: 249px 0 155px 0;
31}
32
33
34/* news */
35
36.white {
37  background-color: white;
38}
39
40.news-inner {
41  display: block;
42}
43
44.news-title {
45  font-size: 1.6rem;
46}
47
48.news-items {
49  display: flex;
50  padding: 16px 8px;
51  width: 838px;
52  margin: 0 auto;
53  border-bottom: 1px solid #707070;
54  &:first-of-type {
55    padding: 16px 8px;
56  }
57  &:last-of-type {
58    border-bottom: 0;
59  }
60  .rabel {
61    width: 100px;
62    height: 30px;
63    line-height: 30px;
64    text-align: center;
65    border-radius: 5px;
66    margin-right: 30px;
67    display: inline-block;
68    transition: all .3s ease 0s;
69  }
70  .rabel:hover {
71    opacity: .6;
72  }
73}
74
75.date {
76  font-size: 1.6rem;
77  margin-right: 30px;
78  white-space: nowrap;
79  font-family: 'Lato', sans-serif;
80}
81
82.rabel1 {
83  background-color: #666666;
84}
85
86.rabel2 {
87  background-color: #3f51b5;
88}
89
90.rabel3 {
91  background-color: #e81919;
92}
93
94.news-title-br {
95  line-height: 26px;
96}
97
98p a {
99  color: #000000;
100  cursor: pointer;
101}
102
103.more {
104  color: #e81919;
105  font-size: 1.6rem;
106  font-weight: bold;
107  text-align: center;
108  margin-top: 16px;
109  font-family: 'Lato', sans-serif;
110  &::after {
111    content: "\f054";
112    font-family: "Font Awesome 5 Free";
113    margin-left: 6px;
114  }
115  a {
116    color: #e81919;
117  }
118}
119
120//price
121.price-inner {
122  display: flex;
123  align-items: top;
124  width: 100%;
125}
126
127table {
128  border: 1px solid #707070;
129  width: 100%;
130  table-layout: fixed;
131}
132
133th,
134td {
135  border: 1px solid #707070;
136  vertical-align: middle;
137  padding: 15px;
138  font-size: 1.2rem;
139}
140
141th {
142  text-align: center;
143  background: #999999;
144  color: white;
145  font-family: 'Lato', sans-serif;
146  font-weight: bold;
147}
148
149.first {
150  width: 26.3%;
151}
152
153.second {
154  width: 36.8%;
155}
156
157.third {
158  width: 36.8%;
159}
160
161td {
162  text-align: right;
163}
164
165.sel {
166  color: red;
167}
168
169.price-img {
170  margin-right: 122px;
171}
172
173.discount {
174  margin-top: 3px;
175}
176
177.question {
178  font-size: 1.4rem;
179  margin-top: 20px;
180  a { 
181    background: linear-gradient(transparent 85%, black 85%, black 88%, transparent 88%);
182  }
183}
184
185//access
186.iframe-wrap {
187  text-align: center;
188}
189
190.access-table {
191  width: 50%;
192  table-layout: auto;
193  margin-top: 30px;
194  margin-left: 150px;
195  border: none;
196}
197
198.th,
199.td {
200  border: none;
201  background-color: transparent;
202  color: black;
203  text-align: left;
204}
205
206.btn2 {
207  position: relative;
208  box-sizing: border-box;
209  display: block;
210  text-decoration: none;
211  color: #ffffff;
212  background: #3f51b5;
213  width: 280px;
214  line-height: 45px;
215  margin: 0 auto;
216  margin-top: 30px;
217  border-radius: 8px;
218  font-size: 1.6rem;
219  font-weight: 600;
220  text-align: center;
221}
222
223.btn2::after {
224  content: "\f054";
225  font-family: "Font Awesome 5 Free";
226  position: absolute;
227  top: 50%;
228  right: 11px;
229  transform: translate(0, -50%);
230}
231
232}
233
234
235

ご回答いただければ幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

リンク文字に下線を表示する、ということがやりたいことだと認識しました。
仮説ですが、文字サイズ「14px * 0.88 - 14px * 0.85 = 0.42px」となり、1px以下なのでブラウザや環境によって表示されないことがある、ということかもしれません。

↓なので対応案を挙げてみます

案1: グラデーションの幅を広げてみる (例: 14px * 1.00 - 14px * 0.85 = 2.1px、1px以上)

SCSS
1.question {
2  font-size: 1.4rem;
3  margin-top: 20px;
4  a { 
5    /* background: linear-gradient(transparent 85%, black 85%, black 88%, transparent 88%); */
6    background: linear-gradient(transparent 85%, black 85%, black 100%, transparent 100%);
7  }
8}

案2: border-bottomなどで対応してはいかがでしょうか?
(linear-gradientだと、文字のサイズが変わるたびに設定しないといけないので..)

SCSS
1.question {
2  font-size: 1.4rem;
3  margin-top: 20px;
4  a { 
5    border-bottom: 1px solid black;
6  }
7}

案3: text-decoration: underline;が、もっともオーソドックスな方法ではあります。

SCSS
1.question {
2  font-size: 1.4rem;
3  margin-top: 20px;
4  a { 
5    text-decoration: underline;
6  }
7}

投稿2020/04/13 00:07

編集2020/04/13 04:35

new1ro

総合スコア4528

NDvP2OWLAoccEfQ

2020/04/13 15:46

お二方とも丁寧で分かりやすいご回答をありがとうございました。これで、また一つ知識が増えました。ありがとうございます。

行動規範の内容に同意します

new1roさんも言われているように、線の幅が狭すぎるために表示できないのだと思います。

background: linear-gradient(transparent 85%, black 85%, black 88%, transparent 88%);

検証ツールでみると.questionの高さは21px、
21px * (88% - 85%) = 0.63px なので1px以下。

Chromeで試したところ、88% を 90% 以上にすると下線が表示されました。
21px * (90% - 85%) = 1.05px

background は font-size ではなく要素の高さが基準になります。

css
1.question {
2  font-size: 1.4rem;
3  margin-top: 20px;
4  a { 
5    background: linear-gradient(transparent 85%, black 85%, black 90%, transparent 90%); 
6  }
7}