編集履歴

質問編集履歴

修正

2020/08/24 05:21

投稿

..o

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -608,194 +608,182 @@
-.container {
+div.sidenav {
-    min-height: 100vh;
-    height: 100%;
+    height: 100vh;
-    width: 80%;
+    width: 20%;
+    position: fixed;
+    top: 0;
+    background-color: #fff;
+    overflow: hidden;
+}
+div.sidenav nav {
+    margin-top: 10vh;
+    margin-bottom: 6vh;
+    height: 84vh;
+    padding-right: 10%;
+}
+div.sidenav ul.sidemenu {
+    width: auto;
+    float: right;
+    overflow: hidden;
+}
+div.sidenav ul.sidemenu li {
+    list-style: none outside none;
+    width: 100%;
+    float: left;
+    overflow: hidden;
-    margin: 6vh 0 100px 20%;
+    margin: 0 0 15% 0;
+    text-align: right;
+}
+div.sidenav nav ul.sidemenu li a {
+    float: right;
+    overflow: hidden;
+    text-align: right;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 2em;
+    letter-spacing: 1.5px;
+    text-decoration: none;
+    color: #343232;
+    width: 100%;
     position: relative;
-}
-div.sidenav {
-    height: 100vh;
-    width: 20%;
-    position: fixed;
-    top: 0;
-    background-color: #fff;
-    overflow: hidden;
-}
-div.sidenav nav {
-    margin-top: 10vh;
-    margin-bottom: 6vh;
-    height: 84vh;
-    padding-right: 10%;
-}
-div.sidenav ul.sidemenu {
-    width: auto;
+    line-height: 1;
+}
+div.sidenav nav ul.sidemenu li a::after {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: block;
+    content: "";
+    width: 0%;
+    height: 1px;
+    background: #404040;
+    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+div.sidenav nav ul.sidemenu li a:hover::after {
+    width: 100%;
+}
+div.sidenav nav ul.sidemenu li a:hover {
+    color: #746be8;
+}
+div.sidenav nav ul.sidemenu li a span {
+    font-size: 13px;
+}
+div.sidenav h1 {
+    display: block;
+    width: 150px;
     float: right;
-    overflow: hidden;
-}
+}
+div.sidenav h1 a {
+    display: block;
+}
-div.sidenav ul.sidemenu li {
+div.sidenav h1 a img {
-    list-style: none outside none;
     width: 100%;
-    float: left;
-    overflow: hidden;
-    margin: 0 0 15% 0;
-    text-align: right;
-}
-div.sidenav nav ul.sidemenu li a {
-    float: right;
-    overflow: hidden;
-    text-align: right;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 2em;
-    letter-spacing: 1.5px;
-    text-decoration: none;
-    color: #343232;
-    width: 100%;
-    position: relative;
-    line-height: 1;
-}
-div.sidenav nav ul.sidemenu li a::after {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    display: block;
-    content: "";
-    width: 0%;
-    height: 1px;
-    background: #404040;
-    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
-div.sidenav nav ul.sidemenu li a:hover::after {
-    width: 100%;
-}
-div.sidenav nav ul.sidemenu li a:hover {
-    color: #746be8;
-}
-div.sidenav nav ul.sidemenu li a span {
-    font-size: 13px;
-}
-div.sidenav h1 {
-    display: block;
-    width: 150px;
-    float: right;
-}
-div.sidenav h1 a {
-    display: block;
-}
-div.sidenav h1 a img {
-    width: 100%;
 }

追加

2020/08/24 05:21

投稿

..o

スコア28

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -42,6 +42,14 @@
 ```HTML
+<!DOCTYPE html>
+<html>
 <head>
     <meta charset="utf-8" name="Officialsite" content="">
@@ -70,4 +78,738 @@
 </head>
+<body>
+    <div class="firstview sp_none" >
+        <video class="bg-video" src="img/TOP/topmovie.mp4" poster="img/PROFILE/profile1.jpg" muted autoplay loop playsinline></video>
+    </div>
+    <header class="header pc_none">
+        <nav class="global-nav">
+            <ul class="global-nav__list">
+                <li class="global-nav__item"><a href="">メニュー1</a></li>
+                <li class="global-nav__item"><a href="">メニュー2</a></li>
+                <li class="global-nav__item"><a href="">メニュー3</a></li>
+                <li class="global-nav__item"><a href="">メニュー4</a></li>
+                <li class="global-nav__item"><a href="">メニュー5</a></li>
+            </ul>
+        </nav>
+        <div class="hamburger" id="js-hamburger">
+            <span class="hamburger__line hamburger__line--1"></span>
+            <span class="hamburger__line hamburger__line--2"></span>
+            <span class="hamburger__line hamburger__line--3"></span>
+        </div>
+        <div class="black-bg" id="js-black-bg"></div>
+    </header>
+    <div class="sidenav sp_none">
+        <nav sp_none>
+            <ul class="sidemenu">
+                <li><a href="index.html">HOME<br><span>ホーム</span></a></li>
+                <li><a href="profile.html">PROFILE<br><span>プロフィール</span></a></li>
+                <li><a href="access.html">ACCESS<br><span>住所</span></a></li>
+                <li><a href="courses.html">COURSES<br><span>コース・料金</span></a></li>
+                <li><a href="reservation/reservation.html">RESERVATI<br><span>ご予約</span></a></li>
+                <li><a href="">CONTACT<br><span>お問い合わせ</span></a></li>
+            </ul>
+            <h1><a href="index.html"><img src="img/TOP/logo1.jpg" alt="HALUロゴ"></a></h1>
+        </nav>
+    </div>
+</body>
+</html>
 ```
+tb.css
+```css
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+p {
+    word-break: break-all;
+}
+a {
+    text-decoration: none;
+}
+li {
+    list-style: none;
+}
+.pc_none {
+    display: block;
+}
+.sp_none {
+    display: none;
+}
+.clearfix:after {
+    content: "";
+    display: block;
+    clear: both;
+}
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 52px;
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
+}
+.header_logo{
+    padding:1px 0 1px 0;
+    width: 100px;
+    height: 52px;
+    margin: 0 auto;
+}
+.header_logo a{
+    display: block;
+    width: 100%;
+}
+.header_logo img{
+  max-width: 100%;
+}
+.global-nav {
+    position: fixed;
+    right: -40vw;
+    /* これで隠れる */
+    top: 0;
+    width: 40vw;
+    /* スマホに収まるくらい */
+    height: 100vh;
+    padding-top: 40px;
+    background-color: #fff;
+    transition: all .6s;
+    z-index: 200;
+    overflow-y: auto;
+    /* メニューが多くなったらスクロールできるように */
+}
+.hamburger {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 52px;
+    /* クリックしやすいようにちゃんと幅を指定する */
+    height: 50px;
+    /* クリックしやすいようにちゃんと高さを指定する */
+    cursor: pointer;
+    z-index: 300;
+}
+.global-nav__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.global-nav__item {
+    text-align: center;
+    padding: 0 14px;
+}
+.global-nav__item a {
+    display: block;
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    text-decoration: none;
+    color: #111;
+}
+.global-nav__item a:hover {
+    background-color: #eee;
+}
+.hamburger__line {
+    position: absolute;
+    left: 11px;
+    width: 18px;
+    height: 1px;
+    background-color: #111;
+    transition: all .6s;
+}
+.hamburger__line--1 {
+    top: 18px;
+}
+.hamburger__line--2 {
+    top: 26px;
+}
+.hamburger__line--3 {
+    top: 34px;
+}
+.black-bg {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 100;
+    background-color: #000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .6s;
+    cursor: pointer;
+}
+/* 表示された時用のCSS */
+.nav-open .global-nav {
+    right: 0;
+}
+.nav-open .black-bg {
+    opacity: .8;
+    visibility: visible;
+}
+.nav-open .hamburger__line--1 {
+    transform: rotate(45deg);
+    top: 20px;
+}
+.nav-open .hamburger__line--2 {
+    width: 0;
+    left: 50%;
+}
+.nav-open .hamburger__line--3 {
+    transform: rotate(-45deg);
+    top: 20px;
+}
+```
+style.css
+```css
+@charset "utf-8";
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+p {
+    word-break: break-all;
+}
+a {
+    text-decoration: none;
+}
+li {
+    list-style: none;
+}
+.pc_none{
+    display: none;
+}
+.clearfix:after {
+    content: "";
+    display: block;
+    clear: both;
+}
+/* ホーム */
+html,
+body {
+    height: 100%;
+    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "HGS明朝E", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;
+}
+.container {
+    min-height: 100vh;
+    height: 100%;
+    width: 80%;
+    margin: 6vh 0 100px 20%;
+    position: relative;
+}
+div.sidenav {
+    height: 100vh;
+    width: 20%;
+    position: fixed;
+    top: 0;
+    background-color: #fff;
+    overflow: hidden;
+}
+div.sidenav nav {
+    margin-top: 10vh;
+    margin-bottom: 6vh;
+    height: 84vh;
+    padding-right: 10%;
+}
+div.sidenav ul.sidemenu {
+    width: auto;
+    float: right;
+    overflow: hidden;
+}
+div.sidenav ul.sidemenu li {
+    list-style: none outside none;
+    width: 100%;
+    float: left;
+    overflow: hidden;
+    margin: 0 0 15% 0;
+    text-align: right;
+}
+div.sidenav nav ul.sidemenu li a {
+    float: right;
+    overflow: hidden;
+    text-align: right;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 2em;
+    letter-spacing: 1.5px;
+    text-decoration: none;
+    color: #343232;
+    width: 100%;
+    position: relative;
+    line-height: 1;
+}
+div.sidenav nav ul.sidemenu li a::after {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: block;
+    content: "";
+    width: 0%;
+    height: 1px;
+    background: #404040;
+    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+div.sidenav nav ul.sidemenu li a:hover::after {
+    width: 100%;
+}
+div.sidenav nav ul.sidemenu li a:hover {
+    color: #746be8;
+}
+div.sidenav nav ul.sidemenu li a span {
+    font-size: 13px;
+}
+div.sidenav h1 {
+    display: block;
+    width: 150px;
+    float: right;
+}
+div.sidenav h1 a {
+    display: block;
+}
+div.sidenav h1 a img {
+    width: 100%;
+}
+```
+諸事情によりどこまで載せていいのかわからないので最低限にしています..
+.sp_none
+.pc_none
+が効かないことにまず困っています。