質問編集履歴

文字を追記しました。

2021/09/29 06:43

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,7 +12,7 @@
-ナビのstyleがあたらなくなった。
+ナビのstyleがあたらなくなった。（リンクボタンが反応しない、プルダウンナビが表示されない）
 左側の画像からはみ出ている文字のレイアウトが崩れている。

コードを見やすくしました。

2021/09/29 06:43

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -26,7 +26,7 @@
 <!doctype html>
-**<html>**
+<html>
 <head>
@@ -38,13 +38,9 @@
-### ナビゲーション　css
 <style>
-  **.menu li** {
+  .menu li {
    position: relative;
@@ -52,7 +48,7 @@
 }
-**.menu li a** {
+.menu li a {
    display: block;
@@ -66,7 +62,7 @@
 }
-**.menu li a:hover** {
+.menu li a:hover {
    color: #fff;
@@ -74,13 +70,13 @@
 }
-**.menu li:hover > ul** {
+.menu li:hover > ul {
    display: block;
 }
-**.menu ul** {
+.menu ul {
    display: none;
@@ -92,9 +88,9 @@
 }
-### メインビジュアル　css
-**.kv** {
+.kv {
   height: 100vh;
@@ -102,7 +98,7 @@
 }
-**.bg** {
+.bg {
   height: 100%;
@@ -110,7 +106,7 @@
 }
-**.text-block** {
+.text-block {
   width: 100%;
@@ -124,13 +120,13 @@
 }
-**.text-black** {
+.text-black {
   display: none;
 }
-**.text** {
+.text {
   font-size: 4.0rem;
@@ -142,29 +138,29 @@
 }
-**.text-white .text** {
+.text-white .text {
   color: #fff;
 }
-**.text-black .text** {
+.text-black .text {
   color: #000;
 }
-### メインビジュアル　レスポンス　css
 @media screen and (min-width: 560px) {
-**.text-black** {
+.text-black {
   display: block;
 }
-**.text-inner** {
+.text-inner {
   width: 50%;
@@ -172,13 +168,13 @@
 }
-**.text** {
+.text {
   font-size: 40px;
 }
-**.text-black .text** {
+.text-black .text {
   width: 200%;
@@ -190,7 +186,7 @@
 @media screen and (min-width: 960px) {
-**.bg **{
+.bg {
   width: 80%;
@@ -206,13 +202,13 @@
 }
-**.text-block** {
+.text-block {
   transform: none;
 }
-**.text-white** {
+.text-white {
   bottom: 12.5%;
@@ -220,7 +216,7 @@
 }
-**.text-black** {
+.text-black {
   width: auto;
@@ -230,13 +226,13 @@
 }
-**.text-inner** {
+.text-inner {
   width: 100%;
 }
-**.text** {
+.text {
   font-size: 54px;
@@ -246,7 +242,7 @@
 }
-**.text-black .text** {
+.text-black .text {
   width: 100%;
@@ -256,7 +252,7 @@
 </style>
-### HTML
 <body>
@@ -264,11 +260,11 @@
   <nav>
-    **<ul class="menu">**
+   <ul class="menu">
-   <li><a href="">NAVI</a></li>
+    <li><a href="">NAVI</a></li>
-   <li><a href="">NAVI</a>
+    <li><a href="">NAVI</a>
       <ul>
@@ -278,19 +274,19 @@
          <li><a href="">NAVI2</a></li>
-        <li><a href="">NAVI2</a></li>
+         <li><a href="">NAVI2</a></li>
-        <li><a href="">NAVI2</a></li>
+         <li><a href="">NAVI2</a></li>
-        <li><a href="">NAVI2</a></li>
+         <li><a href="">NAVI2</a></li>
-     　　</ul>
+    　</ul>
    </li>
    <li><a href="index.html">NAVI</a></li>
-**</ul>**
+ </ul>
   </nav>

コードを見やすくしました。

2021/09/29 06:39

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,6 +20,8 @@
 ### 該当のソースコード
+```HTML
 <!doctype html>
@@ -262,7 +264,7 @@
   <nav>
-    <ul class="menu">
+    **<ul class="menu">**
    <li><a href="">NAVI</a></li>
@@ -282,13 +284,13 @@
         <li><a href="">NAVI2</a></li>
-      </ul>
+     　　</ul>
    </li>
    <li><a href="index.html">NAVI</a></li>
-</ul>
+**</ul>**
   </nav>
@@ -326,7 +328,7 @@
 </html>
+```

コードを見やすくしました。

2021/09/29 06:35

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -24,7 +24,7 @@
 <!doctype html>
-<html>
+**<html>**
 <head>
@@ -36,9 +36,13 @@
+### ナビゲーション　css
 <style>
-  .menu li {
+  **.menu li** {
    position: relative;
@@ -46,7 +50,7 @@
 }
-.menu li a {
+**.menu li a** {
    display: block;
@@ -60,7 +64,7 @@
 }
-.menu li a:hover {
+**.menu li a:hover** {
    color: #fff;
@@ -68,13 +72,13 @@
 }
-.menu li:hover > ul {
+**.menu li:hover > ul** {
    display: block;
 }
-.menu ul {
+**.menu ul** {
    display: none;
@@ -86,7 +90,9 @@
 }
+### メインビジュアル　css
-.kv {
+**.kv** {
   height: 100vh;
@@ -94,7 +100,7 @@
 }
-.bg {
+**.bg** {
   height: 100%;
@@ -102,7 +108,7 @@
 }
-.text-block {
+**.text-block** {
   width: 100%;
@@ -116,13 +122,13 @@
 }
-.text-black {
+**.text-black** {
   display: none;
 }
-.text {
+**.text** {
   font-size: 4.0rem;
@@ -134,29 +140,29 @@
 }
-.text-white .text {
+**.text-white .text** {
   color: #fff;
 }
-.text-black .text {
+**.text-black .text** {
   color: #000;
 }
+### メインビジュアル　レスポンス　css
 @media screen and (min-width: 560px) {
-.text-black {
+**.text-black** {
   display: block;
 }
-.text-inner {
+**.text-inner** {
   width: 50%;
@@ -164,13 +170,13 @@
 }
-.text {
+**.text** {
   font-size: 40px;
 }
-.text-black .text {
+**.text-black .text** {
   width: 200%;
@@ -182,7 +188,7 @@
 @media screen and (min-width: 960px) {
-.bg {
+**.bg **{
   width: 80%;
@@ -198,13 +204,13 @@
 }
-.text-block {
+**.text-block** {
   transform: none;
 }
-.text-white {
+**.text-white** {
   bottom: 12.5%;
@@ -212,7 +218,7 @@
 }
-.text-black {
+**.text-black** {
   width: auto;
@@ -222,13 +228,13 @@
 }
-.text-inner {
+**.text-inner** {
   width: 100%;
 }
-.text {
+**.text** {
   font-size: 54px;
@@ -238,7 +244,7 @@
 }
-.text-black .text {
+**.text-black .text** {
   width: 100%;
@@ -248,6 +254,8 @@
 </style>
+### HTML
 <body>
   <header class="header">

文字が多かったので少し削除しました。

2021/09/29 06:31

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,4 @@
-![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)### 前提・実現したいこと
+![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)
 HTML、CSSを勉強中です。

実際に私が確認したブラウザ画面はこちらです。

2021/09/29 05:48

投稿

jam27

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,4 @@
-### 前提・実現したいこと
+![イメージ説明](5b743af13d078c0bd6387719f719dabe.png)### 前提・実現したいこと
 HTML、CSSを勉強中です。