質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

618閲覧

CSSが急に適用されなくなってしまいました。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/29 06:07

前提・実現したいこと

HTML、CSSを始めたばかりの者です。

現在、ISARAのHPにてサイト模写を初めて取り組んでいます。昨日まででヘッダー → キービジュアル までは大体似たようなイメージで再現できかけていたのですが、本日朝PCを再起動して確認するとCSSが一切効いていない状態になっていました。

これまでの作成時の手順として、HTMLファイルを一通り作成し終えた後、CSSの作成に取りかかっていましたが、
現状エラーにより、以下のとおりです。CSS適用前のHTMLのみ適用された体裁に戻ってしまっています。
↓↓

イメージ説明
検証サイトで確認すると、CSSで作成したセレクタ、プロパティが一切表示されていません。
element.style {
}に記述した内容は反映されたので、CSSの読み込み自体は正常作動しているということになるのでしょうか?

やはりCSSの内容のどこかにエラーがあるのでしょうか?
宜しければ、どなたかご教授頂ければ幸いです。勉強不足でうまく説明できなくて申し訳ありません。

該当のソースコード

```ここに言語名を入力``````````````````
HTML 全文

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>iSara[イサラ]|バンコクのノマドエンジニア育成講座</title> <link rel="icon" href="img/favicon.ico"> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ヘッダー --> <header class="header"> <div class="inner"> <h1 class="logo"> <img src="img/isaralogo.png" alt="iSara"> <span> バンコクのノマドエンジニア育成講座 </span> </h1> <p class="btn"> <a href="#">お問い合わせ / 資料請求はこちら</a> </p> <div class="btn_sm"> <p> <img src="img/form.png" alt="お問い合わせ"> 資料請求 </p> </div> </div> </header> <!-- キービジュアル --> <div class="key-visual"> <div class="key-visual_ttl"> <div class="key-explanation"> <!-- ① --> <h2>プログラミングで<br> 人生の安定を手にいれよう</h2> <!-- ② --> <p class="key-img"><img src="img/isaralogolarge.png" alt="iSara_large"></p> <!-- ③ --> <p class="key-sub">バンコクのノマドエンジニア育成講座<br> <span>iSara[イサラ]</span></p> </div> </div> </div> <main class="main"> <section class="sec01"> <h3 class="sec01_h">まずは20日間で、<br> 月10万円稼げるスキルを手にいれよう。</h3> <p class="price0">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p><br> <p class="btn"><a href="#">お問い合わせ / 資料請求はこちら</a> </p> <ul> <li>第6期生:2019年11月25日 ~ 2019年12月14日*締め切りました</li> <li>第7期生:2020年2月17日 ~ 2020年3月7日*締め切りました</li> <li>第8期生:2021年の2月 ~ 3月ごろを予定*資料請求受付中です</li> </ul> </section> <section class="sec02"> </section> </main> <!-- フッター --> <footer class="footer"> <p><small> バンコクのノマドエンジニア育成講座、iSara[イサラ] <br> Copyright ©︎ iSara All Rights Reserved.</small></p> <p>Designed by Maya Ogi / Developed by Kentaro Koga</p> </footer> </body> </html> ```ここに言語名を入力``````````````````````````` CSS 全文

@charset "utf-8";

/* ------------------リセットCSS------------------ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;

/* ------------------ここまでリセットCSS------------------ */

/* ------------------ここからCSS記述------------------ */
body{
color: #333333;
font-size: 14px;
line-height: 1.6;
font-family: "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "���C���I", Meiryo, Osaka, "�l�r �o�S�V�b�N", "MS PGothic", sans-serif;
}

.main{
background-color: gray;
}
.sec01{
background-color:#EBB94D;
}
.header{
position:fixed;
z-index: 10;
width: 100%;
height:75px;
background-color:#fff;
text-align: right;
margin:0 auto;
}

.header .inner{
/* 起点をdiv innerに指定する /
max-width: calc(100% - 20px);
position:relative;
width:1170px;
margin:0 auto;
padding: 20px 0;
height:35px;
/
background-color: #ddd; */
}

.header .logo{
/* 起点から以下のPX動かす */
position:absolute;
top:8px;
left:0;
}

.header .logo img{
position:relative;
top:7px;
width:127px;
}

.header .logo span{
position:relative;
bottom:2px;
margin-left:3px;
letter-spacing: 1.3px;
}

.btn{
display:inline-block;
}

.btn a{
display:block;
height:45px;
line-height: 45px;
padding:0 40px;
color:white;
background-color: #DA6B64;
border-radius: 23px;
text-decoration: none;
letter-spacing: 1.5px;
}

.btn a:hover{
background-color: #D94940;
}

.btn_sm{
font-size:20px;
display:none;
}

.key-visual{
text-align: center;
height:500px;
display:flex;
justify-content: center;
align-items: center;
padding-top:75px;
}

.key-visual_ttl{
background-image: url("../img/main.jpg");
background-position: center;
background-size: cover;
height:500px;
width:100%;
margin:0 auto;
}

.key-visual_ttl h2{
position: relative;
top: -2px;
font-size: 28px;
font-weight: bold;
line-height: 55px;
letter-spacing: 1.5px;
}

.key-explanation{
position: relative;
top: 89px;
}

.key-img img{
position: relative;
width: 317px;
height: 110px;
top: 3px;
}

.key-visual .key-sub{
position: relative;
top: 35px;
font-size: 20.5px;
font-weight: bold;
letter-spacing: 1px;
line-height: 22px;
}

.key-sub span{
letter-spacing:1.2px;
}

.main{
text-align: center;
background-color:#EBB94D;
}
.sec01_h{
color: #fff;
padding: 30px 0 15px 0;
font-size: 20px;
letter-spacing: 1.5px;
}

.sec01 .price0{
display: inline-block;
font-size: 1.3vw;
color: #e7455a;
background-color: #fcfcfe;
line-height: 23px;
font-weight: bold;
padding: 0;
margin:0 auto 50px auto;
border-radius: 6px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
/* display: inline-block; */
}

.sec01 .btn{
height:100px;
line-height:100px;;
}

.sec01 a{
height:50px;
line-height: 80px;
}

.sec02{
height:500px;
}

/* --------------メディアクエリによるレスポンシブ化--------------- */
@media screen and (max-width: 768px){
.header{
height:62px;
}
.header .inner{
height: 62px;
margin:0;
padding:0;
max-width: 100%;
}
.header .logo{
text-align:left;
height:63px;
width: 190px;
}
.header .logo img{
top:17px;
left:10px;
width:90px;
height:30px;
}

.inner .logo span{ position: absolute; display:block; top: 0px; left: 7px; font-size: 10px; font-weight: 600; letter-spacing: 0px; } .btn{ display: none; } .btn_sm{ display:block; position:absolute; font-size: 13px; text-align:center; letter-spacing:1px; color:#fff; right:0; background-color:#DA6B64; width:76px; height:62px; padding: 0; } .btn_sm img{ display:block; width:20px; margin:9px auto 0 auto; } /* キーヴィジュアル */ .key-visual{ /* background-color:lightblue; */ /* ../は上のふぉるだ階層の意 */ text-align: center; height:310px; display:flex; justify-content: center; align-items: center; padding-top:62px; } .key-visual_ttl{ background-image: url("../img/mainsp.jpg"); /* background-position: center; */ /* background-size: cover; */ height:310px; /* width:100%; */ margin:0 auto; } .key-explanation { top:15px; } .key-explanation h2{ font-size:18px; line-height:29px; }

}

試したこと

ここに問題に対して試したことを記載してください。
イメージ説明

↓ cssの読み込み文に誤字が紛れ込んだかと思い確認しましたが、リンクは
間違っていないのかなと思いました。
<link rel="stylesheet" href="css/style.css">

ネットの調べるとブラウザに残ったキャッシュ残存が原因で似たエラーが起こることがあると記述があり、google chromeのキャッシュを削除し、再度読み込みを試しましたが変化はありませんでした。

補足情報(FW/ツールのバージョンなど)

ブラウザー:Google Chrome
テキストエディタ:VSCODE
駄文ですみません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

今まで適用されてて、途中でされなくなったんですよね?

であれば、CSSの何処かに}が2重になっているとか}が無いとかだと思いますよ

ブラウザを別のヤツで見てみるのも不具合解決の手段です
ブラウザに起因するものなのか?そうでないのか?の切り分けが出来ます

CSSが原因だと仮定して
とりあえず、現在のCSSをバックアップしてから
ファイルの中を全部消して

単純なCSSコードだけを書き込んで適用されるか?
(背景が真っ黒になるとか真っ白になるとか)

適応されなければ、CSSのファイルパスが怪しくなります

適応されたら元のCSSを1/5くらい書き込んで不具合が出るか?確かめる

これを5/5まで繰り返せば、どのあたりにバグがあるか?解ると思いますよ

投稿2020/12/29 06:29

AMK

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/12/29 07:05

おっしゃっている通り、リセットCSSをごっそり取り除いたら、9割方元の状態に復旧できました。 どうやらリセットCSSの記述部に誤字があったみたいです。 エラーが起こった時に余計にエラー解決に時間がかかってしまうので、今度からは多少手間だとしても、CSS、HTML更新時には小まめなバックアップを心がけようと思います。 大変参考になり、勉強になりました、回答いただきどうもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問