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

質問編集履歴

1

スライドショー

2021/06/02 12:00

投稿

morinokumako
morinokumako

スコア0

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,91 @@
2
2
 
3
3
  スクロールすると文字も動いてしまいます。
4
4
 
5
+ <aside id="mainimg">
6
+ <div class="koteimoji">
7
+ ★<p>次の世代のために   
8
+ <br>
9
+ ★<br>&nbsp;&nbsp;チャレンジする</p></div>
10
+ <img src="images/main1.jpg" alt="" id="slide1" height="500px" >
11
+ <div class="rect">
12
+ <p class="TextTyping">楽しいに</p> </div>
13
+ <img src="images/main2.jpg" alt="" id="slide2"height="500px" >
14
+ <img src="images/main3.jpg" alt="" id="slide3" height="500px">
15
+ ★<a href="#message" class="arrow1" class="hover3">MESSAGE</a>
16
+ </aside>
17
+
18
+ ★スクロールすると3行ともいっしょに動いてしまいます。
19
+
20
+ /*画像ブロック*/
21
+ #mainimg {
22
+ clear: left;
23
+ width: 100%;
24
+ margin-bottom: 20px;
25
+ position: relative;
26
+ }
27
+
28
+
29
+ /*========= message===============*/
30
+ a.arrow1{
31
+ text-decoration:none;
32
+ color:#fff;
33
+ padding-right:40px;
34
+ top:520px;
35
+ left:150px;
36
+ display: block;
37
+ position: fixed;
38
+ }
39
+ a.arrow1:before,
40
+ a.arrow1:after{
41
+ content:"";
42
+ display:block;
43
+ position:absolute;
44
+ }
45
+ a.arrow1:before{
46
+ border-right:1px solid #fff;
47
+ border-top:1px solid #fff;
5
- ![](3181a8db8c30fe729f038ee9a79df8fe.png)
48
+ -webkit-transform:rotate(45deg);
49
+ transform:rotate(45deg);
50
+ width:8px;height:8px;
51
+ right:0;top:50%;
52
+ margin-top:-4px;
53
+ }
54
+ a.arrow1:after{
55
+ width:25px;
56
+ border-bottom:1px solid #fff;
57
+ right:0;top:50%;
58
+ }
59
+
60
+ /*========= 次の世代のために
61
+     〇〇〇  チャレンジする===============*/
62
+ .koteimoji {/*親div*/
63
+ position: relative;/*相対配置*/
64
+ }
65
+
66
+ .koteimoji p {
67
+ display: block;
68
+ position: fixed;
69
+ top: 300px;
70
+ left: 50px;
71
+ margin:0;
72
+ padding:0;
73
+ color: white;/*文字は白に*/
74
+ font-weight: bold; /*太字に*/
75
+ font-size: 4em;/*サイズ2倍*/
76
+ z-index: 10;
77
+ }
78
+
79
+
80
+
81
+
82
+ /*========= 四角===============*/
83
+ .rect {
84
+ display: block;
85
+ position: fixed;
86
+ top:320px;
87
+ left: 40px;
88
+ padding: 10px 100PX;
89
+ margin: 30px;
90
+ font-weight: bold;
91
+ border: solid 3px #fff;
92
+ }