演習課題「固有名を指定してみよう」
現在、ブラウザには、ぱいじょ登場キャラクターの生徒と先生と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>