ここではclassの使い方を学んで行きます。
#classとは
個人的なイメージとしてクラスはCSSのためにつけているのかな。と解釈しています。
というのも、h1タグでHTMLがマークアップしても、CSSで装飾しようとしたときに全部装飾されてしまうんですね。
こんな感じになってしまうんですよ🥲
ではclassを付けていきましょう！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>プロフィール</title>
</head>
<body>
<h1 class="title">あいうえお</h1>
<h1>かきくけこ</h1>
</body>
</html>
.title {
font-size: 45px;
background-color: aqua;
}
以下のようになりましたね！！
↓
ちなみにですが、class付けに決まりがあるのかな。と気になったので調べてみました！
結論的に特に決まりはありませんでした😊
ただ自分だけではなく、誰が見てもわかるように命名するのが原則みたいです👍
"なんのためなのか""それによって"何を表現するのか"を軸に考えて付けるのが基本のようです！
#id属性
要素に固有の名前を付ける場合に使用します！
id属性に指定できる値は先頭がアルファベットで始まり、2文字目以降にはアルファベット、数字、ハイフン(-)、アンダースコア(_)、ピリオン(.)、コロン(:)が使用可能です。大文字と小文字は区別されます。
HTML内で重複して要素に記述することはできません！
#for属性
for属性は、ラベルをコントロールと明示的に関連付けるための属性です。
属性値にコントロールのid属性の値を指定することで、そのコントロールに対してラベルを明示的に関連付けます！
for属性を用いて関連付けを行なうと、ラベルをクリックした際にもラベルに対応するコントロールにフォーカスが移動します。
#親要素と子要素
HTMLには親要素と子要素があります！
言葉で並べてもわかりにくいと思うので、実践形式でやっていきましょう😊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>プロフィール</title>
</head>
<body>
<div class="container">
<h1 class="title">自己紹介</h1>
<ul class="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"はリストの項目と言います！（いやいや、順番あるから。）
って感じですかね😂
そして、忘れてはいけないのは、閉じタグですね。
これはちゃんと付けてくださいね👍
ブラウザ表示するとこうなる予定です！
