Visual Studio Code　「expected」のエラーの解決方法

``<!DOCTYPE>

<html lang="ja"> <head> <meta charset="UTF-8"> <title>EXAMPLE</title> <style> body{font-family: "Century Gothic", 'Lato', sans-serif;} a {text-decoration: none;} .et-hero-tabs, .et-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; position: relative; background: #eee; text-align: center; padding: 0 2em;

h1{font-size: 2rem;
    margin: 0;
    letter-spacing: 1rem;}

h3 {font-size: 1rem;
    letter-spacing: 0.3rem;
    opacity: 0.6;}

}

.et-hero-tabs-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background: #fff;
z-index: 10;

&--top {
    position: fixed;
    top:0;
}}

.et-hero-tab {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
color: #000;
letter-spacing: 0.1rem;
transition: all 0.5s ease;
font-size: 0.8rem;

&:hover {
  color:white;
  background: rgba(102,177,241,0.8);
  transition: all 0.5s ease;
}}

.et-hero-tab-slider {
position: absolute;
bottom: 0;
width: 0;
height: 6px;
background: #66B1F1;
transition: left 0.3s ease;}
@media (min-width: 800px) {
.et-hero-tabs,
.et-slide {

h1 {
    font-size: 3rem;}
h3 {font-size: 1rem;}

}
.et-hero-tab {font-size: 1rem;}
}

</style> </head> <body> <div class="cont"> <div class="slider"></div> <ul class="nav"></div> <div data-target='right' class="side-nav side-nav--right"></div> <div data-target='left' class="side-nav side-nav--left"></div> </div>  <section class="et-hero-tabs"> <h1>高校</h1> <h3>みんなのページ</h3> <div class="et-hero-tabs-container"> <a class="et-hero-tab" href="#tab-es6">１</a> <a class="et-hero-tab" href="#tab-flexbox">２</a> <a class="et-hero-tab" href="#tab-react">３</a> <a class="et-hero-tab" href="#tab-angular">４</a> <a class="et-hero-tab" href="#tab-other">５</a> <span class="et-hero-tab-slider"></span> </div> </section>  <main class="et-main"> <section class="et-slide" id="tab-es6"> <h1>１</h1> <h3>something about es6</h3> </section> <section class="et-slide" id="tab-flexbox"> <h1>２</h1> <h3>something about flexbox</h3> </section> <section class="et-slide" id="tab-react"> <h1>３</h1> <h3>something about react</h3> </section> <section class="et-slide" id="tab-angular"> <h1>４</h1> <h3>something about angular</h3> </section> <section class="et-slide" id="tab-other"> <h1>５</h1> <h3>something about other</h3> </section> </main> </body> </html>` コード ```ホームページ作成時に下記のhtmlを書いたところ、「colon expected」や「｛　expected」というエラーが出ました。このエラーは「●●を要求します」という意味だと思い、｛やコロンをつけてみましたが、解決しません。全角スペースを探すと良いと調べたら出てきましたのでやってみましたが、わかりませんでした。

尚、<style>の中身はhttps://lab.sonicmoov.com/markup/css/image-slider/のスライド型ナビゲーション Sticky Slider Navigation (Responsive)をコピーし使わせて頂いています。

使用：Visual　Studio　Code

〚エラー箇所〛
（ｈｔｍｌには左に????をつけています)
――――――――――――――――――――――――――

<!DOCTYPE> <html lang="ja"> <head> <meta charset="UTF-8"> <title>EXAMPLE</title> <style> body{font-family: "Century Gothic", 'Lato', sans-serif;} a {text-decoration: none;} .et-hero-tabs, .et-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; position: relative; background: #eee; text-align: center; padding: 0 2em;

h1{font-size: 2rem;　????（ここの｛と2remにエラー「colon expected」）
    margin: 0;　????（ここの：にエラー「semi-colon expected」）
    letter-spacing: 1rem;}　????（ここの：と｝にエラー「{expected」）
h3 {font-size: 1rem;
    letter-spacing: 0.3rem;
    opacity: 0.6;}

}　????（ここの｝にエラー「{expected」）

.et-hero-tabs-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
background: #fff;
z-index: 10;

&--top {　????（ここの＆にエラー「at-rule or selector expected」）
    position: fixed;
    top:0;　????（ここの0にエラー「at-rule or selector expected」）
}}　????（ここの｝にエラー「}expected」）

.et-hero-tab {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
color: #000;
letter-spacing: 0.1rem;
transition: all 0.5s ease;
font-size: 0.8rem;

&:hover {　????（ここの＆にエラー「identifier expected」）
  color:white;
  background: rgba(102,177,241,0.8);　????（ここの：にエラー「at-rule or selector expected」）
  transition: all 0.5s ease;　????（ここの：にエラー「}expected」）
}}　????（ここの｝にエラー「｛expected」）

.et-hero-tab-slider {
position: absolute;
bottom: 0;
width: 0;
height: 6px;
background: #66B1F1;
transition: left 0.3s ease;}
@media (min-width: 800px) {
.et-hero-tabs,
.et-slide {

h1 {　????（ここの｛にエラー「」）
    font-size: 3rem;}　????（ここの3remにエラー「」）
h3 {font-size: 1rem;}

}　????（ここの｝にエラー「」）
.et-hero-tab {font-size: 1rem;}
}　????（ここの｝にエラー「」）

</style> </head>

y_waiwai

2021/02/28 14:39

このままではコードが読みづらいので、手を入れてないコードを、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中に貼り付けてください

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

回答1件

ベストアンサー

それはSCSSなので、コンパイルしましょう。
VS CodeでScssを書くための環境構築方法 | Web Design Trends

投稿2021/03/01 02:29

Lhankor_Mhy

総合スコア36946

hcj---611

2021/03/06 12:39

テラテイルにアクセスできず返答が遅くなりました。ありがとうございます。参考にさせて頂きます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

Visual Studio Code　「expected」のエラーの解決方法

関連した質問