前提・実現したいこと
中学生、初心者です。友達と行った地域活性化のプロジェクトをweb常にも記録していきたいと思い、Webサイトを制作しています。
htmlとCSSを使ってWebサイトを制作しています。
発生している問題・エラーメッセージ
この前、充電が少なく、充電器も近くになかったため、電源を落としていたのですが、再起動をすると、制作途中で表示されるChrome上のWebサイトがHTMLしか表示されなくなりました。
この場合はどうしたらいいのでしょうか
具体的な対策や、問題点を教えてくれるとありがたいです
エラーメッセージ
該当のソースコード
@charset "UTF-8"; /* すべての要素のmarginとpaddingを0に設定します */ * { margin: 0;/* 要素の外側の余白を0にする */ padding: 0;/* 要素の内側の余白を0にする */ } html, body { margin: 0; padding: 0; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;/* フォントを指定する */ } /* 全てのsection */ section { padding: 30px; min-width: 1050px;/* 幅の最小値を指定する */ } /* h2のclass title */ .title { font-size: 60px;/* フォントの大きさを指定する */ margin-bottom: 20px; font-family: 'Oswald', sans-serif; text-align: center;/* 文字・画像を中央にそろえる */ } /* headerはここ */ header { text-align: center; background-color: #991d1d; background-size: cover;/* 背景画像をボックスいっぱいに指定する */ padding: 60px; min-width: 920px; } header h2 { color: #000000;/* フォントの色を指定する */ } /* sectionのclass about */ .about { background-color: #991d1d;/* 背景色を指定する */ text-align: center; } .about h2 { color: #992626; height: 4000px; } .about p { font-size: 100px; margin-bottom: 0px; text-align: center; max-width: 700px;/* 幅の最大値を指定する */ margin: 60px auto; font-family: 'Revalia', cursive; } /* sectionのclass photo */ .photo { background-color: #00552e; color: #ffffff; text-align: center; height: 400px; } .photo h2 { color: #ffcc11; } .photo div { display: inline-block;/* 要素の表示形式を指定する */ margin: 5px; } /* sectionのclass information */ .information { background-color: #991d1d; background-size: cover; overflow: hidden; } .information h2 { color: #ffffff; } .information div { padding: 20px; max-width: 1000px; margin: 0 auto; } .information p{ text-align: left; margin: -225px 20px 450px 250px; font-size: 20px } .information h1{ font-size: 75px; text-align: left; } .information h3 { color: #ffcc11; font-size: 28px; text-align: center; } } .information img { /* float: left; 要素の回り込みを指定する */ margin-right: 20px; } /* footerはここ */ footer { text-align: center; color: #991d1d; background: #003377; padding: 10px 0; } `` <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Village Jamboree</title> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Revalia&display=swap" rel="stylesheet"> </head>
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Village Jamboree</title> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Revalia&display=swap" rel="stylesheet"> <body> <header> </header> <section class="about"> <p>Village Jamboree</p> </section> <section class="photo"> <h2 class="title">Instagram</h2> <div> <a href="https://www.instagram.com/p/Byw47LwDJjj/?utm_source=ig_embed&utm_campaign=loading" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="aa.png" alt="" width="162"></a> </div> <div><a href=https://www.instagram.com/p/B1QGPGfhSUK/?utm_source=ig_web_copy_link style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="aaa.png" alt=""width="130"></a> </div> <div> <a href="https://www.instagram.com/p/B1a_VnEhxTg/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="aaaa.png" alt=""width="162"></a> </div> <div> <a href="https://www.instagram.com/p/B2ZIAVtho9R/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="aaaaa.png" alt=""width="130"></a> </div> <div> <a href="https://www.instagram.com/p/B26gYX2hUuH/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="aaaaaa.png" alt=""width="130"></a> </div> <div> <a href="https://www.instagram.com/p/B3IwLjGBMHB/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="ab.png" alt=""width="145"></a> </div> <div> <a href="https://www.instagram.com/p/B3gnZKthVXO/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="abb.png" alt=""width="130"></a> </div> <div> <a href="https://www.instagram.com/p/B4xLKCjhDp3/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="abc.png" alt=""width="130"></a> </div> <div> <a href="https://www.instagram.com/p/B6QPwD3hUgL/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="abcc.png" alt=""width="130"></a> </div> </section> <section class="information"> <h2 class="title"></h2> <div> <h3>member</h3> <h1>MONA</h1> <a href="https://www.instagram.com/p/B3lSZtfB-90/?utm_source=ig_web_copy_link" style="line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><img src="mona-instagram.png" alt=""width="180"></a> <p>担当 主に全体構成、イラスト</p> <p></p> </div> <div> <h1>TANI</h1> <h1>AN</h1> <a href="https://www.instagram.com/p/B2kaJaiJVPW/?utm_source=ig_web_copy_link" target="_blank"><img src="an%20instagram.png" alt=""width="180"></a> <h1>KITTCAN</h1> <img src="kippe.png" alt=""width="180"> </div> </section> <footer>© 2019 Village Jamboree</footer> </body> </html> </head> ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。