色々なWebサイトのHTMLを見てみると、タグに色々な情報が書かれていて、意味がわからない人には、混乱を招く要素になっているのですが、これが理解できるようになると、さらに他人のホームページの内容をもっと深く理解できるようになります。
前回は、必要最低限のHTMLタグを学習しましたが、今回は、それに追加する情報などを理解して、もっとタグについて理解してみましょう。
HTMLタグの付加情報の属性について理解する
HTMLタグには、単純に「これは画像です」「これはリンクです」という意味だけではなく、さらに細かい情報を追加することができます。
その追加情報のことを
「属性（attribute : アトリビュート）」と呼びます。
例えば、画像を表示する img タグを見てみましょう。
<img src="image.jpg" width="300" alt="サンプル画像">
この場合、
src → 画像ファイルの場所
width → 横幅
alt → 画像が表示できない時の説明
という追加情報を書いています。
つまり、タグだけではなく、「そのタグをどう扱うか」を設定しているのが属性です。
WebサイトのHTMLを見ると、タグよりも属性のほうが大量に書かれていることもあります。
最初は難しく感じますが、「タグのオプション設定」くらいに考えると理解しやすいです。
よく使う属性
初心者のうちは、以下の属性をよく見かけます。
href
リンク先URL
<a href="https://example.com">
src
ファイルの場所
<img src="image.jpg">
class
CSSやJavascriptでデザインを当てるための名前（同じ値を複数かけます）
<div class="box">
type
入力欄などの種類
<input type="text">
id
CSSやJavascriptでデザインを当てるための名前（同じ値はページ内で1つしか書けません）
<section id="about">このサイトについて</section>;
特に class は、CSSやJavaScriptと連携するときによく使われるので、かなり重要です。
速成の種類
1. 値を持つ属性
もっとも一般的なのがこのタイプ。
<a href="https://example.com">
href にURLという値を入れているという意味です。
基本的には、
属性名="値" という形で書きます。
2. ON/OFFだけの属性
HTMLには、「付いているだけで有効になる属性」もあります。
<input type="checkbox" checked>
checked があるだけで、チェックONの状態になります。
以下と同じと考えてもいいです。
<input type="checkbox" checked="true">
他にも、次のようにセットすると、inputタグに入力できない状態になります。
<input disabled>
3. 複数指定できる属性
class は値を複数 指定（書き込むことが）できます。
<div class="box red large">
この場合、
box
red
large
という3つのクラス(class)が付いている状態になります。
半角スペースで区切るということを知っておくと、理解しやすいと思います。
CSSでは、この組み合わせでデザインを切り替えることがよくあるので、何故複数書くのか？という疑問は今の時点ではわからなくても大丈夫です。
これって属性？それともそれ以外？
HTMLは、タグの中に半角スペースで区切って、属性を追加していくのが基本的に書き方の構造です。
でも、初心者の頃に混乱しやすいのが、「どこまでがタグ名で、どこからが属性なのか問題」です。
<input type="text" name="user">
この場合、は、次のような意味になります。
input→ タグ名
type→ 属性
name→ 属性
HTMLは、基本的に以下のように書くという構造を理解しておきましょう。
<タグ名 属性="値" 属性="値">
つまり、最初がタグ名で、2つ目以降に書かれているのは、すべて属性です。
閉じタグには属性を書かない
次のような場合、開始タグには、属性を幾つでも書けますが、閉じタグには、属性は書いては行けません。
<div class="box"></div>
属性を書くときの注意点
属性は便利ですが、適当に書くと不具合の原因になります。
ダブルクォーテーションを忘れない
初心者がよくやるミスで、次のようなタグを書くとエラー（正常に表示されない）の場合があります。
<img src=image.jpg>
ブラウザによっては、動く場合もありますが、エラーになる場合もあるので、値にはちゃんとクォーテーションを書くようにしましょう。
（数字でも、trueなどのフラグでもクォーテーションが必要です。）
スペース区切りを意識する
属性同士は半角スペースで区切ります。
<input type="text" name="user">
スペースが入らないと、HTMLの属性としてブラウザが認識できなくなります。
<input type="text"name="user">
タイポなどで、つけ忘れる場合などもあるので、これも要注意です。
class名を適当に付けすぎない
<div class="aaa">
こんな名前でも、HTML的には問題はありませんし、ちゃんと動くし表示されます。
でも、後から見た時に意味がわからなくなりますよね？
<div class="profile-box">
こう書くことで、どんな要素なのかがわかりやすくなります。
プロとして、コーディングをする場合、「未来の自分」も他人扱いしたほうがいいです。
数ヶ月後には、自分で作ったHTMLを見て、
「誰だこれ書いたの・・・」
となるんですよ（おそらく、熟練者なら誰もが経験したことあるはずです）。
そして、これを心の中で言ったとき、それは大体、自分です。
HTML5で増えた便利な属性
最近のHTMLでは、便利な属性も増えています。
例えば「入力補助的な属性」のサンプルは以下のような感じになります。
<input type="email" required>
type="email" → メール形式チェック
required → 必須入力
JavaScriptを書かなくても、ある程度ブラウザ側でチェックしてくれるようになったので、これらを知っておくと非常に強力な武器にもなります。
data-属性
最近よく見かけるのが data-*** 属性です。
<div data-id="100">
これは「独自情報をHTMLに持たせる」ための仕組みです。
JavaScriptで、
商品ID
ユーザーID
状態管理
などを扱う時によく使われます。
Webアプリなどでは必ず使われているので、現時点では、さほど理解しなくてもいいですが、Javascriptをやる場合に理解しやすくなるでしょう。
あとがき
初心者の頃は、
<div class="container" data-id="123">
みたいなHTMLを見るだけで、「なんか呪文が始まった・・・」となりがちです。
でも実際には、
タグ名
属性
属性値
に分解して考えるだけで全然来できるようになります。
構造を理解すると、他人のホームページを見るのが
一気に面白くなります。
特に「検証ツール」を使ってHTMLを見るクセを付けると、学習速度がかなり上がります。
（検証ツールは、ブラウザのデバッグコンソール機能）
最初は読めなくて当然ですが、毎日少しずつ見るだけで、ある日突然、
「このサイト、こういう作りか！」
と理解できる瞬間が来ます。
そこから一気にWeb制作が面白くなって来ることは間違いないと言い切りましょう。
0 件のコメント:
コメントを投稿