質問編集履歴

2

2017/03/01 18:48

投稿

mirin300
mirin300

スコア13

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,10 @@
1
1
  現在私はポートフォリオサイトの作成中で、Readmore.jsをつかってバナーと説明文をよくブログで見られる「続きから読む」のようにボタンで表示、非表示をしたいと思っていますが、自分で試した所自分のやり方が悪いのかうまく表示できませんでした。
2
+
3
+
4
+
5
+ URL. http://jedfoster.com/Readmore.js/
6
+
7
+ こちらからダウンロードしました。
2
8
 
3
9
 
4
10
 

1

コードを追加いたしました。

2017/03/01 18:48

投稿

mirin300
mirin300

スコア13

test CHANGED
File without changes
test CHANGED
@@ -29,3 +29,145 @@
29
29
 
30
30
 
31
31
  よろしくお願いいたします。
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+ ``` <div id="work_wrapper" class="cf">
40
+
41
+ <h2>WORK</h2>
42
+
43
+ <article class="work">
44
+
45
+ <div class="work_box cf">
46
+
47
+ <div class="work_left">
48
+
49
+ <img src="./css/images/bnr_01.jpg" alt="テスト">
50
+
51
+ </div>
52
+
53
+ <div class="work_right">
54
+
55
+ <h3>テスト(1)</h3>
56
+
57
+ <p>テスト</p>
58
+
59
+ </div>
60
+
61
+ </div>
62
+
63
+ <div class="work_box cf">
64
+
65
+ <div class="work_left">
66
+
67
+ <img src="./css/images/bnr_02.jpg" alt="テスト">
68
+
69
+ </div>
70
+
71
+ <div class="work_right">
72
+
73
+ <h3>テスト</h3>
74
+
75
+ <p>テスト</p>
76
+
77
+ </div>
78
+
79
+ </div>
80
+
81
+ <div class="work_box cf">
82
+
83
+ <div class="work_left">
84
+
85
+ <img src="./css/images/bnr_03.jpg" alt="テスト">
86
+
87
+ </div>
88
+
89
+ <div class="work_right">
90
+
91
+ <h3>テスト</h3>
92
+
93
+ <p>テスト</p>
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+ <!-- .work_box -->
100
+
101
+ </article>
102
+
103
+ <!-- #work -->
104
+
105
+ </div>
106
+
107
+ <!-- #work_wrapper -->
108
+
109
+ HTML
110
+
111
+ ```
112
+
113
+
114
+
115
+
116
+
117
+ ```
118
+
119
+ #work_wrapper{
120
+
121
+ width: 950px;
122
+
123
+ margin: 0 auto;
124
+
125
+ padding-bottom: 50px;
126
+
127
+ }
128
+
129
+ #work_wrapper h2{
130
+
131
+ font-size: 60px;
132
+
133
+ text-align: center;
134
+
135
+ padding: 90px 0;
136
+
137
+ }
138
+
139
+ #work_wrapper a{
140
+
141
+ }
142
+
143
+
144
+
145
+ .work_box{
146
+
147
+ width: 950px;
148
+
149
+ padding-bottom: 60px;
150
+
151
+ }
152
+
153
+ .work_left{
154
+
155
+ float: left;
156
+
157
+ }
158
+
159
+ .work_right{
160
+
161
+ float: right;
162
+
163
+ }
164
+
165
+ .work_right h3{
166
+
167
+ padding-bottom: 20px;
168
+
169
+ }
170
+
171
+ css
172
+
173
+ ```