編集履歴

質問編集履歴

無し

2021/04/21 04:11

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- positionの闇について。
1	+ positionについて。

test CHANGED Viewed

@@ -11,3 +11,9 @@
 ![イメージ説明](0b81cd4f4e0363f8ae32eee3e4948c20.jpeg)
+回答して頂いた方々ありがとうございました。
+再度一から作り直すと問題が解決しました。

修正中

2021/04/21 04:10

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,550 +4,10 @@
 ### 前提・実現したいこと
-下記画像のショップページ作成。
+ショップページ部分作成。
-（shoppage内で画像を好きな場所に配置）
+（ショップページ内で画像を好きな場所に配置）
-**理想↓**
-![イメージ説明](4195f213f529df4b9fcb8bd609bdbba7.jpeg)
-**現実↓**
-![イメージ説明](d4cbcaea76930af658b349d5622029a1.jpeg)
+![イメージ説明](0b81cd4f4e0363f8ae32eee3e4948c20.jpeg)
-### 発生している問題・エラーメッセージ
-発生している問題
-```
-shop‐pageの親要素にposition:relative;を、
-子要素にposition:absolute;を指定したところ、３つ目の画像から急に、下にある「google_map」の部分に引っ張られてしまいます。(左上揃いで)
-```
-CSS
-```
-.pc-shop {
-    display: none;
-    @media (min-width: 769px) {
-        display: block;
-        max-width: 1080px;
-        margin: auto;
-    }
-}
-.shop-images {
-    position: relative;
-    margin-bottom: 200px;
-    .center {
-        position: absolute;
-        img {
-            border-radius: 100px;
-        }
-    }
-    .Lower-right {
-        position: absolute;
-        img {
-            border-radius: 50px;
-        }
-    }
-    .Upper-right {
-        position: absolute;　←ここまでは何も問題はない。
-        img {
-            border-radius: 100px;
-        }
-    }
-    .Lower-left {
-        position: absolute;　←ここからabsoluteを入れると上の画像のように、shop-pageとaccess-pageがひとまとまりになってしまいます。
-        img {
-            z-index: 1000;
-            border-radius: 100px;
-        }
-    }
-    .Upper-left {
-        position: absolute;
-        img {
-            border-radius: 65px;
-        }
-    }
-}
-.pc-text-fas {
-    display: none;
-    @media (min-width: 769px) {
-        display: block;
-        flex-direction: row-reverse;
-        text-align: right;
-        a {
-            text-decoration: none;
-            color: #240E03;
-        }
-    }
-}
-.PC-SHOP-ALL {
-    @media (min-width: 769px) {
-    }
-}
-```
-### 原因（推測）
-原因は下のGoogleマップにposition:relative;が使われており、そこにshop-pageの画像に指定したabsoluteが引っ張られているのだと思います。
-### その他
-なぜこのようなことが起きてしまっているのでしょうか。
-positonの闇を感じています。
-### 追記　（アクセス部）
-HTML
-```
-<section class="pc-access">
-                <section class="access">
-                    <section class="access-text">
-                        <div class="information">
-                            <p><strong>-INFORMATION-</strong></p>
-                        </div>
-                        <br>
-                        <div class="close">
-                            <p><strong>CLOSE</strong></p>
-                            <p>毎週月曜日</p>
-                        </div>
-                        <br>
-                        <div class="openhouse">
-                            <p><strong>OPEN HOUSE</strong></p>
-                            <p>12:00 - 21:30</p>
-                        </div>
-                        <br>
-                        <div class="contact">
-                            <p><strong>CONTACT</strong></p>
-                            <p>Tell : 0120-000-000</p>
-                            <p>Mail : info@○○○.ne.com</p>
-                        </div>
-                    </section>
-                    <div id="google_map"></div>
-                    <script src=" //maps.googleapis.com/maps/api/js?key="-KEY-"></script>
-                    <script>
-                        function googleMap() {
-                            var latlng = new google.maps.LatLng(34.98769768804593, 135.75931326908082); /* 座標 */
-                            var myOptions = {
-                                zoom: 16,
-                                /* 拡大比率 */
-                                center: latlng,
-                                mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
-                            };
-                            var map = new google.maps.Map(document.getElementById('google_map'), myOptions);
-                            var markerOptions = {
-                                position: latlng,
-                                map: map,
-                                title: 'Fragile',
-                                /* タイトル */
-                                animation: google.maps.Animation.DROP /* アニメーション */
-                            };
-                            var marker = new google.maps.Marker(markerOptions);
-                            /* 取得スタイルの貼り付け */
-                            var styleOptions = [{
-                                "stylers ": [
-                                    { "hue ": '#00A497' }
-                                ]
-                            }];
-                            var styledMapOptions = { name: '架空サイト' } /* 地図右上のタイトル */
-                            var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
-                            map.mapTypes.set('style', sampleType);
-                            map.setMapTypeId('style');
-                        };
-                        google.maps.event.addDomListener(window, 'load', function() {
-                            googleMap();
-                        });
-                    </script>
-                </section>
-```
-CSS
-```
-.access {
-    margin: 0 20px 0 20px;
-    @media (min-width: 769px) {
-        display:flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-    }
-}
-.access-text {
-    margin: 20px;
-    justify-content: center;
-    text-align: center;
-    line-height: 30px;
-    @media (min-width: 769px) {
-        text-align: left;
-        margin-left: 80px;
-        line-height: 40px;
-        align-items: center;
-    }
-    .information p,
-    .close p,
-    .openhouse p,
-    .contact p {
-        margin: 0;
-        @media (min-width: 769px) {
-            font-size: 30px;
-        }
-    }
-}
-#google_map {
-    dispaly: none;
-    width: 335px;
-    height: 174px;
-    @media (min-width: 769px) {
-        display: block;
-        width: 500px;
-        height: 500px;
-    }
-}
-.address p {
-    text-align: center;
-    font-size: 10px;
-    margin-bottom: 90px;
-    @media (min-width: 768px) {
-        display:none;
-    }
-}
-.pc-addressp p {
-    display: none;
-    @media (min-width: 768px) {
-        display:block;
-    }
-}
-small {
-    display: none;
-    @media (min-width: 768px) {
-        display: block;
-        font-size: 60%;
-        margin-left: 85px;
-        paddin-top: 20px;
-    }
-}
-.pc-access {
-    @media (min-width: 769px) {
-        display: block;
-    }
-}
-.pc-access-text {
-    display: none;
-    @media (min-width: 769px) {
-        display: block;
-        text-align: center;
-        margin-bottom: 80px;
-        font-weight: bold;
-    }
-}
-```
-デベロッパーで見た時のグーグルマップ
-```
-<div id="google_map" style="position: relative; overflow: hidden;">
-<div style="height: 100%; width: 100%; position: absolute;
-top: 0px; left: 0px; background-color: rgb(229, 227, 223);">（以下略
-```

アクセス部分を追記しました。

2021/04/21 04:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -207,3 +207,347 @@
 なぜこのようなことが起きてしまっているのでしょうか。
 positonの闇を感じています。
+### 追記　（アクセス部）
+HTML
+```
+<section class="pc-access">
+                <section class="access">
+                    <section class="access-text">
+                        <div class="information">
+                            <p><strong>-INFORMATION-</strong></p>
+                        </div>
+                        <br>
+                        <div class="close">
+                            <p><strong>CLOSE</strong></p>
+                            <p>毎週月曜日</p>
+                        </div>
+                        <br>
+                        <div class="openhouse">
+                            <p><strong>OPEN HOUSE</strong></p>
+                            <p>12:00 - 21:30</p>
+                        </div>
+                        <br>
+                        <div class="contact">
+                            <p><strong>CONTACT</strong></p>
+                            <p>Tell : 0120-000-000</p>
+                            <p>Mail : info@○○○.ne.com</p>
+                        </div>
+                    </section>
+                    <div id="google_map"></div>
+                    <script src=" //maps.googleapis.com/maps/api/js?key="-KEY-"></script>
+                    <script>
+                        function googleMap() {
+                            var latlng = new google.maps.LatLng(34.98769768804593, 135.75931326908082); /* 座標 */
+                            var myOptions = {
+                                zoom: 16,
+                                /* 拡大比率 */
+                                center: latlng,
+                                mapTypeControlOptions: { mapTypeIds: ['style', google.maps.MapTypeId.ROADMAP] }
+                            };
+                            var map = new google.maps.Map(document.getElementById('google_map'), myOptions);
+                            var markerOptions = {
+                                position: latlng,
+                                map: map,
+                                title: 'Fragile',
+                                /* タイトル */
+                                animation: google.maps.Animation.DROP /* アニメーション */
+                            };
+                            var marker = new google.maps.Marker(markerOptions);
+                            /* 取得スタイルの貼り付け */
+                            var styleOptions = [{
+                                "stylers ": [
+                                    { "hue ": '#00A497' }
+                                ]
+                            }];
+                            var styledMapOptions = { name: '架空サイト' } /* 地図右上のタイトル */
+                            var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
+                            map.mapTypes.set('style', sampleType);
+                            map.setMapTypeId('style');
+                        };
+                        google.maps.event.addDomListener(window, 'load', function() {
+                            googleMap();
+                        });
+                    </script>
+                </section>
+```
+CSS
+```
+.access {
+    margin: 0 20px 0 20px;
+    @media (min-width: 769px) {
+        display:flex;
+        flex-direction: row-reverse;
+        justify-content: center;
+    }
+}
+.access-text {
+    margin: 20px;
+    justify-content: center;
+    text-align: center;
+    line-height: 30px;
+    @media (min-width: 769px) {
+        text-align: left;
+        margin-left: 80px;
+        line-height: 40px;
+        align-items: center;
+    }
+    .information p,
+    .close p,
+    .openhouse p,
+    .contact p {
+        margin: 0;
+        @media (min-width: 769px) {
+            font-size: 30px;
+        }
+    }
+}
+#google_map {
+    dispaly: none;
+    width: 335px;
+    height: 174px;
+    @media (min-width: 769px) {
+        display: block;
+        width: 500px;
+        height: 500px;
+    }
+}
+.address p {
+    text-align: center;
+    font-size: 10px;
+    margin-bottom: 90px;
+    @media (min-width: 768px) {
+        display:none;
+    }
+}
+.pc-addressp p {
+    display: none;
+    @media (min-width: 768px) {
+        display:block;
+    }
+}
+small {
+    display: none;
+    @media (min-width: 768px) {
+        display: block;
+        font-size: 60%;
+        margin-left: 85px;
+        paddin-top: 20px;
+    }
+}
+.pc-access {
+    @media (min-width: 769px) {
+        display: block;
+    }
+}
+.pc-access-text {
+    display: none;
+    @media (min-width: 769px) {
+        display: block;
+        text-align: center;
+        margin-bottom: 80px;
+        font-weight: bold;
+    }
+}
+```
+デベロッパーで見た時のグーグルマップ
+```
+<div id="google_map" style="position: relative; overflow: hidden;">
+<div style="height: 100%; width: 100%; position: absolute;
+top: 0px; left: 0px; background-color: rgb(229, 227, 223);">（以下略
+```