第2回目：タグの属性について
こんにちは！たくぞー（Instagram：takuzo0405）です。
今日はHTML講座の第2回目、タグの属性に着目して解説していきます。
まだ第1回目の講座を見ていない方はこちらからご覧いただくとスムーズに進めていくことができますので、ぜひ下記URLからご覧ください。
それではさっそく始めていきたいと思います。
タグの属性って？
属性というのは、タグに対して役割を与えるものになります。
例えば、aタグにはhref属性(エイチレフ属性)、htmlタグにはlang属性、metaタグにはcharset属性などがあります。
属性に関しては、MDNリファレンスというサイトを参照して見ると、すべての属性を確認することができるので、チェックしてみてください。
ちなみに2021年4月現時点でのMDNリファレンスに記載の属性の数を数えたところ122個ありました。
ですが、正直30個も使ったことあるかなー…くらいでした。笑
属性はハッキリ言ってしまうとすべてを覚える必要はありません！が、タグによって使える、使えないが決まっていますので、「使いたいタグにこの属性が使えるのかどうか？」わからない場合はMDNリファレンスで確認しましょう。
どんなタグにも使用できる属性がある
先ほどタグによって使える、使えない属性が存在する、というお話をしました。
例えば、charset(キャラセット)という属性は、metaタグ、scriptタグにしか使いません。それ以外のタグに設定しても役割を果たしてくれません。
一方で、どんなタグにも使える属性というのが存在します。
それをグローバル属性と言います。
これらは現時点で数えると19つの属性がありますが、初めからすべてを覚える必要はありません。よく使う属性としてはclassとidがありますので、この2つを使えるようになれば問題ありません。
classやidはHTMLでbodyタグの中身、僕たちユーザーの目に見える部分に対してスタイリングしたり動きをつけたりするために使用することが多いので、headタグには基本的には使用することはありません。
headタグの中身はメタ情報という見た目に反映されない部分になるため、CSSやJavaScriptでスタイルする必要が無いからですね。
「で、結局どの属性を覚えたら良いの？」となるかもしれませんが、作るものによって使う、使わないは異なってきますので、書きながら覚えるのが一番効率的です。
例えば、aタグであればhref属性は必須になるので、a+Tabキーのエメットを使えば勝手に出力されます。
他にも、CSSファイルを読み込みたいときにはlinkタグを使用するのですが、linkと打ってからエメットを選択することで、必要な記述が書かれた状態でコードを出力することができます。
上記を見たとおり、CSSファイルを読み込むためにはrel(レル)属性と、href属性が必要なんだなと言うことが分かりますね。
このように、エメットを活用すれば必要な属性を同時に入力することができるので、最初からMDNリファレンスを読み込む必要は無いかなと思います。
いやー、一安心。笑
タグ固有の属性について
一方で、固有のタグでのみ働きを見せる属性も存在します。
先ほどご紹介したaタグ、linkタグのhref属性なんかもそうですね。仮にhref属性がpタグやdivタグに付けられたとしても何も意味を成しません。
どんな属性があるのかはMDNリファレンスを見るのがすごくわかりやすいと思いますが、前にお伝えしたとおり30個も使うかなー、くらいです。
今までWeb制作してきて属性をググらないと進まない…なんてことは無かったので、必要になってくる属性に関してはコーディングを続けていけばおのずと覚えていきますので、駆け出しデザイナーの時点ですべてを覚えよう！なんてことはしなくて大丈夫です。
まとめ：第3回へ続く
以上で、第2回目のHTML講座を終了したいと思います。
第2回目の講座では、
- タグの属性について
- どんなタグにも使用できる属性(グローバル属性)
- タグ固有の属性について
を解説していきました。
では、また次の講座でお会いしましょう。
第3回目の講座はこちらから↓
「ホームページ制作の独学に限界を感じている」
「HTML・CSSをマスターして単価を上げたい」
そんなお悩みをこれ一つで解決！
本格ホームページを作りたい方はこちら
