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

編集履歴

質問編集履歴

11

文章追記

2020/11/19 07:27

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -4,6 +4,8 @@
4
4
  0. 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
5
5
  0. その青枠のなかの文字を、青枠内で最大になるようにしたい
6
6
 
7
+ JavaScriptを使ったトリッキーな方法では長期のメンテが難しくなったり、変則的なレイアウトなどで動かなくなりがちなので、できればCSSだけで行える正攻法な手段があれば知りたいです。
8
+
7
9
  ### 理想
8
10
 
9
11
  ![イメージ説明](e3fb9ad414f2e9a600396146a3f7a607.png)

10

試したことを追記

2020/11/19 07:27

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -45,6 +45,7 @@
45
45
 
46
46
  0. font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
47
47
  0. font-size に -webkit-fill-available を指定 → 変化なし
48
+ 0. font-size: fit-content(100%) → 変化なし。そもそも fit-content は width とかに指定するもの
48
49
  0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
49
50
 
50
51
  ```css
@@ -79,6 +80,36 @@
79
80
  </html>
80
81
  ```
81
82
 
83
+ 0. JavaScript の fitty を使ってみる → 挙動がおかしい＆不安定
84
+
85
+ ```html
86
+ <html>
87
+ <head>
88
+ <script src="/tmp/fitty.min.js"></script>
89
+ <script>
90
+ document.addEventListener('DOMContentLoaded', () => fitty(".text"))
91
+ </script>
92
+ <style>
93
+ body {
94
+ line-height: 100%;
95
+ }
96
+ .box1 {
97
+ width: 20vw;
98
+ height: 20vw;
99
+ border: 1px solid blue;
100
+ }
101
+ </style>
102
+ </head>
103
+ <body>
104
+ <div class="box1"><span class="text">A</span></div>
105
+ </body>
106
+ </html>
107
+ ```
108
+
109
+ ![イメージ説明](cf4f47db32f308bffbe29dc85f53ad1a.png)
110
+
111
+ GitHub では issue が溜っていてあまりメンテされていない様子でした
112
+
82
113
  ### ブラウザ
83
114
 
84
115
  Google Chrome を利用しています

9

文章改善

2020/11/19 07:10

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -43,7 +43,7 @@
43
43
 
44
44
  ### 試したこと
45
45
 
46
- 0. リストfont-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
46
+ 0. font-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
47
47
  0. font-size に -webkit-fill-available を指定 → 変化なし
48
48
  0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
49
49
 

8

タイトル改善

2020/11/19 02:12

投稿

ginkan
ginkan

スコア28

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

7

試したことにSVGを追加

2020/11/18 23:23

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -48,12 +48,37 @@
48
48
  0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
49
49
 
50
50
  ```css
51
- background-position: center
51
+ background-position: center;
52
- background-size: cover
52
+ background-size: cover;
53
- background-repeat: no-repeat
53
+ background-repeat: no-repeat;
54
- background-image: url("path/to/A.png")
54
+ background-image: url("path/to/A.png");
55
55
  ```
56
56
 
57
+ 0. SVGにする → 下のようにすると領域を埋めてくれるが、(文字すべてのSVGを用意するのが大変なので)、フォントで行いたい
58
+
59
+ ```html
60
+ <html>
61
+ <head>
62
+ <style>
63
+ .box1 {
64
+ width: 20vw;
65
+ height: 20vw;
66
+ border: 1px solid blue;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <div class="box1">
72
+ <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">
73
+ <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" stroke="none">
74
+ <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"/>
75
+ </g>
76
+ </svg>
77
+ </div>
78
+ </body>
79
+ </html>
80
+ ```
81
+
57
82
  ### ブラウザ
58
83
 
59
84
  Google Chrome を利用しています

6

試したこと追記

2020/11/18 23:21

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -1,15 +1,16 @@
1
1
  ### やりたいこと
2
2
 
3
+ 0. 青枠の領域は動的に変化する
3
- 0. 青枠の横幅・縦幅は動的に変化し、どんな形式でサイズを指定されるかわからない(20vwだったり、100pxだったり)、という前提で、
4
+ 0. 青枠はどんな形式でサイズを指定されるかわからない(20vwだったり100pxだったりする)
4
- 0. その青枠のなかの文字を、ブロック内で最大になるようにしたい
5
+ 0. その青枠のなかの文字を、青枠内で最大になるようにしたい
5
6
 
6
7
  ### 理想
7
8
 
8
9
  ![イメージ説明](e3fb9ad414f2e9a600396146a3f7a607.png)
9
10
 
10
- ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えない
11
+ ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えません
11
12
 
12
- font-size に親のタグの height を指定する、といった記述はできないだろうか
13
+ font-size に親の height を指定する、といった記述ができればいいのだけど。
13
14
 
14
15
  ### 現状
15
16
 
@@ -42,9 +43,17 @@
42
43
 
43
44
  ### 試したこと
44
45
 
45
- font-size に 100% を指定はブロックの縦幅ではなく 1em を指定したのと同じ
46
+ 0. リストfont-size に 100% を指定 → ブロックの縦幅ではなく 1em を指定したのと同じ
46
- font-size に -webkit-fill-available を指定は、変化なし
47
+ 0. font-size に -webkit-fill-available を指定 → 変化なし
48
+ 0. 画像にする → 下のようにすると領域を埋めてくれるが、フォントで行いたい
47
49
 
50
+ ```css
51
+ background-position: center
52
+ background-size: cover
53
+ background-repeat: no-repeat
54
+ background-image: url("path/to/A.png")
55
+ ```
56
+
48
57
  ### ブラウザ
49
58
 
50
59
  Google Chrome を利用しています

5

試したことを追記

2020/11/18 22:49

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -42,8 +42,8 @@
42
42
 
43
43
  ### 試したこと
44
44
 
45
- font-size に 100% を指定。
46
- だけど、それはブロックの縦幅ではなく 1em を指定したのと同じなので意味がない。
45
+ font-size に 100% を指定はブロックの縦幅ではなく 1em を指定したのと同じ
46
+ font-size に -webkit-fill-available を指定は、変化なし
47
47
 
48
48
  ### ブラウザ
49
49
 

4

文言改善

2020/11/18 14:28

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -7,8 +7,10 @@
7
7
 
8
8
  ![イメージ説明](e3fb9ad414f2e9a600396146a3f7a607.png)
9
9
 
10
- ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので他の方法をあれば知りたい
10
+ ブロックの縦幅が 20vw なのでそれを font-size に指定すると上の画像のようになるのだけど、縦幅はわからないという前提なので使えない
11
11
 
12
+ font-size に親のタグの height を指定する、といった記述はできないだろうか
13
+
12
14
  ### 現状
13
15
 
14
16
  ![イメージ説明](24f6eebd2379438c0b69ace0cdd0578a.png)

3

タイトル改善

2020/11/18 14:19

投稿

ginkan
ginkan

スコア28

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

2

ブラウザを追記

2020/11/18 14:15

投稿

ginkan
ginkan

スコア28

title CHANGED
File without changes
body CHANGED
@@ -41,4 +41,8 @@
41
41
  ### 試したこと
42
42
 
43
43
  font-size に 100% を指定。
44
- だけど、それはブロックの縦幅ではなく 1em を指定したのと同じなので意味がない。
44
+ だけど、それはブロックの縦幅ではなく 1em を指定したのと同じなので意味がない。
45
+
46
+ ### ブラウザ
47
+
48
+ Google Chrome を利用しています

1

文言改善

2020/11/18 14:15

投稿

ginkan
ginkan

スコア28

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