teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ついコンテンツ（画像）をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。

編集履歴

質問編集履歴

7

タグ追加

2020/10/14 00:06

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
File without changes

6

追記

2020/10/14 00:05

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
@@ -23,3 +23,269 @@
23
23
  https://meetsmore.com/services/handyman/
24
24
 
25
25
  （自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）
26
+
27
+
28
+
29
+ 【追記】
30
+
31
+ 今現在はこのような状態です。
32
+
33
+ lightboxは一度導入しましたが、希望のようにならなかったため一度削除しました。
34
+
35
+ freewallの導入は、今回の件には関係ありません。
36
+
37
+
38
+
39
+ 情報が少ないかもしれないのですが、よろしくお願いします。
40
+
41
+
42
+
43
+ ```HTML/CSS
44
+
45
+ <!DOCTYPE html>
46
+
47
+ <html>
48
+
49
+ <head lang="en">
50
+
51
+ <meta charset="UTF-8">
52
+
53
+ <title>タイトル</title>
54
+
55
+ <script src="../js/jquery-3.5.1.min.js"></script>
56
+
57
+ <script src="freewall.js"></script>
58
+
59
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
60
+
61
+
62
+
63
+ <style>
64
+
65
+ body{
66
+
67
+ margin: 0;
68
+
69
+ padding: 0;
70
+
71
+ }
72
+
73
+ .container{
74
+
75
+ display: flex;
76
+
77
+ background: #e4f1fe;
78
+
79
+ }
80
+
81
+ .left{
82
+
83
+ width: 300px;
84
+
85
+ background: #020205;
86
+
87
+ color: #fff;
88
+
89
+ position: fixed;
90
+
91
+ height: 100%;
92
+
93
+ text-align: center;
94
+
95
+ padding-top: 30px;
96
+
97
+ }
98
+
99
+
100
+
101
+ input[type="text"]{
102
+
103
+ border: solid 1px #aaa;
104
+
105
+ border-radius:5px;
106
+
107
+ padding:10px;
108
+
109
+ font-size: 15px;
110
+
111
+ margin: 3px 0 30px;
112
+
113
+ }
114
+
115
+
116
+
117
+ button[type="submit"]{
118
+
119
+ border: solid 1px #aaa;
120
+
121
+ border-radius:5px;
122
+
123
+ padding:10px;
124
+
125
+ font-size: 15px;
126
+
127
+ margin: 3px 0 40px;
128
+
129
+ }
130
+
131
+
132
+
133
+ nav {
134
+
135
+ background-color: #020205;
136
+
137
+ }
138
+
139
+
140
+
141
+ nav p{
142
+
143
+ width: 300px;
144
+
145
+ line-height: 60px;
146
+
147
+ display: block;
148
+
149
+ color: #fff;
150
+
151
+ font-size: 1em;
152
+
153
+ text-align: center;
154
+
155
+ margin: 0;
156
+
157
+ }
158
+
159
+
160
+
161
+ nav p:hover{
162
+
163
+ background-color: #38b6ff;
164
+
165
+ }
166
+
167
+
168
+
169
+ footer{
170
+
171
+ font-size: 0.5em;
172
+
173
+ text-align: center;
174
+
175
+ margin-top: 30px;
176
+
177
+ }
178
+
179
+
180
+
181
+ .contents{
182
+
183
+ flex: 1;
184
+
185
+ background: #e4f1fe;
186
+
187
+ margin-left: 300px;
188
+
189
+ padding: 10%;
190
+
191
+ }
192
+
193
+ </style>
194
+
195
+
196
+
197
+ </head>
198
+
199
+ <body>
200
+
201
+ <div class="container">
202
+
203
+ <div class="left">
204
+
205
+ <!-- ロゴ -->
206
+
207
+ <p><img src="logo.png"> </p>
208
+
209
+ <!-- タイトル -->
210
+
211
+ <p><img src="title.png"> </p>
212
+
213
+ <!-- 検索フォーム -->
214
+
215
+ <form id="form2" action="自分のサイトURL" method="get">
216
+
217
+ <input id="sbox2" id="s" name="s" type="text" placeholder="フリーワードを入力"/>
218
+
219
+ <button type="submit" id="sbtn2" onclick="location.href='wait.html'"><i class="fas fa-search"></i></button>
220
+
221
+ </form>
222
+
223
+ <nav>
224
+
225
+ <p>menu</p>
226
+
227
+ <p>menu</p>
228
+
229
+ <p>menuド</p>
230
+
231
+ <p>menu</p>
232
+
233
+ </nav>
234
+
235
+ <footer>footer text</footer>
236
+
237
+ </div>
238
+
239
+
240
+
241
+ <div class="contents">
242
+
243
+
244
+
245
+ <div class="layout">
246
+
247
+ <div id="freewall" class="free-wall"></div>
248
+
249
+ <div id="container">
250
+
251
+ <div class="item"><img src="gazou.jpg"></div>
252
+
253
+ <div class="item"><img src="gazou.jpg"></div>
254
+
255
+ <div class="item"><img src="gazou.jpg"></div>
256
+
257
+ <div class="item"><img src="gazou.jpg"></div>
258
+
259
+ <div class="item"><img src="gazou.jpg"></div>
260
+
261
+ </div>
262
+
263
+ </div>
264
+
265
+ </div>
266
+
267
+
268
+
269
+ <!-- 移動アニメーション -->
270
+
271
+ <script>
272
+
273
+ $('head').append(
274
+
275
+ '<style>body{display:none;}'
276
+
277
+ );
278
+
279
+ $(window).on("load", function() {
280
+
281
+ $('body').delay(1200).fadeIn("slow");
282
+
283
+ });
284
+
285
+ </script>
286
+
287
+ </body>
288
+
289
+ </html>
290
+
291
+ ```

5

誤字脱字

2020/10/14 00:05

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  contentsはimg（画像）です。
16
16
 
17
- 初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
17
+ ご回答願えると、大変助かります。
18
18
 
19
19
 
20
20
 

4

誤字脱字

2020/10/13 14:16

投稿

t01bi01
t01bi01

スコア18

test CHANGED
@@ -1 +1 @@
1
- コンテンツ（画像）をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。
1
+ ついコンテンツ（画像）をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。
test CHANGED
@@ -20,6 +20,6 @@
20
20
 
21
21
  【追記】このサイトのような表示形式を目指しています。
22
22
 
23
- https://meetsmore.com/services/handyman/ibaraki/hitachinaka
23
+ https://meetsmore.com/services/handyman/
24
24
 
25
25
  （自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）

3

追記

2020/10/13 14:10

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
@@ -18,4 +18,8 @@
18
18
 
19
19
 
20
20
 
21
+ 【追記】このサイトのような表示形式を目指しています。
22
+
23
+ https://meetsmore.com/services/handyman/ibaraki/hitachinaka
24
+
21
- 【追記】このサイトのような表示形式を目指しています。（自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）
25
+ （自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）

2

追記

2020/10/13 14:10

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
@@ -15,3 +15,7 @@
15
15
  contentsはimg（画像）です。
16
16
 
17
17
  初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
18
+
19
+
20
+
21
+ 【追記】このサイトのような表示形式を目指しています。（自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）

1

修正依頼点変更

2020/10/13 14:09

投稿

t01bi01
t01bi01

スコア18

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  自分で色々検討しましたが、なかなか難しく、質問させていただきました。
8
8
 
9
- （rightbox等を使用して、画像を表示させるところまではできますが、それ以上のことができないでいます。）
9
+ （自身では、lightbox等を導入して、画像の表示に近づけようと試行錯誤しましたが（画像横・２カラム・テキストボタン表示）、
10
+
11
+ 自分の力量では不可能と判断したため、お力を借りに質問させていただきました。）
10
12
 
11
13
  希望のようなレイアウトにするには、どのような方法があるでしょうか。
12
14