teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問CSSでブロックの中を埋めるような形でフォントを最大化する方法があれば教えてください

編集履歴

質問編集履歴

11

文章追記

2020/11/19 07:27

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,10 @@
10
10
 
11
11
 
12
12
 
13
+ JavaScriptを使ったトリッキーな方法では長期のメンテが難しくなったり、変則的なレイアウトなどで動かなくなりがちなので、できればCSSだけで行える正攻法な手段があれば知りたいです。
14
+
15
+
16
+
13
17
  ### 理想
14
18
 
15
19
 

10

試したことを追記

2020/11/19 07:27

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -92,6 +92,8 @@
92
92
 
93
93
  0. font-size に -webkit-fill-available を指定 → 変化なし
94
94
 
95
+ 0. font-size: fit-content(100%) → 変化なし。そもそも fit-content は width とかに指定するもの
96
+
95
97
  0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
96
98
 
97
99
 
@@ -160,6 +162,66 @@
160
162
 
161
163
 
162
164
 
165
+ 0. JavaScript の fitty を使ってみる → 挙動がおかしい＆不安定
166
+
167
+
168
+
169
+ ```html
170
+
171
+ <html>
172
+
173
+ <head>
174
+
175
+ <script src="/tmp/fitty.min.js"></script>
176
+
177
+ <script>
178
+
179
+ document.addEventListener('DOMContentLoaded', () => fitty(".text"))
180
+
181
+ </script>
182
+
183
+ <style>
184
+
185
+ body {
186
+
187
+ line-height: 100%;
188
+
189
+ }
190
+
191
+ .box1 {
192
+
193
+ width: 20vw;
194
+
195
+ height: 20vw;
196
+
197
+ border: 1px solid blue;
198
+
199
+ }
200
+
201
+ </style>
202
+
203
+ </head>
204
+
205
+ <body>
206
+
207
+ <div class="box1"><span class="text">A</span></div>
208
+
209
+ </body>
210
+
211
+ </html>
212
+
213
+ ```
214
+
215
+
216
+
217
+ ![イメージ説明](cf4f47db32f308bffbe29dc85f53ad1a.png)
218
+
219
+
220
+
221
+ GitHub では issue が溜っていてあまりメンテされていない様子でした
222
+
223
+
224
+
163
225
  ### ブラウザ
164
226
 
165
227
 

9

文章改善

2020/11/19 07:10

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -88,7 +88,7 @@
88
88
 
89
89
 
90
90
 
91
- 0. リストfont-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
91
+ 0. font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
92
92
 
93
93
  0. font-size に -webkit-fill-available を指定 → 変化なし
94
94
 

8

タイトル改善

2020/11/19 02:12

投稿

ginkan
ginkan

スコア28

test CHANGED
@@ -1 +1 @@
1
- CSSでブロックの中を埋めるような形で文字を最大化する方法があれば教えてください
1
+ CSSでブロックの中を埋めるような形でフォントを最大化する方法があれば教えてください
test CHANGED
File without changes

7

試したことにSVGを追加

2020/11/18 23:23

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -98,13 +98,63 @@
98
98
 
99
99
  ```css
100
100
 
101
- background-position: center
101
+ background-position: center;
102
102
 
103
- background-size: cover
103
+ background-size: cover;
104
104
 
105
- background-repeat: no-repeat
105
+ background-repeat: no-repeat;
106
106
 
107
- background-image: url("path/to/A.png")
107
+ background-image: url("path/to/A.png");
108
+
109
+ ```
110
+
111
+
112
+
113
+ 0. SVGにする → 下のようにすると領域を埋めてくれるが、(文字すべてのSVGを用意するのが大変なので)、フォントで行いたい
114
+
115
+
116
+
117
+ ```html
118
+
119
+ <html>
120
+
121
+ <head>
122
+
123
+ <style>
124
+
125
+ .box1 {
126
+
127
+ width: 20vw;
128
+
129
+ height: 20vw;
130
+
131
+ border: 1px solid blue;
132
+
133
+ }
134
+
135
+ </style>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <div class="box1">
142
+
143
+ <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1240.000000 1280.000000" preserveAspectRatio="xMidYMid meet">
144
+
145
+ <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" stroke="none">
146
+
147
+ <path d="M5736 12132 c-186 -367 -803 -1578 -1371 -2692 -568 -1114 -1457 -2857 -1975 -3875 -519 -1017 -1269 -2489 -1667 -3269 l-723 -1419 0 -98 c0 -84 2 -98 18 -103 9 -3 235 -54 502 -115 267 -60 863 -196 1325 -301 462 -105 908 -207 992 -226 99 -22 178 -34 225 -34 l73 0 529 1265 529 1265 1942 0 1942 0 538 -1122 c296 -618 569 -1187 606 -1265 l68 -141 38 8 c34 8 2181 475 2823 614 l245 53 3 99 3 100 -299 584 c-165 322 -573 1120 -907 1775 -334 655 -870 1703 -1190 2330 -783 1532 -2116 4142 -2832 5545 -322 630 -648 1268 -725 1418 l-139 272 -117 0 -117 -1 -339 -667z m794 -6012 c216 -476 395 -871 397 -877 4 -10 -160 -13 -801 -13 -443 0 -806 4 -806 8 0 4 23 59 51 122 28 63 201 457 386 875 184 418 340 769 345 779 10 19 11 18 23 -5 7 -13 189 -413 405 -889z"/>
148
+
149
+ </g>
150
+
151
+ </svg>
152
+
153
+ </div>
154
+
155
+ </body>
156
+
157
+ </html>
108
158
 
109
159
  ```
110
160
 

6

試したこと追記

2020/11/18 23:21

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- 0. 青枠の横幅・縦幅は動的に変化し、どんな形式でサイズを指定されるかわからない(20vwだったり、100pxだったり)、という前提で、
5
+ 0. 青枠の領域は動的に変化する
6
6
 
7
+ 0. 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
8
+
7
- 0. その青枠のなかの文字を、ブロック内で最大になるようにしたい
9
+ 0. その青枠のなかの文字を、青枠内で最大になるようにしたい
8
10
 
9
11
 
10
12
 
@@ -16,11 +18,11 @@
16
18
 
17
19
 
18
20
 
19
- ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えない
21
+ ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えません
20
22
 
21
23
 
22
24
 
23
- font-size に親のタグの height を指定する、といった記述はできないだろうか
25
+ font-size に親の height を指定する、といった記述ができればいいのだけど。
24
26
 
25
27
 
26
28
 
@@ -86,9 +88,25 @@
86
88
 
87
89
 
88
90
 
89
- font-size に 100% を指定はブロックの縦幅ではなく 1em を指定したのと同じ
91
+ 0. リストfont-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
90
92
 
91
- font-size に -webkit-fill-available を指定は、変化なし
93
+ 0. font-size に -webkit-fill-available を指定 → 変化なし
94
+
95
+ 0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
96
+
97
+
98
+
99
+ ```css
100
+
101
+ background-position: center
102
+
103
+ background-size: cover
104
+
105
+ background-repeat: no-repeat
106
+
107
+ background-image: url("path/to/A.png")
108
+
109
+ ```
92
110
 
93
111
 
94
112
 

5

試したことを追記

2020/11/18 22:49

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -86,9 +86,9 @@
86
86
 
87
87
 
88
88
 
89
- font-size に 100% を指定。
89
+ font-size に 100% を指定はブロックの縦幅ではなく 1em を指定したのと同じ
90
90
 
91
- だけど、それはブロックの縦幅ではなく 1em を指定したのと同じなので意味がない。
91
+ font-size に -webkit-fill-available を指定は、変化なし
92
92
 
93
93
 
94
94
 

4

文言改善

2020/11/18 14:28

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,11 @@
16
16
 
17
17
 
18
18
 
19
- ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので他の方法をあれば知りたい
19
+ ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えない
20
+
21
+
22
+
23
+ font-size に親のタグの height を指定する、といった記述はできないだろうか
20
24
 
21
25
 
22
26
 

3

タイトル改善

2020/11/18 14:19

投稿

ginkan
ginkan

スコア28

test CHANGED
@@ -1 +1 @@
1
- CSSでブロックの中を埋めるような形でフォントを最大化する方法を教えてください
1
+ CSSでブロックの中を埋めるような形で文字を最大化する方法があれば教えてください
test CHANGED
File without changes

2

ブラウザを追記

2020/11/18 14:15

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -85,3 +85,11 @@
85
85
  font-size に 100% を指定。
86
86
 
87
87
  だけど、それはブロックの縦幅ではなく 1em を指定したのと同じなので意味がない。
88
+
89
+
90
+
91
+ ### ブラウザ
92
+
93
+
94
+
95
+ Google Chrome を利用しています

1

文言改善

2020/11/18 14:15

投稿

ginkan
ginkan

スコア28

test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- 0. ブロックの横幅・縦幅は動的に変化し、どんな形式でサイズを指定されるかわからない(20vwだったり、100pxだったり)、という前提で、
5
+ 0. 青枠の横幅・縦幅は動的に変化し、どんな形式でサイズを指定されるかわからない(20vwだったり、100pxだったり)、という前提で、
6
6
 
7
- 0. そのブロックのなかの文字を、ブロック内で最大になるようにしたい
7
+ 0. その青枠のなかの文字を、ブロック内で最大になるようにしたい
8
8
 
9
9
 
10
10