div, class って何？
<div>タグは、「パーツのかたまり」を作りたい時によく使うタグです。
そして、class は div タグに名前をつけることができます。これによって、その「かたまり」に対してだけ css を書くことができます。
実験してみましょう！#
1. Glitch で新しいプロジェクトを開いてください。#
2. index.html を開きファイルに最初に書いてあるコードを全て消します。#
3. 以下のコードをコピーして、index.html に貼り付けてください。#
<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <link rel="stylesheet" href="style.css" /> </head>
<body> <h1>世界の女性リーダーたち</h1> <a href="https://www.forbes.com/sites/avivahwittenbergcox/2020/04/13/what-do-countries-with-the-best-coronavirus-reponses-have-in-common-women-leaders/?sh=3c1d6b2a3dec" ><p> source: What Do Countries With The Best Coronavirus Responses Have In Common? Women Leaders </p></a > <div class="marin"> <h2>フィンランドのマリン首相</h2> <p>2019年、34歳で当時世界で最年少の首相として就任した。</p> <p>フィンランドでは3人目の女性首相。</p> <p>閣僚のジェンダーバランスもよく、世界から注目されている。</p> <p> 参考：<a href="https://courrier.jp/news/archives/194898/" >「首相は34歳女性、閣僚の4人が35歳未満」のフィンランドから学べること</a > </p> </div> <img src="https://docs.waffle-waffle.org/img/logo.png" alt="waffle logo" border="0" /> </body></html>ここから、「マリン首相に関する文章は赤色の文字、アーダーン首相に関する文章は緑色の文字」に変更しましょう！！
どうすれば良いでしょうか...？
4. style.cssを全て消してしまいましょう！#
5. この状態だと、シンプルなウェブサイトが表示されるかと思います。#
6. では、div タグについて以下の CSS を追加するとどうなるでしょう？#
style.cssを開いて、以下の CSS をコピペしましょう！
div { color: red;}
このようになりましたか？
7. 首相ごとに色を変えるには？#
class 名を使うと別々の色で表示することができます！
class は、タグに好きな名前をつけることができるもののことです。
先ほどコピペしたindex.htmlを見てみると、マリン首相に関係する div タグには、class="marin"が、アーダーン首相には、class="ardern"が書いてあります。
これは、マリン首相の div タグには`marinという名前が、アーダーン首相には、ardernという名前がついているということです。
style.cssを開いて、以下の内容に変更しましょう！
.marin { color: red;}
.ardern { color: green;}CSS を書くとき、クラス名の先頭には .(ピリオド)をつけるので、忘れないようにしてください！
8. 別の色で表示されましたか？？#
