html 書いたことが反映できない

### ボタンに影をつけたい、書いたことが反映されない
プロゲートを一通り終わり１から模写コーディングしています。
そこで、
①メッセージラッパーの（さっそく開発する）というところに影をつけたいと思いやってみたのですが反映することができません
②hoverでボタンの色も変えようとしていますが変えることもできません

やってみたこと

プロゲートでもう一度見直した
htmlのclassが間違っていないか確認をした

よろしくお願いします
また、プロゲートを終えたら次に何をするべきか教えて欲しいです　やっぱり模写コーディングですか？？

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>progate</title>
    <link rel="stylesheet" href="progate-css.css">
    </head>

    <body>
        <header>

        </header>

        <div class="top-wrapper">
           <div class="container">
               <h1>LEARN TO CODE</h1>
               <h1>LEARN TO BE CREATIVE</h1>
               <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 
           </div>
           <a  href="#" class="btn sign-up">新規登録はこちら</a>
           <p>or</p>
           <a href="#" class="btn twitter">twitterでログイン</a>
           <a href="#" class="btn facebook">facebookでログイン</a>
        </div>

        <div class="lesson-wrapper">
            <div class="container">
             <div class="heading">
                 <h2>Learn Where to Get Started!</h2>
             </div>
             <div class="lessons">

                 <div class="lesson">
                     <div class="lesson-icon">
                         <img src="https://prog-8.com/images/html/advanced/html.png">
                         <p>HTML & CSS</p>
                     </div>
                     <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
                 </div>

                 <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
                        <p>jQuery/p>
                     </div>
                     <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
                </div>

                <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/ruby.png">
                        <p>Ruby</p>
                     </div>
                     <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
                </div>

                 <div class="lesson">  
                    <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/php.png">
                        <p>PHP</p>
                     </div>
                     <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
                </div>
                <div class="clear"></div>
             
            </div>
        </div>

        <div class="message-wrapper">
            <div class="container">
               <div class="heading">
                   <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
                   <h3>Let's learn to code, learn to be creative</h3>
               </div> 
               <a class="btn message" href="#">さっそく開発する</a>
            </div>
        </div>
        

        <footer>
        </footer>
    </body>
</html>

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;
}

.top-wrapper {
    background-image: url("https://prog-8.com/images/html/advanced/top.png");
    padding:180px 0px 100px;
    color:white;
    text-align: center;
    background-size:cover;
}

.container{
 width:1170px;
 margin:auto;
 padding-bottom:30px;
 font-size:30px;
 font-weight:bold;
 letter-spacing:5px;

}

.btn {
    display:inline-block;
    color:white;
    border-radius:20px;
    padding:8px 24px;
    
}

.twitter {
    background-color:#55acee;
    margin-left:10px;
}

.facebook{
    background-color:#3b5998;
}

.sign-up{
    background-color: #239b76;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.lesson {
  float:left;
  width:25%;
}

.lesson-icon {
  position: relative;
}

.lesson p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}
.txt-contents {
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}

.clear{
  clear:left;
}

.message-wrapper {
  background-color:rgba(255, 255, 255, 0.966);
  text-align:center;
  border-bottom:1px solid #eee;
  padding-bottom:150px;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
  font-size:20px;
}

.message {
  background-color: rgb(21, 110, 33);
  box-shadow: 1px solid #eee;
}

.container a :hover {
  background-color: cadetblue;
}

m.ts10806

2020/09/11 11:36

下記、明らかにおかしいですが（画面表示も）、そこは気にしなくて問題ないのでしょうか。 <p>jQuery/p>

退会済みユーザー

2020/09/11 11:39

とりあえずそこはどうでもいいです

退会済みユーザー

2020/09/11 11:40

そこを変えましたがやはり無理でした

m.ts10806

2020/09/11 11:41

「模写」としては大失敗です。というかプログラミングしていく上で、レイアウト上致命的なミスを「どうでもいい」というのは如何なもんでしょう。プロゲート一生卒業したくないならいいんですが・・・。ではでは。

m.ts10806

2020/09/11 11:42

そこが本件の問題だとは一言も書いていません。それに本件の問題ならこちらのコメント欄ではなく回答に書いています。

退会済みユーザー

2020/09/11 11:44 編集

ヲタクあるあるですねw

m.ts10806

2020/09/11 11:49

プログラミングするつもりないなら他所へどうぞ。一応、誹謗中傷とうけとったので通報しておきますね。

m.ts10806

2020/09/11 11:50

回答したけど不要だと思うので、削っときますね。

退会済みユーザー

2020/09/11 11:52

不要とは言ってませんが。。プログラミングに集中するのでこれ以上この会話の件について関わらないでくださいさようなら。

退会済みユーザー

2020/09/11 11:52

あ、あと解決法を述べてくださったので感謝はいたします

m.ts10806

2020/09/11 11:56

上辺だけの感謝が欲しい回答者っていないですし、プロゲート出身でまともにプログラミングできる人はteratailに来ませんのであしからず。少しやり取り見ただけで「あぁまた同じか」とガッカリしていたところです。プロゲートのカリキュラムが悪いのか、基本を飛ばす人が多いのか知らないですが。

行動規範の内容に同意します

回答3件

やっぱり模写コーディングですか？？

これだけは意味ないので辞めたほうがいいです。「表面上同じに見えるページ」をいくら作ってみたところで、スキルアップにはつながりません。タグの実践上の使い方等確認したいなら、その都度お手本サイトのソースコードをチェックしに行けばすむことです。

投稿2020/09/11 13:57

KojiDoi

総合スコア13671

スタイルが反映されない場合（同じCSS内の他の指定が効いている場合）、
文法を疑います。

文法チェックしてくれるエディタを使った方がいいですが、Web上にもあります。
あとは自分で探してください。

投稿2020/09/11 11:48

編集2020/09/11 11:50

m.ts10806

総合スコア80850

ベストアンサー

①
下記コードの box-shadow の使い方が間違っています。

CSS
1.message {
2  background-color: rgb(21, 110, 33);
3  box-shadow: 1px solid #eee;
4}

②
下記コードの :hover 疑似要素の指定方法が間違えています。

CSS
1.container a :hover {
2  background-color: cadetblue;
3}

引用テキストプロゲートを終えたら次に何をするべきか教えて欲しいです　やっぱり模写コーディングですか？？

模写コーディングでは正しいコーディングは身につかないでしょう。
最近のWEBサイトはWordPressで作られていたり、SPAだったりするので参考にならない可能性があるからです。
公式リファレンスで正しい記述方法を学んでみてください。

HTML、CSS、Javascriptのテクニックを紹介しているサイトのうち8割ぐらいは古いやり方だったり、記述が正しくなかったりします。
まずは公式リファレンスを読んで正しい記述方法を身に着けてください。

そのあとはWEBデザインを学ぶのもいいでしょう。
Bootstrapは有名なデザイン用のライブラリです。

SVGやWebGLを学べばゲームなども作れるようになります。
効率の良い開発がしたければ、Sass/SCSSとPugは丁度良いと思います。
もっと上のレベルを目指す場合は、Vue、React、AngularといったJSフレームワークを学ぶといいでしょう。

投稿2020/09/11 12:49

ELBE

総合スコア305

m.ts10806

2020/09/11 22:29 編集

「公式リファレンス」でしたらW3C本舗にしないと意味がないのでは？ https://www.w3.org/ W3Schools はリファレンスと言うよりチュートリアルです。まだMDNのほうがリファレンスの意味を持っています。 https://developer.mozilla.org/ja/docs/Web >Bootstrapは有名なデザイン用のライブラリです。正確には「CSSフレームワーク」かと思います。

行動規範の内容に同意します

あなたの回答