演習課題「汎用的な行内コンテナを設定してみよう」
現在、ブラウザではぱいじょ登場キャラクターの説明を表示しています。
そこで、生徒は生徒、先生は先生、PCはPCと区別できるようにしたいです。
まず、「霧島京子、猫先生、マーガレットという名前」と「生徒、先生、PC」をそれぞれspanタグで囲んで下さい。
その後、class属性として生徒にはstudent、先生にはteacher、PCにはpcを指定して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃05:ひとつの範囲として定義する(span)
このチャプターでは、汎用的な行内コンテナを示すspan要素について学習します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.fruit{
background: #f2a922;
}
.vegetable{
background: #ded799;
}
</style>
</head>
<body>
<p><span>りんご</span>は果物です。</p>
<p><span>スイカ</span>は野菜です。</p>
<p><span>みかん</span>は果物です。</p>
<p><span>いちご</span>は野菜です。</p>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>りんごは英語で<span>apple</span>です。</p>
<p>みかんは英語で<span>orange</span>です。</p>
<p>いちごは英語で<span>strawberry</span>です。</p>
</body>
</html>
span要素は記述コンテンツの汎用的な行内コンテナであり、特別何かを表すことはありません。これは適当なタグがない場合に使う要素です。
主にタグの内容について、一部分の外観を変更したい場合や、要素をグループ化する場合に使います。
div要素と似ていますが、div要素は新しい行から始めるのに対し、span要素は行内のどこからでも始めることができるという点で異なっています。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/span
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.fruit{
background: #f2a922;
}
.vegetable{
background: #ded799;
}
.translated{
font-weight: bold;
}
</style>
</head>
<body>
<p><span class="fruit">りんご</span>は英語で<span class="fruit translated">apple</span>です</p>
<p><span class="vegetable">スイカ</span>は英語で<span class="vegetable translated">watermelon</span>です</p>
<p><span class="fruit">みかん</span>は英語で<span class="fruit translated">orange</span>です</p>
<p><span class="vegetable">いちご</span>は英語で<span class="vegetable translated">strawberry</span>です</p>
</body>
</html>