質問編集履歴

一部変更

2020/12/15 13:03

投稿

mitrasi

スコア49

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -55,7 +55,8 @@
 </body>
 </html>
 ```
-```css
+```CSS
 /* CSSのリセット（消さないでください） */
 html, body,
 ul, ol, li,
@@ -84,8 +85,7 @@
   color:white;
   text-align:center;
   padding: 180px 0 100px 0;
 }
 .container {
@@ -160,10 +160,10 @@
   transition:all 0.5s;
 }
-.header-left {
+.header--left {
-float:left;
+  float:left;
 }
 .header-right:hover{
   background-color:rgba(225,225,225,0.5);
 }
@@ -177,189 +177,11 @@
 ### 試したこと
 一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
-だから、基本的には現在解答に限りなく近いと思いますが、
+だから、基本的には現在解答に限りなく近いと思いますが、どこか間違えているのか把握できていない現状です。
-### 補足情報（FW/ツールのバージョンなど）
+##参考写真（上部が私の作成、下部が見本です）
-Windows
+![イメージ説明](0c97b4fd152524170236eba29fe7d50a.png)
-一応、念のためリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べるという意味でもあえてこの段階で質問として投稿させて頂きます。
-### 前提・実現したいこと
-ここに質問の内容を詳しく書いてください。
-Progate:中級：道場より。
-### 発生している問題・エラーメッセージ
-```
-赤く囲まれた部分を見直してみよう
-```
-### 該当のソースコード
-```HTML
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Progate</title>
-  <link rel="stylesheet" href="stylesheet.css">
-  <!-- ここでFont Awesomeを読み込んでください -->
-  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
-</head>
-<body>
-  <!-- ここにコードを書いていきましょう -->
-  <!--ここからtop-->
-   <!--ここからheader-->
-  <header>
-    <div class="container">
-      <div class="header-left">
-    <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
-    </div>
-    <div class="header-right">
- <a href="#" class="login">ログイン</a>
- </div></div>
-  </header>
-  <!--ここまでheader-->
-  <div class="top-wrapper">
-    <div class="container">
-      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
-      <p>Progateはオンラインプログラミング学習サービスです。<br>
-初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
-      <a href="#" class="btn signup">新規登録はこちら</a>
-      <p>or</p>
-      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
-      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
-    </div>
-  </div>
-  <!--ここまでtop-->
-</body>
-</html>
-```
-```css
-/* CSSのリセット（消さないでください） */
-html, body,
-ul, ol, li,
-h1, h2, h3, h4, h5, h6, p, div {
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
-}
-li {
-  list-style: none;
-}
-a {
-  text-decoration: none;
-}
-/* ここからCSSを書いていきましょう */
-/*ここからtop-wrapper*/
-.top-wrapper {
-  background-image:url(https://prog-8.com/images/html/advanced/top.png);
-  background-size:cover;
-  color:white;
-  text-align:center;
-  padding: 180px 0 100px 0;
-}
-.container {
-  width:1170px;
- margin: 0 auto;
-}
-.top-wrapper h1 {
-  font-size:45px;
-  letter-spacing:5px;
-  opacity:0.7;
-}
-.top-wrapper p {
-  opacity:0.7;
-  margin-bottom: 15px;
-}
-.btn {
-  color:white;
-  opacity:0.8;
-  padding:8px 24px;
-  display:inline-block;
-  opacity:0.8;
-  border-radius: 4px;
-}
-.signup {
-  background-color: #239b76;
-  margin:15px 0 15px 0;
-}
-.facebook {
-  background-color:#3b5998;
-  margin-right:10px;
-}
-.twitter {
-  background-color: #55acee;
-}
-.btn:hover {
-  opacity:1;
-}
-.fa {
-  margin-right: 5px;
-}
-/*ここからheader*/
-header {
-  height:65px;
-  background-color:rgba(34,49,52,0.9);
-  width:100%;
-  position:fixed;
-  top: 0;
-  z-index: 10;
-}
-.logo {
-  width:124px;
-  margin-top:20px;
-}
-.header-right {
-  float:right;
-  background-color:rgba(225,225,225,0.3);
-  padding:25px;
-  transition:all 5s;
-}
-.header-right:hover{
-  background-color:rgba(225,225,225,0.5);
-}
-.header-right a {
-  color:white;
-  line-height:65px;
-  padding: 0 25px;
-  display:block;
-}
-```
-### 試したこと
-一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
-ですから、基本的には現在解答に限りなく近いと思いますがなぜか上手くいきません????
 ### 補足情報（FW/ツールのバージョンなど）
 Windows

コード　CSS 　一部訂正

2020/12/15 13:03

投稿

mitrasi

スコア49

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -157,9 +157,13 @@
   float:right;
   background-color:rgba(225,225,225,0.3);
   padding:25px;
-  transition:all 5s;
+  transition:all 0.5s;
 }
+.header-left {
+float:left;
+}
 .header-right:hover{
   background-color:rgba(225,225,225,0.5);
 }