ここではclassの使い方を学んで行きます。
classとは
個人的なイメージとしてクラスはCSSのためにつけているのかな。と解釈しています。
というのも、h1タグでHTMLがマークアップしても、CSSで装飾しようとしたときに全部装飾されてしまうんですね。
こんな感じになってしまうんですよ🥲
ではclassを付けていきましょう！！
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/style.css"><title>プロフィール</title></head><body><h1class="title">あいうえお</h1><h1>かきくけこ</h1></body></html>.title{font-size:45px;background-color:aqua;}以下のようになりましたね！！
↓
ちなみにですが、class付けに決まりがあるのかな。と気になったので調べてみました！
結論的に特に決まりはありませんでした😊
ただ自分だけではなく、誰が見てもわかるように命名するのが原則みたいです👍
"なんのためなのか""それによって"何を表現するのか"を軸に考えて付けるのが基本のようです！
親要素と子要素
HTMLには親要素と子要素があります！
言葉で並べてもわかりにくいと思うので、実践形式でやっていきましょう😊
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/style.css"><title>プロフィール</title></head><body><divclass="container"><h1class="title">自己紹介</h1><ulclass="pro"><li>名前:</li><li>趣味:</li></ul></div></body></html>HTMLから説明していきますね。
不要な人は飛ばしてください。
divってなんやねんって思った方。
この子は何でも屋さんです！便利屋！難しく言うと汎用性ですかね(^_^;)ブロックレベル要素です👍(https://qiita.com/akari_0618/items/f3b6892932cb6080c905)
そしてdivさんの隣りにいる先程説明した"class"！！ 今回は"container"（コンテナ）と命名しました。ブロック要素で表示エリアを表します。
これが"親要素"です。
そしてその下がh1タグの隣にまたクラス付けがされていますね。今回はこの表示エリアのタイトルに相当するので"タイトル"と名付けました。（まんまやんw）
この子が"子要素"です！
そんでもって、またはじめましてのタグがありますね！
"ul"と"li"タグ！！
"ul"は順序なしlist要素と言います！(リストのブロックだよ〜でも特に順番はないよ〜)
"li"はリストの項目と言います！（いやいや、順番あるから。）
って感じですかね😂
そして、忘れてはいけないのは、閉じタグですね。
これはちゃんと付けてくださいね👍
ブラウザ表示するとこうなる予定です！
