【ローカルでは正しく表示されますが、サーバーでcssが更新されません】 ＃前提 ＷＥＢデザインを勉強中の初心者です。 独学で学んでいるため、質問をできる方が周りにおりません。
【ローカルでは正しく表示されますが、サーバーでcssが更新されません】 ＃前提 ＷＥＢデザインを勉強中の初心者です。 独学で学んでいるため、質問をできる方が周りにおりません。 基本的な部分の質問となるかと思いますが、アドバイス、ご指摘いただけたら嬉しいです。 また、質問に失礼な部分があれば教えてください。 宜しくお願い致します。 ＃質問内容 WEBサイト制作中なのですが、cssを更新し、サーバーにアップロードしようとしたところ、うまく反映されませんでした。 ローカルでは表示されています。 このような場合、どのような原因が考えられるでしょうか？ 念のため、ローカルとサーバーにアップ後のスクショと、html・cssを添付します。 宜しくお願い致します！ 【html】 <div class="section-inner"> <div class="target1"> <h2 class="large">探究学習＆プログラミング</h2> <h1 class="large">夏の無料体験会<br class="br-sp"> 予約受付中！ </h1> <p><h2 class="wakudoki"><span class="marker-animation">この夏<br class="br-sp">わくわくドキドキな体験を<br class="br-sp">してみませんか？</span></h2></p> </div> </div> <div class="section-inner3"> <div class="col-2"> <div class="item"> <a href="https://~~~~(省略しました)" class="button-large2">コース・日時を見る</a> </div> <div class="item"> <a href="https://~~~~(省略しました)" class="button-large3">申し込みはコチラ</a> </p> </div> </div> </div> 【css】 .button-large2{ display: block; width: 270px; height: 60px; background-color: #353232; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 0.06em; border-radius: 30px; text-decoration: none; text-align: center; line-height: 60px; margin-left: 30px; margin-top: 40px; } .button-large3{ display: block; width: 270px; height: 60px; background-color: #ffff00; color: #333; font-size: 18px; font-weight: bold; letter-spacing: 0.06em; border-radius: 30px; text-decoration: none; text-align: center; line-height: 60px; margin-left: 30px; margin-top: 40px; } #news h2.large{ text-align: center; color:red; } #news h1.large{ text-align: center; color:red; line-height:1.5; } #news h2.wakudoki{ text-align:center; margin-top:30px; line-height:1.5; }
ベストアンサー
CSS がローカルでは反映されて、サーバーにアップロードすると反映されないのは、 ・CSS ファイルをアップロードし忘れた、或いはアップロードするフォルダを間違えた。 ・HTML に記述した CSS ファイル名の大文字小文字が実際と食い違いがある（サーバーではきちんと区別されるが、Windowsでは同一視される）。 ・CSS のファイル名に漢字など全角文字が含まれる（どうしても全角文字を使いたい時は URL Encode をする方法があるが、CSS ファイルに URL Encode するほどの価値はない）。 が考えられます。 どれが実際の原因かは、情報が提供されてないのでわかりません。HTML ファイルのヘッダ・セクションに <link rel="stylesheet" href="style.css"> のような CSS 呼び込みのための link 要素があるはずなので、そこを点検しましょう。 それにしても、 ・セレクタに数回「#news」が使われているが、HTML のどこに id="news" があるか不明。 ・p 要素に絡んだ入れ子関係が滅茶苦茶。 ・h1、h2 要素が文字を大きくする要素だと思っている。 ・CSS の記述が非効率（長々と記述した「.button-large2」と「.button-large3」の違いは文字色と背景色しかない）。 ・div 要素が濫用されている。 ですね。 質問相手が周囲にいないとのことですが、少なくとも W3C の Validation Service は利用しましょう。文法的なミスは指摘してもらえます。 ・HTML の検証：https://validator.w3.org/ ・CSS の検証：https://jigsaw.w3.org/css-validator/
質問者からのお礼コメント
たくさんのご回答ありがとうございました。 まだまだ至らぬところばかりで、 ご指摘いただきありがとうございます。 具体的にたくさんの可能性をご提示いただきましたので、ベストアンサーとさせていただきます。 いくつかご指摘いただいた点を試したところ、 修正することができました。 今後、上記の点を踏まえ、鍛錬していきたいと思います。 皆様、ありがとうございました。
お礼日時：7/4 11:03
