編集履歴

質問編集履歴

イメージの追加

2021/03/19 07:16

投稿

mitrasi

スコア49

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -837,3 +837,15 @@
 ※本来の投稿機能の使い方から外れますが、全コードの掲示にあたり、上記を消すわけにもいかないため、自己解決投稿欄を使用させて頂いております。ご容赦ください。
+### 追記
+![<source>タグ](a1f4d74d16a190c2439524476353fadd.png)
+![<image>タグ](69d08128210ce69150d7a1cbf39f4e05.png)
+以上の状態から、<sorce>タグの画像が読み込まれず、<image>タグが読み込まれているのではないかと推測しました。

コードの訂正

2021/03/19 07:16

投稿

mitrasi

スコア49

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -118,6 +118,12 @@
    <div class="wrapper">
+    <div class="scroll-bar">
+     <p class="message">SCROLL</p>
+    </div>
     <div class="fv-wrapper">
      <picture>
@@ -150,8 +156,6 @@
   </section>
  </main>
@@ -176,131 +180,91 @@
 ```CSS
-@import "va";
+@charset "UTF-8";
+/*カラーコード*/
+/*mixin*/
 html {
- font-size: 62.5%;
+  font-size: 62.5%;
+}
- * {
+html * {
   box-sizing: border-box;
- }
+}
- body {
+html body {
   line-height: 1.8;
   font-size: 16px;
-  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
+  font-family: "Montserrat", "Noto Sans JP", sans-serif;
   width: 100%;
-  img,
-   {
-   max-width: 100%;
-   vertical-align: bottom;
-  }
-  h2 {
-   font-size: 3.2rem;
-   font-weight: bold;
-  }
-  h3 {
-   font-size: 2.4rem;
-   font-weight: bold;
-  }
-  a {
-   text-decoration: none;
-   color: $white;
-  }
-  section {
-   margin: 0 auto;
-   text-align: center;
-   .wrapper {}
-  }
- }
-}
+}
+html body img {
+  max-width: 100%;
+  vertical-align: bottom;
+}
+html body h2 {
+  font-size: 3.2rem;
+  font-weight: bold;
+}
+html body h3 {
+  font-size: 2.4rem;
+  font-weight: bold;
+}
+html body a {
+  text-decoration: none;
+  color: #FFFFFF;
+}
+html body section {
+  margin: 0 auto;
+  text-align: center;
+}
 /*ヘッダー*/
 header {
- position: absolute;
+  position: absolute;
- width: 100%;
+  width: 100%;
- /*共通部とここでwidth:100pxで広がる*/
+  /*共通部とここでwidth:100pxで広がる*/
- z-index: 10;
+  z-index: 10;
+}
- .header-wrapper {
+header .header-wrapper {
   padding: 30px 58px;
@@ -308,415 +272,297 @@
   justify-content: space-between;
+}
-  .header-nav {
+header .header-wrapper .header-nav {
-   display: flex;
+  display: flex;
+}
+header .header-wrapper .header-nav .header-list {
+  padding-right: 7px;
+}
+/*fv*/
+#fv {
+  height: 464px;
+}
+#fv .wrapper {
+  display: flex;
+}
+#fv .wrapper .scroll-bar {
+  display: none;
+}
+#fv .fv-wrapper {
+  position: relative;
+  overflow: hidden;
+  width: 96.3vw;
+  height: 387px;
+  text-align: left;
+  z-index: 2;
+}
+#fv .fv-wrapper .fv-img {
+  position: absolute;
+  top: -40%;
+  object-position: right;
+  filter: brightness(60%);
+  height: 100vh;
+}
+#fv .fv-black {
+  width: 780px;
+  height: 464px;
+  background-color: #333333;
+  z-index: 1;
+  position: absolute;
+  right: 0;
+}
+#fv .copy {
+  z-index: 5;
+  color: #FFFFFF;
+  font-weight: bold;
+  margin-top: 157px;
+  position: absolute;
+  right: 17%;
+  text-align: left;
+}
+#fv .copy .sub-copy,
+#fv .copy .company {
+  font-size: 20px;
+}
+#fv .copy .main-copy {
+  font-size: 7.2rem;
+}
+#fv .copy .sub-copy {
+  font-weight: normal;
+}
+/*footer*/
+footer {
+  background-color: #333333;
+  text-align: center;
+  color: #FFFFFF;
+  padding: 18px;
+  font-size: 10px;
+}
+/*レスポンシブ*/
+/*タブレット版*/
+@media screen and (max-width: 1000px) {
+  html body {
+    font-size: 1.4rem;
+    width: 100%;
+  }
+  html body h2 {
+    font-size: 3.2rem;
+  }
+  /*ヘッダー　タブレット*/
-   .header-list {
+  header {
+    /*ここでheaderのpaddingを設定してしまうと画面の外まで飛び出してしまう*/
+  }
+  header .header-wrapper {
+    display: flex;
+    height: 20px;
+    padding: 30px;
+    /*ヘッダー全体がはみ出さないようにする*/
+  }
+  header .header-wrapper .header-log .site-log {
+    height: 20px;
+  }
+  header .header-wrapper .header-nav {
+    display: flex;
+  }
+  header .header-wrapper .header-nav .header-list {
     padding-right: 7px;
-   }
-  }
- }
-}
-/*fv*/
-#fv {
- height: 464px;
- .wrapper {
-  display: flex;
- }
- .fv-wrapper {
-  position: relative;
-  overflow: hidden;
-  width: 96.3vw;
-  height: 387px;
-  .fv-img {
-   position: absolute;
-   //   background-image: url(../img/contact-page.png);
-   top: -40%;
-   object-position: right;
-   filter: brightness(60%);
-   height: 100vh;
-  }
-  text-align: left;
-  z-index: 2;
- }
- .fv-black {
-  width: 780px;
-  height: 464px;
-  background-color: $black;
-  z-index: 1;
-  position: absolute;
-  right: 0;
- }
- .copy {
-  z-index: 5;
-  color: $white;
-  font-weight: bold;
-  margin-top: 157px;
-  position: absolute;
-  right: 17%;
-  text-align: left;
-  .sub-copy,
-  .company {
-   font-size: 20px;
-  }
-  .main-copy {
-   font-size: 7.2rem;
-  }
-  .sub-copy {
-   font-weight: normal;
-  }
- }
-}
-/*footer*/
-footer {
- background-color: $black;
- text-align: center;
- color: $white;
- padding: 18px;
- font-size: 10px;
-}
-/*レスポンシブ*/
-/*タブレット版*/
-@media screen and (max-width:1000px) {
- html {
-  body {
-   font-size: 1.4rem;
-   width: 100%;
-   h2 {
-    font-size: 3.2rem;
-   }
-  }
- }
- /*ヘッダー　タブレット*/
- header {
-  .header-wrapper {
-   display: flex;
-   height: 20px;
-   padding: 30px;
-   .header-log {
-    .site-log {
-     height: 20px;
-    }
-   }
-   .header-nav {
+  }
+  /*fv　タブレット*/
+  #fv {
+    height: 615px;
+  }
+  #fv .wrapper {
     display: flex;
-    .header-list {
-     padding-right: 7px;
+    width: 100%;
-    }
+  }
-   }
-  }
- }
- /*fv　タブレット*/
- #fv {
-  height: 615px;
-  .wrapper {
-   display: flex;
-   width: 100%;
-  }
-  .fv-wrapper {
+  #fv .fv-wrapper {
-   position: absolute;
-   top: 0;
-   //   background-image: url(../img/contact-page@2x.png);
-   text-align: left;
-   width: 578px;
-   height: 529px;
-   position: relative;
-   .fv-img {
     position: absolute;
+    top: 0;
+    text-align: left;
+    width: 578px;
+    height: 529px;
+    position: relative;
+  }
+  #fv .fv-wrapper .fv-img {
+    position: absolute;
     object-position: 45% 50%;
     object-fit: cover;
-   }
+  }
+  #fv .fv-black {
+    width: 52.86vw;
+    height: 60.06vh;
+    background-color: #333333;
+    z-index: 0;
+    position: absolute;
+    right: 0;
+    /*margin-bottom: 80px;*/
+    /* margin-bottom: 120px;*/
-  }
+  }
-  .fv-black {
+  #fv .copy {
-   width: 52.86vw;
-   height: 60.06vh;
-   background-color: $black;
-   z-index: 0;
+    z-index: 5;
+    color: #FFFFFF;
+    font-weight: bold;
+    margin-top: 330px;
-   position: absolute;
+    position: absolute;
-   right: 0;
+    right: 12%;
-   /*margin-bottom: 80px;*/
+    text-align: left;
-   /* margin-bottom: 120px;*/
-  }
+  }
-  .copy {
-   z-index: 5;
-   color: $white;
-   font-weight: bold;
-   margin-top: 330px;
-   position: absolute;
-   right: 12%;
-   text-align: left;
-   .sub-copy,
+  #fv .copy .sub-copy,
-   .company {
+#fv .copy .company {
     font-size: 16px;
-   }
+  }
-   .main-copy {
+  #fv .copy .main-copy {
     font-size: 5.6rem;
@@ -724,263 +570,223 @@
     margin-top: 10px;
-   }
+  }
-  }
+}
- }
 /*スマホ版*/
-@media screen and (max-width:767px) {
+@media screen and (max-width: 767px) {
- * {
+  * {
-  box-sizing: border-box;
+    box-sizing: border-box;
- }
+  }
- html {
+  html body {
-  body {
-   font-size: 1.4rem;
+    font-size: 1.4rem;
+  }
-   h2 {
+  html body h2 {
     font-size: 2.8rem;
-    width: 44.8vw
+    width: 44.8vw;
-   }
+  }
-   h3 {
+  html body h3 {
     font-size: 2.4rem;
     font-weight: normal;
-   }
+  }
-   section {
-    .wrapper {
+  html body section .wrapper {
-     padding: 0 15px;
+    padding: 0 15px;
-    }
+  }
+  html body .section-title {
+    font-size: 2.8rem;
-   }
+  }
+  /*ヘッダー*/
+  header .header-wrapper {
+    padding: 15px 19px;
-   .section-title {
+    display: flex;
+    justify-content: space-between;
-    font-size:
+    z-index: 10;
-     2.8rem;
-   }
+  }
-  }
- }
- /*ヘッダー*/
- header {
-  .header-wrapper {
+  header .header-wrapper .header-log {
-   padding: 15px 19px;
-   display: flex;
-   justify-content: space-between;
-   z-index: 10;
-   .header-log {
     width: 189px;
     height: 20px;
-   }
+  }
-   .header-nav {
+  header .header-wrapper .header-nav {
     display: flex;
-    a {
-     font-size: 1.2rem;
-    }
-    .header-list {
-     padding-right: 7px;
-    }
-   }
-  }
- }
- /*fv*/
- #fv {
-  /*height: 100vh;*/
-  .wrapper {
-   display: flex;
-   width: 100%;
-   padding: 0;
-  }
-  .fv-wrapper {
-   text-align: left;
-   z-index: 1;
-   width: 76.53vw;
-   height: 86.96vh;
-   /*overflow: hidden;*/
-   position: relative;
-   .fv-img {
+  }
+  header .header-wrapper .header-nav a {
+    font-size: 1.2rem;
+  }
+  header .header-wrapper .header-nav .header-list {
+    padding-right: 7px;
+  }
+  /*fv*/
+  #fv {
+    height: 445px;
+  }
+  #fv .wrapper {
+    display: flex;
+    width: 100%;
+    padding: 0;
+  }
+  #fv .wrapper .scroll-bar {
+    display: block;
+    position: absolute;
+    z-index: 10;
+    top: 35%;
+    left: -26%;
+  }
+  #fv .wrapper .scroll-bar .message {
+    color: #FFFFFF;
+    transform: rotate(-90deg);
+    font-weight: bold;
+  }
+  #fv .wrapper .scroll-bar .message::after {
+    content: "";
+    background-color: #333333;
+    display: inline-block;
+    vertical-align: middle;
+    width: 178.5px;
+    height: 0.15rem;
+  }
+  #fv .fv-wrapper {
+    text-align: left;
+    z-index: 1;
+    width: 76.53vw;
+    height: 270px;
+    /*overflow: hidden;*/
+    position: relative;
+  }
+  #fv .fv-wrapper .fv-img {
     object-position: top;
-   }
+  }
+  #fv .fv-black {
+    width: 75.47vw;
+    height: 365px;
+    background-color: #333333;
+    z-index: 0;
+    position: absolute;
+    right: 0;
-  }
+  }
-  .fv-black {
+  #fv .copy {
-   width: 75.47vw;
-   height: 667px;
-   background-color: $black;
-   z-index: 0;
+    z-index: 5;
+    color: #FFFFFF;
+    font-weight: bold;
+    margin-top: 175px;
-   position: absolute;
+    position: absolute;
-   right: 0;
+    right: 6%;
+    text-align: right;
-  }
+  }
-  .copy {
-   z-index: 5;
-   color: $white;
-   font-weight: bold;
-   margin-top: 175px;
-   position: absolute;
-   right: 6%;
-   text-align: right;
-   .sub-copy,
+  #fv .copy .sub-copy,
-   .company {
+#fv .copy .company {
     font-size: 16px;
-   }
+  }
-   .main-copy {
+  #fv .copy .main-copy {
     font-size: 5.6rem;
@@ -988,21 +794,7 @@
     margin-top: 10px;
-   }
+  }
-  }
- }
 }

コードの訂正

2021/03/19 06:41

投稿

mitrasi

スコア49

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1041,3 +1041,7 @@
 エディタ:Brackets
 ブラウザ:クローム
+※本来の投稿機能の使い方から外れますが、全コードの掲示にあたり、上記を消すわけにもいかないため、自己解決投稿欄を使用させて頂いております。ご容赦ください。