soiz1 commited on
Commit
d38f32c
·
verified ·
1 Parent(s): 94fda94

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +50 -44
index.html CHANGED
@@ -3,50 +3,56 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <title>動画プレイヤー</title>
6
- <style>
7
- body {
8
- display: flex;
9
- flex-direction: column;
10
- align-items: center;
11
- justify-content: center;
12
- background-color: #f0f0f0;
13
- font-family: sans-serif;
14
- padding: 20px;
15
- height: 100vh;
16
- margin: 0;
17
- }
18
- video {
19
- max-width: 100%;
20
- height: auto;
21
- margin-bottom: 10px;
22
- }
23
- .controls {
24
- display: flex;
25
- flex-direction: column;
26
- gap: 15px;
27
- width: 100%;
28
- max-width: 500px;
29
- text-align: center;
30
- }
31
- .control-group {
32
- display: flex;
33
- align-items: center;
34
- justify-content: center;
35
- gap: 10px;
36
- }
37
- input[type="range"] {
38
- flex: none;
39
- }
40
- input[type="number"] {
41
- width: 60px;
42
- }
43
- button {
44
- margin-top: 10px;
45
- }
46
- select {
47
- margin-top: 10px;
48
- }
49
- </style>
 
 
 
 
 
 
50
  </head>
51
  <body>
52
  <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <title>動画プレイヤー</title>
6
+ <style>
7
+ body {
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: center;
12
+ background-color: #f0f0f0;
13
+ font-family: sans-serif;
14
+ padding: 20px;
15
+ height: 100vh;
16
+ margin: 0;
17
+ }
18
+ video {
19
+ max-width: 100%;
20
+ height: auto;
21
+ margin-bottom: 10px;
22
+ }
23
+ .controls {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: 15px;
27
+ width: 100%;
28
+ max-width: 700px;
29
+ text-align: center;
30
+ }
31
+ .control-group {
32
+ display: flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ gap: 10px;
36
+ flex-wrap: wrap; /* 必要なら追加、狭い画面対応 */
37
+ }
38
+ .control-group label {
39
+ white-space: nowrap;
40
+ min-width: 80px;
41
+ }
42
+ input[type="range"] {
43
+ flex: none;
44
+ }
45
+ input[type="number"] {
46
+ width: 60px;
47
+ }
48
+ button {
49
+ margin-top: 10px;
50
+ }
51
+ select {
52
+ margin-top: 10px;
53
+ }
54
+ </style>
55
+
56
  </head>
57
  <body>
58
  <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>