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

質問編集履歴

3

書式の改善

2016/03/03 00:54

投稿

ic_egawa
ic_egawa

スコア13

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
  <html lang="ja">
12
12
  <head>
13
13
  <meta charset="utf-8" />
14
- <title>よつば接骨院 草津店</title>
14
+ <title></title>
15
15
  <meta name="description" content="" />
16
16
  <meta name="keywords" content="" />
17
17
 

2

内容の修正

2016/03/03 00:54

投稿

ic_egawa
ic_egawa

スコア13

title CHANGED
File without changes
body CHANGED
@@ -7,11 +7,125 @@
7
7
 
8
8
  ソース
9
9
  ```
10
+ <!DOCTYPE html>
11
+ <html lang="ja">
12
+ <head>
13
+ <meta charset="utf-8" />
14
+ <title>よつば接骨院 草津店</title>
15
+ <meta name="description" content="" />
16
+ <meta name="keywords" content="" />
17
+
18
+ <link rel="stylesheet" href="css/style.css" />
19
+ <link rel="stylesheet" href="css/animate.css" />
20
+ <link rel="stylesheet" href="css/jquery.fullPage.css" />
21
+ <!-- <link rel="stylesheet" href="css/examples.css" />-->
22
+ <style>
23
+
24
+ /* Style for our header texts
25
+ * --------------------------------------- */
26
+ h1{
27
+ font-size: 5em;
28
+ font-family: arial,helvetica;
29
+ color: #fff;
30
+ margin:0;
31
+ }
32
+
33
+ /* Centered texts in each section
34
+ * --------------------------------------- */
35
+ .section{
36
+ text-align:center;
37
+ }
38
+
39
+ /* Overwriting styles for control arrows for slides
40
+ * --------------------------------------- */
41
+ .controlArrow.prev {
42
+ left: 50px;
43
+ }
44
+ .controlArrow.next{
45
+ right: 50px;
46
+ }
47
+
48
+
49
+ /* Bottom menu
50
+ * --------------------------------------- */
51
+ #infoMenu li a {
52
+ color: #fff;
53
+ }
54
+ </style>
55
+
56
+ <!--[if IE]>
57
+ <script type="text/javascript">
58
+ var console = { log: function() {} };
59
+ </script>
60
+ <![endif]-->
61
+
62
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
63
+ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
64
+
65
+ <script src="js/jquery.slimscroll.min.js"></script>
66
+
67
+ <script src="js/jquery.fullPage.js"></script>
68
+ <!-- <script type="text/javascript" src="js/examples.js"></script>-->
10
69
  <script src="js/wow.js"></script>
11
70
  <script>
12
71
  new WOW().init();
13
72
  </script>
73
+ <script>
74
+ $(document).ready(function() {
14
- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
75
+ $('#fullpage').fullpage({
76
+ //anchors: ['1stPage', '2ndPage', '3rdPage', '4thPage', '5thPage'],
77
+ //sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
78
+ navigation: true,
79
+ navigationPosition: 'right',
80
+ navigationTooltips: ['First page', 'Second page', 'Third page', 'Fourth page', 'Fifth page']
81
+ });
82
+ });
83
+ </script>
84
+
85
+ </head>
86
+ <body>
87
+
88
+ <div id="fullpage">
89
+ <div class="section " id="section0">
90
+ <div class="intro">
91
+ <div class="con_r">
92
+ <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="3.5s"><img src="img/txt01.png" width="398" height="43"></div>
93
+ <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4s"><img src="img/txt02.png" width="412" height="236"></div>
94
+ <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4.5s"><img src="img/txt03.png" width="221" height="24"></div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ <div class="section" id="section1">
99
+ <div class="intro">
100
+ <div class="sec1_pic01"><img src="img/campaign.png" width="870" height="160"></div>
101
+ <table>
102
+ <tr>
103
+ <td>施術メニュー</td>
104
+ <td>料金(税込)</td>
105
+ <td>時間</td>
106
+ <td>備考</td>
107
+ </tr>
108
+ <tr>
109
+ <td>マッサージ</td>
110
+ <td>\800</td>
111
+ <td>10分</td>
112
+ <td>10分延長ごとに+\800</td>
113
+ </tr>
114
+ <tr>
115
+ <td>IDストレッチ</td>
116
+ <td>\1,200</td>
117
+ <td>15分</td>
118
+ <td>15分延長ごとに+\1,200</td>
119
+ </tr>
120
+ <tr>
121
+ <td>骨盤矯正</td>
122
+ <td>\3,000</td>
123
+ <td>20分</td>
124
+ <td>お得な5回パックで\12,000</td>
125
+ </tr>
126
+ </table>
127
+ </div>
128
+ </div>
15
129
  <div class="section" id="section2">
16
130
  <div class="intro">
17
131
  <div class="sec2_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="1s">
@@ -20,10 +134,74 @@
20
134
  </div>
21
135
  </div>
22
136
  </div>
137
+ <div class="section" id="section3">
138
+ <div class="intro">
139
+ <h1><img src="img/section03_txt01.png" width="550" height="73"></h1>
140
+ <p>私たちは、あなたのキレイのために、トレーニングの合間に休憩していただくスペースは快適にくつろいでいただけるよう拘っています。</p>
141
+ </div>
142
+ </div>
143
+ <div class="section" id="section4">
144
+ <div class="intro">
145
+ <h1>Enjoy it</h1>
146
+ <p>An easy and beautiful way to navigate throw the sections</p>
147
+ <p>An easy and beautiful way to navigate throw the sections</p>
148
+ <p>An easy and beautiful way to navigate throw the sections</p>
149
+ <p>An easy and beautiful way to navigate throw the sections</p>
150
+ <p>An easy and beautiful way to navigate throw the sections</p>
151
+ <p>An easy and beautiful way to navigate throw the sections</p>
152
+ <p>An easy and beautiful way to navigate throw the sections</p>
153
+ <p>An easy and beautiful way to navigate throw the sections</p>
154
+ <p>An easy and beautiful way to navigate throw the sections</p>
155
+ <p>An easy and beautiful way to navigate throw the sections</p>
156
+ <p>An easy and beautiful way to navigate throw the sections</p>
157
+ <p>An easy and beautiful way to navigate throw the sections</p>
158
+ <p>An easy and beautiful way to navigate throw the sections</p>
159
+ <p>An easy and beautiful way to navigate throw the sections</p>
160
+ <p>An easy and beautiful way to navigate throw the sections</p>
161
+ <p>An easy and beautiful way to navigate throw the sections</p>
162
+ <p>An easy and beautiful way to navigate throw the sections</p>
163
+ <p>An easy and beautiful way to navigate throw the sections</p>
164
+ <p>An easy and beautiful way to navigate throw the sections</p>
165
+ <p>An easy and beautiful way to navigate throw the sections</p>
166
+ <p>An easy and beautiful way to navigate throw the sections</p>
167
+ <p>An easy and beautiful way to navigate throw the sections</p>
168
+ <p>An easy and beautiful way to navigate throw the sections</p>
169
+ <p>An easy and beautiful way to navigate throw the sections</p>
170
+ <p>An easy and beautiful way to navigate throw the sections</p>
171
+ <p>An easy and beautiful way to navigate throw the sections</p>
172
+ <p>An easy and beautiful way to navigate throw the sections</p>
173
+ <p>An easy and beautiful way to navigate throw the sections</p>
174
+ <p>An easy and beautiful way to navigate throw the sections</p>
175
+ <p>An easy and beautiful way to navigate throw the sections</p>
176
+ </div>
177
+ </div>
178
+ </div>
23
179
 
180
+
181
+ </body>
182
+ </html>
24
183
  ```
25
184
  追加したcss
26
185
  ```
186
+ @charset "utf-8";
187
+ /* CSS Document */
188
+
189
+ #section0 {
190
+ width:100%;
191
+ height:100%;
192
+ background-image:url(../img/top.gif);
193
+ background-position: 50% 50%;
194
+ background-size: cover; /* 背景画像をフルスクリーン表示 */
195
+ }
196
+
197
+ .con_r {
198
+ margin: 0 0 0 50%;
199
+ }
200
+
201
+ .sec0_txt01 {
202
+ margin: 0 0 20px 0;
203
+ }
204
+
27
205
  #section2 {
28
206
  width:100%;
29
207
  height:100%;

1

内容の修正

2016/03/02 04:34

投稿

ic_egawa
ic_egawa

スコア13

title CHANGED
File without changes
body CHANGED
@@ -3,57 +3,27 @@
3
3
  参考サイトがたくさんあり、それを見てやっているんですが、上手くいきません。
4
4
  教えていただけないでしょうか?
5
5
 
6
+ 3ページ目の<div class="sec2_txt01">が動きません。
7
+
8
+ ソース
6
9
  ```
7
- ソース
8
- <div class="section " id="section0">
10
+ <script src="js/wow.js"></script>
9
- <div class="intro">
10
- <div class="con_r">
11
+ <script>
11
- <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="3.5s"><img src="img/txt01.png" width="398" height="43"></div>
12
+ new WOW().init();
12
- <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4s"><img src="img/txt02.png" width="412" height="236"></div>
13
- <div class="sec0_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="4.5s"><img src="img/txt03.png" width="221" height="24"></div>
14
- </div>
13
+ </script>
15
- </div>
16
- </div>
17
- <div class="section" id="section1">
18
- <div class="slide" id="slide1">
19
- <div class="intro">
14
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
20
- <h1>Clickable</h1>
21
- <p>
22
- You can even click on the navigation and jump directly to another section.
23
- </p>
24
- </div>
25
- </div>
26
-
27
- <div class="slide" id="slide2">
28
- <h1>Slide 2</h1>
29
- </div>
30
-
31
- </div>
32
15
  <div class="section" id="section2">
33
16
  <div class="intro">
34
- <div class="sec2_txt01 fadeIn" data-wow-duration="1s" data-wow-delay="1s"><img src="img/section02_txt01.png" width="550" height="73"></div>
17
+ <div class="sec2_txt01 wow fadeIn" data-wow-duration="1s" data-wow-delay="1s">
18
+ <img src="img/section02_txt01.png" width="550" height="73">
19
+ <p>私たちは、女性のキレイを支えるパートナーとして無理なく「あなたに合った方法」で、ボディメイクを一緒に行っていきます。</p>
20
+ </div>
35
21
  </div>
36
22
  </div>
37
23
 
38
24
  ```
39
25
  追加したcss
40
26
  ```
41
- #section0 {
42
- width:100%;
43
- height:100%;
44
- background-image:url(../img/top.gif);
45
- background-position: 50% 50%;
46
- background-size: cover; /* 背景画像をフルスクリーン表示 */
47
- }
48
-
49
- .con_r {
50
- margin: 0 0 0 50%;
51
- }
52
-
53
- .sec0_txt01 {
54
- margin: 0 0 20px 0;
55
- }
56
-
57
27
  #section2 {
58
28
  width:100%;
59
29
  height:100%;
@@ -63,8 +33,12 @@
63
33
  }
64
34
 
65
35
  .sec2_txt01 {
36
+ width: 40%;
66
- margin: 0 0 20px 0;
37
+ margin: 150px 0 0 0;
67
- background: #9C0;
68
38
  }
69
39
 
40
+ .sec2_txt01 p {
41
+ color: #666;
42
+ }
43
+
70
44
  ```