質問編集履歴

解決方法を2つに絞りました

2021/10/23 10:55

投稿

mammaluce

スコア1

test CHANGED Viewed

	@@ -1 +1 @@
1	- ナビゲーションメニューのフルスクリーン時にスクロール~~されて~~しまう
1	+ ナビゲーションメニューのフルスクリーン時にスクロールできなくしたい

test CHANGED Viewed

@@ -18,7 +18,7 @@
-【解決したいこと】下記の3つです
+【解決したいこと】下記の2つです
 ◎ナビゲーションメニューを開いても、スクロールできなくなるようにしたい
@@ -26,8 +26,6 @@
 ![イメージ説明](be0dd920ff0944a1daa830d292de6d83.png)
-◎もし、可能であれば、最終セクションのプロフィールに入ったら、ヘッダーの固定が隠れて、上へスクロールすると戻ってくれるようにしたい

写真を追加しました

2021/10/23 10:55

投稿

mammaluce

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,6 +24,8 @@
 ◎最終セクションのプロフィールが被って、途中から上へスクロールし、戻るようにすると、上のスクロールスナップと最終セクションのプロフィールが不自然になる
+![イメージ説明](be0dd920ff0944a1daa830d292de6d83.png)
 ◎もし、可能であれば、最終セクションのプロフィールに入ったら、ヘッダーの固定が隠れて、上へスクロールすると戻ってくれるようにしたい

一部修正しました

2021/10/22 11:38

投稿

mammaluce

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -358,7 +358,7 @@
-/* ヒーリング：コンセプト */
+/* コンセプト */
 .area.concept {

中途半端に投稿されてしまったので、追記しました。

2021/10/22 11:36

投稿

mammaluce

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,7 +6,7 @@
 ・スクロールスナップ
-・メニューバーは右のロゴ含めてヘッダー固定
+・メニューバーは左側にハンバーガーメニュー、右のロゴ含めてヘッダー固定
 ・スクロールダウンアニメーション
@@ -18,6 +18,18 @@
+【解決したいこと】下記の3つです
+◎ナビゲーションメニューを開いても、スクロールできなくなるようにしたい
+◎最終セクションのプロフィールが被って、途中から上へスクロールし、戻るようにすると、上のスクロールスナップと最終セクションのプロフィールが不自然になる
+◎もし、可能であれば、最終セクションのプロフィールに入ったら、ヘッダーの固定が隠れて、上へスクロールすると戻ってくれるようにしたい
 ```html
 <header class="site-header">
@@ -112,11 +124,7 @@
 			<div class="conceptmessage">
-				<h3>xxxxxxxxxxx</h3>
-				<p>
-				</p>
 			</div>
@@ -142,11 +150,7 @@
 			<div class="sitemapmessage">
-				<h3>&lt;サイトマップ&gt;</h3>
-				<p>
-				</p>
 			</div>
@@ -164,13 +168,7 @@
 			<div class="menulistmessage">
-			<h3>【メニュー】</h3>
-				<p>
-				</p>
 			</div>
@@ -188,13 +186,7 @@
 			<div class="menumessage">
-				<h3><i class="fas fa-paw"></I>メニュー</h3>
-				<p>
-				</p>
 			</div>
@@ -224,13 +216,7 @@
 			<div class="menu2message">
-				<h3><i class="fas fa-paw"></I>メニュー2</h3>
-				<p>
-				</p>
 			</div>
@@ -256,11 +242,7 @@
 			<div class="menu3message">
-				<p>
-				</p>
 			</div>
@@ -286,14 +268,6 @@
 	<h6 id="6_profile">プロフィール</h6>
-	<br>
-	<br>
-	<br>
-	<br>
 		<div class="profilebox">
 			<h3><i class="fas fa-paw"></i>&nbsp;プロフィール</h3>
@@ -306,85 +280,13 @@
 			<div class="profilemessage">
-				<h3>　</h3>
-				<p>
-				</p>
 			</div>
 		</div>
-		<div class="paymentbox">
-			<h3>お支払い方法について</h3>
-			<div class="paymentmessage">
-				<p>
-				</p>
-			</div>
-			<div class="paymentphoto">
-				<img src="img/payment.png" alt="payment">
-			</div>
-		</div>
-		<div class="policybox">
-			<h3>ポリシーについて</h3>
-			<div class="policymessage">
-				<p>
-				</p>
-			</div>
-			<div class="cancelpolicy">
-				<h3><i class="fas fa-paw"></i>&nbsp;キャンセルポリシーについて</h3>
-					<p>
-					</p>
-			</div>
-			<div class="privacypolicy">
-				<h3><i class="fas fa-paw"></i>&nbsp;プライバシーポリシー</h3>
-					<p>
-					</p>
-			</div>
-		</div>
 	</section>
@@ -400,8 +302,760 @@
 ```
+```CSS
+/* スクロールスナップ */
+.healingcontainer {
+	overflow: auto;
+	scroll-snap-type: y mandatory;
+	height: 100vh;
+}
+.area {
+	scroll-snap-align: start;
+	height: 100vh;
+}
+.area h6 {
+	color: #ffffff;
+	opacity: 0.01;
+	text-align: left;
+}
+.profile h6 {
+	color: #ffffff;
+	opacity: 0.01;
+	text-align: left;
+}
+/* ヒーリング：コンセプト */
+.area.concept {
+	background: url(img/concept.jpg) no-repeat center center;
+	background-size: cover;
+}
+/* 矢印が動いてスクロールを促す */
+/*スクロールダウン全体の場所*/
+.scrolldown {
+    /*描画位置※位置は適宜調整してください*/
+	position: absolute;
+	bottom: 5%;
+	right: 50%;
+    /*矢印の動き1秒かけて永遠にループ*/
+	animation: arrowmove 1s ease-in-out infinite;
+}
+/*下からの距離が変化して全体が下→上→下に動く*/
+@keyframes arrowmove {
+	0% {
+		bottom: 1%;
+	}
+	50% {
+		bottom: 3%;
+	}
+     100% {
+     	bottom: 1%;
+     }
+ }
+/*Scrollテキストの描写*/
+.scrolldown span {
+    /*描画位置*/
+	position: absolute;
+	left: -20px;
+	bottom: 10px;
+    /*テキストの形状*/
+	color: #eee;
+	font-size: 0.7rem;
+	letter-spacing: 0.05em;
+	/*縦書き設定*/
+	-ms-writing-mode: tb-rl;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
+}
+/* 矢印の描写 */
+.scrolldown:before {
+    content: "";
+    /*描画位置*/
+    position: absolute;
+    bottom: 0;
+    right: -6px;
+    /*矢印の形状*/
+    width: 1px;
+    height: 20px;
+    background: #eee;
+    transform: skewX(-31deg);
+}
+.scrolldown:after{
+	content:"";
+    /*描画位置*/
+	position: absolute;
+	bottom:0;
+	right:0;
+    /*矢印の形状*/
+	width:1px;
+	height: 50px;
+	background:#eee;
+}
+@media screen and (max-width: 800px) {
+	.site-header, .site-header:before {
+		height: 90vh;
+	}
+}
+/* サイトマップ */
+.area.sitemap {
+	background: url(img/sitemap.jpg) no-repeat center center;
+	background-size: cover;
+}
+/* メニューリスト */
+.area.menulist {
+	background: url(img/menulist.jpg) no-repeat center center;
+	background-size: cover;
+}
+/* メニュー */
+.area.menu {
+	background: url(img/menu.jpg) no-repeat center center;
+	background-size: cover;
+}
+/* メニュー2 */
+.area.menu2 {
+	background: url(img/menu2.jpg) no-repeat left center;
+	background-size: cover;
+}
+/* メニュー3 */
+.area.menu3 {
+	background: url(img/beach.jpg) no-repeat left center;
+	background-size: cover;
+}
+/* プロフィール */
+.profile {
+	position: relative;
+	z-index: -100;
+	background: url(img/orange0099.png) repeat;
+	padding: 200px 0;
+}
+/* メニューバー：固定 */
+.site-header {
+	background: rgba(255, 255, 255, 0.75);
+	display: flex;
+	position: fixed;
+	justify-content: space-between;
+	width: 100%;
+	height: 100px;
+}
+/* メニューバー：画像 */
+.site-header img {
+	width: 192px;
+	height: 108px;
+	opacity: 0.8;
+	margin-right: 30px;
+}
+/* メニューバー：ハンバーガーメニュー余白 */
+.container {
+	padding: 40px 0 20px 20px;
+}
+/* メニューバー：ボタンテキスト非表示 */
+.sr-only {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+/* ナビゲーションボタン */
+.nav-button {
+	box-sizing: content-box;
+	padding: 0;
+	outline: none;
+	border: none;
+	background: none;
+	width: 30px;
+	height: 20px;
+	cursor: pointer;
+	color: #735D48;
+}
+.nav-button::before,
+.nav-button::after {
+	content: '';
+	display: block;
+	height: 1px;
+	background-color: currentColor;
+	transform: translateY(10px);
+	transition: 0.3s ease-in-out;
+}
+.nav-button::before {
+	transform: translateY(-10px);
+	box-shadow: 0 10px currentColor;
+}
+	/* ナビゲーションボタン（閉じるボタン） */
+	.open .nav-button {
+		z-index: 1000;
+	}
+	.open .nav-button::before {
+		transform: rotate(-45deg);
+		box-shadow: none;
+	}
+	.open .nav-button::after {
+		transform: rotate(45deg);
+		box-shadow: none;
+	}
+}
+/* ナビゲーションメニュー：（開いた状態） */
+html.open, .open body {
+	height: 100%;
+	overflow: hidden;
+}
+.open .site-header {
+	position: relative;
+	margin-bottom: -100px;
+}
+.open .headerNav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	background: rgba(255,255,255,0.8);
+	color: #735D48;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.open .headerNav ul {
+	margin-bottom: 5px;
+}
+.open .headerNav li:not(:last-child) {
+	margin-bottom: 5px;
+}
+/* ナビゲーションメニュー（閉じた状態） */
+.headerNav {
+	width: 0;
+	height: 0;
+	position: absolute;
+	right: 100%;
+	overflow: hidden;
+	color: transparent;
+	transition: 0.5s ease-in-out;
+}
+/* ナビゲーションメニュー */
+.navItem a {
+	display: block;
+	padding: 20px 0 15px;
+	margin-left: 20px;
+	text-align: center;
+	font-size: 18px;
+	color: #735D48;
+	font-weight: bold;
+}
+@media (max-width: 768px) {
+	.navItem a {
+		display: block;
+		padding: 10px 0 5px;
+		margin-left: 20px;
+		text-align: center;
+		font-size: 12px;
+		color: #735D48;
+		font-weight: bold;
+	}
+}
+@media (min-width: 769px) {
+	.navItem a {
+		display: block;
+		padding: 15px 0 15px;
+		margin-left: 20px;
+		text-align: center;
+		font-size: 24px;
+		color: #735D48;
+		font-weight: bold;
+	}
+}
+/* 擬似要素でテキストを表示 */
+	.navItem a::after {
+		display: block;
+		margin-top: 2px;
+		font-family: 'RocknRoll One', sans-serif;
+		font-size: 10px;
+		font-weight: lighter;
+	}
+	.navItemTop a::after {
+		content: "トップ";
+	}
+	.navItemConcept a::after {
+		content: "コンセプト";
+	}
+	.navItemSitemap a::after {
+		content: "サイトマップ";
+	}
+	.navItemMenu a::after {
+		content: "メニュー";
+	}
+	.navItemDNAA a::after {
+		content: "DNA アクティベーション";
+	}
+	.navItemREIKI a::after {
+		content: "レイキ";
+	}
+	.navItemMAXM a::after {
+		content: "MAX 瞑想";
+	}
+	.navItemProfile a::after {
+		content: "プロフィール / お支払い方法 / ポリシー";
+	}
+}
+@media (min-width: 801px) {
+	.navItem a::after {
+		display: block;
+		margin-top: 2px;
+		font-family: 'RocknRoll One', sans-serif;
+		font-size: 20px;
+		font-weight: lighter;
+	}
+}
 ```
+```JavaScript
+<script>
+function navFunc() {
+	document.querySelector('html').classList.toggle('open');
-コード
+}
+function navFuncClose() {
+    document.querySelector('html').classList.remove('open');
+}
+</script>
 ```