回答編集履歴

1

追記しました

2016/07/26 12:24

投稿

MaShiRo_H
MaShiRo_H

スコア328

test CHANGED
@@ -55,3 +55,123 @@
55
55
  </script>
56
56
 
57
57
  ```
58
+
59
+
60
+
61
+
62
+
63
+ ===========================追記============================
64
+
65
+ ```CSS
66
+
67
+
68
+
69
+ footer {
70
+
71
+ position: fixed;
72
+
73
+ width: 100%;
74
+
75
+ margin-bottom: -200px;
76
+
77
+ left: 0;
78
+
79
+ bottom: 0;
80
+
81
+ background: tomato;
82
+
83
+ }
84
+
85
+ .ft-body {
86
+
87
+ height: 200px;
88
+
89
+ }
90
+
91
+ .ft-open {
92
+
93
+ height: 30px;
94
+
95
+ }
96
+
97
+ ```
98
+
99
+ ```HTML
100
+
101
+ <footer>
102
+
103
+ <div class="ft-open">上に</div>
104
+
105
+ <div class="ft-close" style="display:none">下に</div>
106
+
107
+ <!-- ここから表示/非表示切替領域 -->
108
+
109
+ <div class="ft-body">
110
+
111
+ <!-- ここからスライダー領域 -->
112
+
113
+ <div id="ft-slide">
114
+
115
+ <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
116
+
117
+ <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
118
+
119
+ <div><img src="common/img/ph_slide03_s.jpg" alt="" width="200" height="104"></div>
120
+
121
+ <div><img src="common/img/ph_slide04_s.jpg" alt="" width="200" height="104"></div>
122
+
123
+ <div><img src="common/img/ph_slide05_s.jpg" alt="" width="200" height="104"></div>
124
+
125
+ <div><img src="common/img/ph_slide01_s.jpg" alt="" width="200" height="104"></div>
126
+
127
+ <div><img src="common/img/ph_slide02_s.jpg" alt="" width="200" height="104"></div>
128
+
129
+ </div>
130
+
131
+ </div>
132
+
133
+ </footer>
134
+
135
+ ```
136
+
137
+ ```JavaScript
138
+
139
+ <script>
140
+
141
+ $(function(){
142
+
143
+ $(".ft-open").click(function(){
144
+
145
+ $("footer").animate({marginBottom:0});
146
+
147
+ $(this).hide()
148
+
149
+ $(".ft-close").show()
150
+
151
+ });
152
+
153
+ $(".ft-close").on("click",function(){
154
+
155
+ $("footer").animate({marginBottom:-200});
156
+
157
+ $(this).hide()
158
+
159
+ $(".ft-open").show()
160
+
161
+ })
162
+
163
+ $('#ft-slide').slick({
164
+
165
+ dots: true,
166
+
167
+ infinite: false
168
+
169
+ });
170
+
171
+ });
172
+
173
+ </script>
174
+
175
+ ```
176
+
177
+