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

質問編集履歴

7

タグ追加

2020/10/14 00:06

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
File without changes

6

追記

2020/10/14 00:05

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
@@ -10,4 +10,137 @@
10
10
 
11
11
  【追記】このサイトのような表示形式を目指しています。
12
12
  https://meetsmore.com/services/handyman/
13
- (自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)
13
+ (自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)
14
+
15
+ 【追記】
16
+ 今現在はこのような状態です。
17
+ lightboxは一度導入しましたが、希望のようにならなかったため一度削除しました。
18
+ freewallの導入は、今回の件には関係ありません。
19
+
20
+ 情報が少ないかもしれないのですが、よろしくお願いします。
21
+
22
+ ```HTML/CSS
23
+ <!DOCTYPE html>
24
+ <html>
25
+ <head lang="en">
26
+ <meta charset="UTF-8">
27
+ <title>タイトル</title>
28
+ <script src="../js/jquery-3.5.1.min.js"></script>
29
+ <script src="freewall.js"></script>
30
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
31
+
32
+ <style>
33
+ body{
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
+ .container{
38
+ display: flex;
39
+ background: #e4f1fe;
40
+ }
41
+ .left{
42
+ width: 300px;
43
+ background: #020205;
44
+ color: #fff;
45
+ position: fixed;
46
+ height: 100%;
47
+ text-align: center;
48
+ padding-top: 30px;
49
+ }
50
+
51
+ input[type="text"]{
52
+ border: solid 1px #aaa;
53
+ border-radius:5px;
54
+ padding:10px;
55
+ font-size: 15px;
56
+ margin: 3px 0 30px;
57
+ }
58
+
59
+ button[type="submit"]{
60
+ border: solid 1px #aaa;
61
+ border-radius:5px;
62
+ padding:10px;
63
+ font-size: 15px;
64
+ margin: 3px 0 40px;
65
+ }
66
+
67
+ nav {
68
+ background-color: #020205;
69
+ }
70
+
71
+ nav p{
72
+ width: 300px;
73
+ line-height: 60px;
74
+ display: block;
75
+ color: #fff;
76
+ font-size: 1em;
77
+ text-align: center;
78
+ margin: 0;
79
+ }
80
+
81
+ nav p:hover{
82
+ background-color: #38b6ff;
83
+ }
84
+
85
+ footer{
86
+ font-size: 0.5em;
87
+ text-align: center;
88
+ margin-top: 30px;
89
+ }
90
+
91
+ .contents{
92
+ flex: 1;
93
+ background: #e4f1fe;
94
+ margin-left: 300px;
95
+ padding: 10%;
96
+ }
97
+ </style>
98
+
99
+ </head>
100
+ <body>
101
+ <div class="container">
102
+ <div class="left">
103
+ <!-- ロゴ -->
104
+ <p><img src="logo.png"> </p>
105
+ <!-- タイトル -->
106
+ <p><img src="title.png"> </p>
107
+ <!-- 検索フォーム -->
108
+ <form id="form2" action="自分のサイトURL" method="get">
109
+ <input id="sbox2" id="s" name="s" type="text" placeholder="フリーワードを入力"/>
110
+ <button type="submit" id="sbtn2" onclick="location.href='wait.html'"><i class="fas fa-search"></i></button>
111
+ </form>
112
+ <nav>
113
+ <p>menu</p>
114
+ <p>menu</p>
115
+ <p>menuド</p>
116
+ <p>menu</p>
117
+ </nav>
118
+ <footer>footer text</footer>
119
+ </div>
120
+
121
+ <div class="contents">
122
+
123
+ <div class="layout">
124
+ <div id="freewall" class="free-wall"></div>
125
+ <div id="container">
126
+ <div class="item"><img src="gazou.jpg"></div>
127
+ <div class="item"><img src="gazou.jpg"></div>
128
+ <div class="item"><img src="gazou.jpg"></div>
129
+ <div class="item"><img src="gazou.jpg"></div>
130
+ <div class="item"><img src="gazou.jpg"></div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- 移動アニメーション -->
136
+ <script>
137
+ $('head').append(
138
+ '<style>body{display:none;}'
139
+ );
140
+ $(window).on("load", function() {
141
+ $('body').delay(1200).fadeIn("slow");
142
+ });
143
+ </script>
144
+ </body>
145
+ </html>
146
+ ```

5

誤字脱字

2020/10/14 00:05

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  自分の力量では不可能と判断したため、お力を借りに質問させていただきました。)
7
7
  希望のようなレイアウトにするには、どのような方法があるでしょうか。
8
8
  contentsはimg(画像)です。
9
- 初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
9
+ ご回答願えると、大変助かります。
10
10
 
11
11
  【追記】このサイトのような表示形式を目指しています。
12
12
  https://meetsmore.com/services/handyman/

4

誤字脱字

2020/10/13 14:16

投稿

t01bi01
t01bi01

スコア18

title CHANGED
@@ -1,1 +1,1 @@
1
- コンテンツ(画像)をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。
1
+ ついコンテンツ(画像)をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。
body CHANGED
@@ -9,5 +9,5 @@
9
9
  初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
10
10
 
11
11
  【追記】このサイトのような表示形式を目指しています。
12
- https://meetsmore.com/services/handyman/ibaraki/hitachinaka
12
+ https://meetsmore.com/services/handyman/
13
13
  (自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)

3

追記

2020/10/13 14:10

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
@@ -8,4 +8,6 @@
8
8
  contentsはimg(画像)です。
9
9
  初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
10
10
 
11
+ 【追記】このサイトのような表示形式を目指しています。
12
+ https://meetsmore.com/services/handyman/ibaraki/hitachinaka
11
- 【追記】このサイトのような表示形式を目指しています。(自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)
13
+ (自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)

2

追記

2020/10/13 14:10

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
@@ -6,4 +6,6 @@
6
6
  自分の力量では不可能と判断したため、お力を借りに質問させていただきました。)
7
7
  希望のようなレイアウトにするには、どのような方法があるでしょうか。
8
8
  contentsはimg(画像)です。
9
- 初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
9
+ 初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。
10
+
11
+ 【追記】このサイトのような表示形式を目指しています。(自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。)

1

修正依頼点変更

2020/10/13 14:09

投稿

t01bi01
t01bi01

スコア18

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  コンテンツをクリックした際、このような形で表示をさせたいのですが、
4
4
  自分で色々検討しましたが、なかなか難しく、質問させていただきました。
5
- rightbox等を使用して、画像表示させるころではできます、それ以上のことができないでいます。
5
+ 自身では、lightbox等を導入して、画像表示に近づけよう試行錯誤しした(画像横・2カラム・テキストボタン表示
6
+ 自分の力量では不可能と判断したため、お力を借りに質問させていただきました。)
6
7
  希望のようなレイアウトにするには、どのような方法があるでしょうか。
7
8
  contentsはimg(画像)です。
8
9
  初心者的な質問で大変申し訳ないのですが、ご回答願えると、大変助かります。