teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

chousei

2021/08/04 08:42

投稿

yambejp
yambejp

スコア117820

answer CHANGED
@@ -1,7 +1,45 @@
1
1
  拡大率はブラウザ自体の機能なので厳しいと思います
2
2
  ```CSS
3
- html{
4
3
  transform: scale(num);
4
+ ```
5
+ とからめて大きめ(小さめ)に表示したりすることは可能です
6
+
7
+ # sample
8
+
9
+ ```javascript
10
+
11
+ <style>
12
+ body {
13
+ transform-origin: top left;
5
14
  }
15
+ body.big {
16
+ transform: scale(1.5);
17
+ }
18
+ body.small {
19
+ transform: scale(0.7);
20
+ }
21
+ </style>
22
+ <script>
23
+ window.addEventListener('DOMContentLoaded', ()=>{
24
+ big.addEventListener('click',()=>{
25
+ document.body.classList.remove('small');
26
+ document.body.classList.add('big');
27
+ });
28
+ regular.addEventListener('click',()=>{
29
+ document.body.classList.remove('big');
30
+ document.body.classList.remove('small');
31
+ });
32
+ small.addEventListener('click',()=>{
33
+ document.body.classList.remove('big');
34
+ document.body.classList.add('small');
35
+ });
36
+ });
37
+ </script>
38
+ <input type="button" value="big" id="big">
39
+ <input type="button" value="regular" id="regular">
40
+ <input type="button" value="small" id="small">
41
+ <hr>
42
+ あああ
43
+ <img src="http://placeimg.com/400/240/any">
44
+
6
- ```
45
+ ```
7
- とからめて大きめ(小さめ)に表示したりすることは可能です