質問編集履歴

1

ソースを追記しました。

2023/07/22 11:31

投稿

natsu888
natsu888

スコア1

test CHANGED
File without changes
test CHANGED
@@ -23,12 +23,63 @@
23
23
 
24
24
  ### 該当のソースコード
25
25
 
26
- ```ここに言語名を入力
27
- ソースコード
26
+ ```HTML
27
+ <div id="info">
28
+ <div class="info-inner">
29
+ <div class="section-inner">
30
+ <h2>INFO</h2>
31
+
32
+ <div class="col-2">
33
+ <div class="item">
34
+ <div class="gmap">
35
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3231.655650778294!2d139.62127987561323!3d35.906448472515436!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c143cc2c5285%3A0x280f665a32e5d413!2z5aSn5a6u6aeF!5e0!3m2!1sja!2sjp!4v1689918861964!5m2!1sja!2sjp" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="item">
40
+ <p class="info">
41
+ 〒330-0853 <br>
42
+ 埼玉県さいたま市大宮区錦町 <br>
43
+ ○○ビル 10F</p>
44
+ <p class="time">
45
+ 営業時間 : 17:00~2:00 <br>
46
+ 定休日 : 月曜日 <br>
47
+ </p>
48
+ <a href="https://goo.gl/maps/jmQcHuryreum2x1g7" class="button">Googleマップで見る</a>
49
+ </div>
50
+ </div>
51
+
52
+ </div>
53
+ </div>
54
+ </div>
55
+ ```
56
+ ### 該当のソースコード
57
+
58
+ ```CSS
59
+ .info-inner{
60
+ background-color: #0c3d5a;
61
+ padding: 40px 0;
62
+ margin-top: 70px;
63
+ position: relative;
64
+ }
65
+
66
+ .info-inner::before {
67
+ content: '';
68
+ background-image: url(../images/info-top.png);
69
+ background-repeat: repeat-x;
70
+ background-position: center top;
71
+ background-size: auto 70px;
72
+ width: 100%;
73
+ height: 70px;
74
+ position: absolute;
75
+ left: 0;
76
+ top: -69px;
77
+ }
28
78
  ```
29
79
 
30
80
  ### 試したこと
31
81
  擬似要素(:before)で波波の画像を置いてみたりしたのですがうまくいきません。
82
+ (似たようなデザインがあるサイトのソースを参考にしてやってみました。)
32
83
 
33
84
  ### 補足情報(FW/ツールのバージョンなど)
34
85