演習課題「固有名を指定してみよう」
現在、ブラウザには、ぱいじょ登場キャラクターの生徒と先生とPC、それぞれの一覧が表示されるサイトが表示されています。idとして、生徒一覧にはstudentを、先生一覧にはteacherを、PCにはpcを指定し、ブラウザに表示されているPCの場所まで飛ぶにPCがリンク先として設定されるようコードを修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#05:識別子(id)
このチャプターでは、識別子を表すid属性について学習します。
id属性は要素に固有の名前を指定するグローバル属性で、ページ内リンクやスタイルシートの適用に利用されます。
id属性は固有のものとなるため、同じidの属性値を異なる場所で用いることはできません。また、一つのid属性に対して、複数の属性値を記述することもできません。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <style>
        #apple{
            background-color: #D92B2B;
        }
        #orange{
            background-color: #D98E04;
        }
    </style>
</head>
<body>
    <p><a href="#fruits">果物の場所まで飛ぶ</a></p>
    
    <h2 id="vehicles">乗り物一覧</h2>
    <p id="car">自動車</p>
    <p id="train">電車</p>
    <p id="airplane">飛行機</p>
    <p id="ship">船</p>
    <p id="bus">バス</p>
    <p id="bicycle">自転車</p>
    <p id="motorcycle">バイク</p>
    <p id="helicopter">ヘリコプター</p>
    <p id="shinkansen">新幹線</p>
    <p id="rocket">ロケット</p>
    <h2 id="stationery">文房具一覧</h2>
    <p id="pencil">鉛筆</p>
    <p id="ballpen">ボールペン</p>
    <p id="eraser">消しゴム</p>
    <p id="notebook">ノート</p>
    <p id="ruler">定規</p>
    <p id="scissors">はさみ</p>
    <p id="glue">のり</p>
    <p id="calculator">電卓</p>
    <p id="sticky_note">付箋</p>
    <p id="clip">クリップ</p>
    <h2 id="fruits">果物一覧</h2>
    <p id="apple">りんご</p>
    <p id="orange">みかん</p>
</body>
</html>