演習課題「スタイルを割り当てる」
右側の環境で、public_htmlディレクトリにindex.htmlを用意してあり「ぱいじょ！」の紹介文がHTMLで記述してあります。
「登場人物」と「バックナンバー」というテキストの要素に、class属性として「p-head」を指定してください。
採点して、すべてのジャッジに正解すれば演習課題クリアです！
＃04:class属性とid属性で要素を選択しよう
HTMLの要素をCSSやプログラムで選択する方法を学習します。Webページの一部にデザインを割り当てたり、内容を変化させるときには、その要素を選択する必要があります。ここで重要なのが、要素が持つclass属性とid属性です。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Welcome to paiza</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<h1>世界の皆さん、こんにちは</h1>
<p>ようこそ、<strong>paiza</strong>へ</p>
<h2>photo</h2>
<img src='neko.gif'>
<h2 class='resume' id='works'>works</h2>
<h2 class='resume' id='skills'>skills</h2>
</body>
</html>
- class属性：要素に役割や種類を記述する
- id属性：要素を特定するために記述する
CSSやJavaScriptは、このid属性やclass属性をhtmlタグと組み合わせて、要素を選択できます。
body {padding: 10px;}
h2 {border-bottom: 1px solid #aaa;}
body {padding: 10px;}
h2.resume {border-bottom: 1px solid #aaa;}
body {padding: 10px;}
h2.resume {border-bottom: 1px solid #aaa;}
#works {background: lightgray;}
【HTML】
- HTMLを始めよう - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started
- HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML
- HTML5日本語訳
https://momdo.github.io/html5/Overview.html
- HTML5 - Wikipedia
https://ja.wikipedia.org/wiki/HTML5
- HTMLタグリファレンス（ABC順）
http://www.htmq.com/html/
- HTML Standard 日本語訳
https://momdo.github.io/html/
- ごく簡単なHTMLの説明
https://www.kanzaki.com/docs/htminfo.html
【CSS】
- Cascading Style Sheets - Wikipedia
https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
- CSSの基本－HTMLクイックリファレンス
http://www.htmq.com/csskihon/
- CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS
- CSSのセレクタとは？覚えておきたい25種類と書き方
https://saruwakakun.com/html-css/reference/selector
- CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
https://saruwakakun.com/html-css/reference/h-design