回答編集履歴
3
追記
test
CHANGED
|
@@ -51,3 +51,21 @@
|
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
変数使わないなら
|
|
62
|
+
|
|
63
|
+
```JavaScript
|
|
64
|
+
|
|
65
|
+
document.getElementById("d1").style.fontSize = Math.floor(document.getElementById("d1").parentNode.clientWidth / document.getElementById("d1").textContent.length) + "px";
|
|
66
|
+
|
|
67
|
+
document.getElementById("d2").style.fontSize = Math.floor(document.getElementById("d2").parentNode.clientWidth / document.getElementById("d2").textContent.length) + "px";
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
一行がめちゃくちゃ長くなりますけど
|
2
追記
test
CHANGED
|
@@ -31,3 +31,23 @@
|
|
|
31
31
|
[CodePen - コード](https://codepen.io/asuchi0819/pen/dybqpxy?editors=1010)
|
|
32
32
|
|
|
33
33
|
[CodePen - フルビュー](https://s.codepen.io/asuchi0819/debug/dybqpxy/PBMNWnPOODar)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
簡単に仕組みの紹介
|
|
42
|
+
|
|
43
|
+
1,2行目でd1,d2のIDがついたタグの文字列の長さを取得
|
|
44
|
+
|
|
45
|
+
3,4行目でd1,d2のIDがついたタグの親要素の幅を取得
|
|
46
|
+
|
|
47
|
+
5,6行目で親要素/文字列の長さで１つあたりの文字の大きさを計算 この時に小数点以下を切り捨てる
|
|
48
|
+
|
|
49
|
+
7,8行目でd1,d2のIDがついたタグにそれぞれ大きさを反映
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。
|
1
追記
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
```HTML
|
|
4
4
|
|
|
5
|
-
<div id=d1>あいうえお</div>
|
|
5
|
+
<div id=d1>あいうえおあいうえお</div>
|
|
6
6
|
|
|
7
7
|
<div id=d2>かきくけこ</div>
|
|
8
8
|
|
|
@@ -18,12 +18,16 @@
|
|
|
18
18
|
|
|
19
19
|
var p2 = document.getElementById("d1").parentNode.clientWidth;
|
|
20
20
|
|
|
21
|
-
var f1 = p1 / d1l;
|
|
21
|
+
var f1 = Math.floor(p1 / d1l);
|
|
22
22
|
|
|
23
|
-
var f2 = p2 / d2l;
|
|
23
|
+
var f2 = Math.floor(p2 / d2l);
|
|
24
24
|
|
|
25
25
|
document.getElementById("d1").style.fontSize = f1 + "px";
|
|
26
26
|
|
|
27
27
|
document.getElementById("d2").style.fontSize = f2 + "px";
|
|
28
28
|
|
|
29
29
|
```
|
|
30
|
+
|
|
31
|
+
[CodePen - コード](https://codepen.io/asuchi0819/pen/dybqpxy?editors=1010)
|
|
32
|
+
|
|
33
|
+
[CodePen - フルビュー](https://s.codepen.io/asuchi0819/debug/dybqpxy/PBMNWnPOODar)
|