24_ HTML属性（Attribute）とは？【超入門・体系化ノート】～小学生でもわかるタグへ追加する情報～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
05_HTML属性（Attribute）とは？【超入門・体系化ノート】
～小学生でもわかるタグへ追加する情報～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. HTML属性って何？
前回は、
HTMLタグが、
Webページを作るための
「部品」
だと学びました。
でも、
タグだけでは、
細かい情報を伝えることができません。
そこで使うのが、
属性（Attribute）
です。
属性とは、
「タグへ追加する情報」
です。
━━━━━━━━━━━━━━━━━━
# 家で考えてみよう
例えば、
家があります。
家だけでは、
どんな家なのか分かりません。
そこで、
・青い家
・2階建て
・玄関が南向き
などの情報を追加します。
HTMLも同じです。
タグだけではなく、
属性を追加することで、
もっと詳しい情報を伝えられます。
━━━━━━━━━━━━━━━━━━
# 属性の書き方
属性は、
開始タグの中へ書きます。
例えば、
```html
<img src="cat.jpg">
```
この
src
が属性です。
━━━━━━━━━━━━━━━━━━
# 属性は
名前
↓
=
↓
値
で書きます。
例えば、
```html
src="cat.jpg"
```
これは、
画像は
cat.jpg
ですよ
という意味です。
━━━━━━━━━━━━━━━━━━
# よく使う属性
最初に覚える属性は、
これだけで十分です。
src
↓
画像の場所
href
↓
リンク先
alt
↓
画像の説明
id
↓
名前を付ける
class
↓
グループ名
style
↓
見た目を変更
title
↓
説明を表示
━━━━━━━━━━━━━━━━━━
# src属性
画像では、
src
を使います。
```html
<img src="images/cat.jpg">
```
imagesフォルダの
cat.jpg
を表示します。
━━━━━━━━━━━━━━━━━━
# alt属性
画像には、
説明を書くことができます。
```html
<img src="images/cat.jpg"
alt="かわいい猫">
```
画像が表示できないときは、
この説明が表示されます。
━━━━━━━━━━━━━━━━━━
# href属性
リンクでは、
href
を使います。
```html
<a href="https://www.google.com">
Google
</a>
```
クリックすると、
Googleが開きます。
━━━━━━━━━━━━━━━━━━
# title属性
titleを書くと、
マウスを乗せたとき、
説明が表示されます。
```html
<p title="自己紹介です">
こんにちは。
</p>
```
━━━━━━━━━━━━━━━━━━
# style属性
色を変えることもできます。
```html
<p style="color:red;">
こんにちは。
</p>
```
赤い文字になります。
ただし、
見た目は、
あとで学ぶCSSを書く方がおすすめです。
━━━━━━━━━━━━━━━━━━
# id属性
idは、
一つだけの名前です。
```html
<h1 id="title">
私のホームページ
</h1>
```
世界で一つだけの名前になります。
━━━━━━━━━━━━━━━━━━
# class属性
classは、
グループ名です。
```html
<p class="text">
こんにちは
</p>
```
同じclassを
何回でも使えます。
━━━━━━━━━━━━━━━━━━
# HTMLを書く流れ
タグを書く
↓
属性を書く
↓
保存する
↓
ブラウザで見る
↓
修正する
↓
完成
━━━━━━━━━━━━━━━━━━
# HTMLツリー
HTML
│
└ body
│
├ h1
│ └ id="title"
│
├ p
│ └ class="text"
│
├ img
│ ├ src="cat.jpg"
│ └ alt="猫"
│
└ a
└ href="https://..."
━━━━━━━━━━━━━━━━━━
# 家で例えると
家
↓
色
↓
住所
↓
部屋番号
↓
持ち主
HTMLでは、
タグ
↓
属性
↓
詳しい情報
となります。
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ 属性はタグへ追加する情報
□ 名前="値"で書く
□ srcは画像
□ hrefはリンク
□ altは画像説明
□ idは一つだけの名前
□ classはグループ名
□ styleは見た目を変更
━━━━━━━━━━━━━━━━━━
# 初心者が最初に覚える属性ランキング
★★★★★（最優先）
□ src
□ href
□ alt
━━━━━━━━━━━━━━━━━━
★★★★☆
□ id
□ class
━━━━━━━━━━━━━━━━━━
★★★☆☆
□ title
□ style
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
HTML属性とは、
「タグへ追加する情報」
です。
もっとかんたんに言うと、
「タグのプロフィール」
です。
タグだけでは伝えられない情報を、
属性で追加することで、
画像やリンク、
説明などを自由に設定できるようになります。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
「06_CSSとは？【超入門・体系化ノート】」
を学びます。
HTMLで作った骨組みに、
色や文字の大きさ、
レイアウトなどの見た目を追加する
CSSについて、
小学生でも分かるように学んでいきましょう。
#HTML
#Attribute
#HTML属性
#VSCode
#Web制作
#初心者
#CSS
#img
#a
#超入門
🔷次の記事はこちらから⇩
