回答編集履歴
3
追記
answer
CHANGED
|
@@ -24,4 +24,13 @@
|
|
|
24
24
|
5,6行目で親要素/文字列の長さで１つあたりの文字の大きさを計算 この時に小数点以下を切り捨てる
|
|
25
25
|
7,8行目でd1,d2のIDがついたタグにそれぞれ大きさを反映
|
|
26
26
|
|
|
27
|
-
5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。
|
|
27
|
+
5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
変数使わないなら
|
|
32
|
+
```JavaScript
|
|
33
|
+
document.getElementById("d1").style.fontSize = Math.floor(document.getElementById("d1").parentNode.clientWidth / document.getElementById("d1").textContent.length) + "px";
|
|
34
|
+
document.getElementById("d2").style.fontSize = Math.floor(document.getElementById("d2").parentNode.clientWidth / document.getElementById("d2").textContent.length) + "px";
|
|
35
|
+
```
|
|
36
|
+
一行がめちゃくちゃ長くなりますけど
|
2
追記
answer
CHANGED
|
@@ -14,4 +14,14 @@
|
|
|
14
14
|
document.getElementById("d2").style.fontSize = f2 + "px";
|
|
15
15
|
```
|
|
16
16
|
[CodePen - コード](https://codepen.io/asuchi0819/pen/dybqpxy?editors=1010)
|
|
17
|
-
[CodePen - フルビュー](https://s.codepen.io/asuchi0819/debug/dybqpxy/PBMNWnPOODar)
|
|
17
|
+
[CodePen - フルビュー](https://s.codepen.io/asuchi0819/debug/dybqpxy/PBMNWnPOODar)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
簡単に仕組みの紹介
|
|
22
|
+
1,2行目でd1,d2のIDがついたタグの文字列の長さを取得
|
|
23
|
+
3,4行目でd1,d2のIDがついたタグの親要素の幅を取得
|
|
24
|
+
5,6行目で親要素/文字列の長さで１つあたりの文字の大きさを計算 この時に小数点以下を切り捨てる
|
|
25
|
+
7,8行目でd1,d2のIDがついたタグにそれぞれ大きさを反映
|
|
26
|
+
|
|
27
|
+
5,6行目で小数点以下を切り捨てるのはpxに小数は存在せず一般的に切り上げられて微妙に文字の大きさが大きくなりはみ出してしまいます。
|
1
追記
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
以下のコードで実現可能です。ただし、日本語の等幅フォント限定です。
|
|
2
2
|
```HTML
|
|
3
|
-
<div id=d1>あいうえお</div>
|
|
3
|
+
<div id=d1>あいうえおあいうえお</div>
|
|
4
4
|
<div id=d2>かきくけこ</div>
|
|
5
5
|
```
|
|
6
6
|
```JavaScript
|
|
@@ -8,8 +8,10 @@
|
|
|
8
8
|
var d2l = document.getElementById("d2").textContent.length;
|
|
9
9
|
var p1 = document.getElementById("d1").parentNode.clientWidth;
|
|
10
10
|
var p2 = document.getElementById("d1").parentNode.clientWidth;
|
|
11
|
-
var f1 = p1 / d1l;
|
|
11
|
+
var f1 = Math.floor(p1 / d1l);
|
|
12
|
-
var f2 = p2 / d2l;
|
|
12
|
+
var f2 = Math.floor(p2 / d2l);
|
|
13
13
|
document.getElementById("d1").style.fontSize = f1 + "px";
|
|
14
14
|
document.getElementById("d2").style.fontSize = f2 + "px";
|
|
15
|
-
```
|
|
15
|
+
```
|
|
16
|
+
[CodePen - コード](https://codepen.io/asuchi0819/pen/dybqpxy?editors=1010)
|
|
17
|
+
[CodePen - フルビュー](https://s.codepen.io/asuchi0819/debug/dybqpxy/PBMNWnPOODar)
|