HTML

【図解付き】HTMLタグの属性とは?属性を使って出来ることを知る

どうも、つよぽんです!

今回はHTMLの属性(アトリビュート)について説明していきます。

次のような人にとって今回の記事は参考になります。

想定読者
  • HTMLの属性(アトリビュート)を知らない人
  • HTMLの属性を使って何が出来るか知らない人
  • HTMLの属性の使用例を見たい人

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
HTMLの属性(アトリビュート)を理解するHTMLの属性(アトリビュート)を使うことで、外部ファイルを読み込んだり、CSSと連動してスタイルを整えたり出来て、HTMLの表現の幅が広がります。属性はたくさんありますが、その中でもよく使われる代表的な属性を4つ紹介します。...

今回の内容は以下のとおりです。

今回の内容
  • HTMLの属性(アトリビュート)とは
  • HTMLの属性を使って出来ること

 

HTMLの属性(アトリビュート)とは

HTMLの属性とは、HTMLタグに対する追加情報のことで、タグの中に埋め込まれます。

実際に次の画像をみて属性はどの部分を指しているのか確認しましょう。

HTMLの属性の解説HTMLの属性の解説

上の図のうち黒背景の部分をみていただくと、「<p class=”editor-note”>」と書かれているのがわかります。

このpタグのうち「class=”editor-note”」部分がタグの中に埋め込まれた追加情報で、これが属性(アトリビュート)です。

このとき、「=」を挟んで左側が「属性名」、右側が「属性値」といいます。上の画像の例だと、属性名は「class」、属性値は「editor-note」になります。

では、この属性をつかうことでどのようなことが出来るのか次の章で解説していきます。

HTMLの属性を使って出来ること

HTMLの属性で出来ることは種類によって役割が異なります

この記事では使われることが多い属性2つを解説しますが、他にもどんな属性があるか気になる方は以下のページから確認することが出来るのそちらを参照していただけたらと思います。

それでは、今回解説で使う属性2つを見ていきましょう。使う2つの属性は次のとおりです。

解説で使う属性2選
  1. class : CSSと一緒に使われることが多い
  2. src : 画像の表示で利用する

class

class」は基本的にはCSSと一緒に使われることが多く、ページ内で同じデザインをしているパーツに対して同じ属性値をセットします。

次の図は実際に似たようなパーツをグループ分けしている画像になります。

同じデザインパーツは同じclassの値がセットされている同じデザインパーツは同じclassの値がセットされている

上の図の枠で囲っている部分は次のように同じデザインになっているのがわかるかと思います。

  • 赤枠内 : 灰色背景でパーツ中央にタイトルが書かれたボタン
  • オレンジ枠内 : パーツ上部に画像、下部に記事タイトルと投稿日が書かれているカード形式のパーツ

このように、同じデザインのパーツを作成するときは、CSSで表示パーツのスタイルを定義して作成します。

実際に、次のサンプルコードと出力結果が表示されている画像を使ってもう少し詳しく見ていきましょう。

classを使ったサンプルコードとその結果classを使ったサンプルコードとその結果

上の画像のサンプルコードが読みづらい方は、以下のリンク先でも確認できるのでそちらを参照していただけたらと思います。

上の画像のサンプルコードは、class属性の属性値(クラス値)を2つ用意して、クラス値に応じて異なる背景色をCSSで定義しています。(オレンジ枠内)

そして、HTMLのそれぞれのpタグ内に交互に同じ値のクラス値をセットすることで(赤枠内)、出力結果で赤背景と黄色背景が交互にセットされます。

上のサンプルコードだと、赤背景部分のclass値は「bg-red」、黄色背景部分のclass値は「bg-yellow」とセットされているおかげで、同じクラス値がセットされているタグの背景色は同じ色になるのです。

src

src属性の役割ファイルを読み込むことです。そのためsrc属性が利用できるタグは限られており、その代表的なものは次の2つです。

src属性を使うタグ例
  • imgタグ : 画像の読み込みをして、Webページ上に画像表示を行う
  • scriptタグ : JavaScriptファイルを読み込んで、JavaScriptの実行を行う

ちなみに、さきほど紹介したclass属性bodyタグ内で利用するタグであればどれでも利用することが可能です。というのも、class属性の主な役割はCSSと連携してスタイルの変更を行うことだからです。

今回は、imgタグとscriptタグのうち、imgタグを使ってサンプルを交えながら使い方を解説します。

それでは次の画像を確認しましょう。

imgタグを使ってsrc属性を使ったサンプルimgタグを使ってsrc属性を使ったサンプル

上の画像のサンプルコードが読みづらい方は、以下のリンク先でも確認できるのでそちらを参照していただけたらと思います。

上の画像の赤枠内ではimgタグを利用しています。そして、そのimgタグの中ではsrc属性を使っているのがわかるかと思います。

今回はsrc属性属性値に画像URLをセットして、Webページ上では画像URLにひもづく画像が表示されています。

画像が表示されるまでの流れとしては次のとおりです。

画像表示までの流れ
  1. src属性によって属性値でセットされている画像ファイルを読み込む
  2. 読み込みが完了したら、読み込んだ画像をWebページ上に表示する

今回は画像ファイルの読み込みにhttps(http)から始まるURL形式(絶対パス)だけでなく、相対パス形式で値をセットすることも出来ます。

絶対パス相対パスについては以下の記事でも解説しているので、絶対パスと相対パスについてよくわからないという方は以下の記事を参照していただけたらと思います。

あわせて読みたい
知っててあたり前!!会話で使われる技術用語パート1エンジニアがよく使っているけどいまいちよくわからない方に向けて、つよぽんが詳しく解説。Webディレクターのみゆきと別業界からエンジニアに転身を考えているまことと一緒に勉強しよう!...

以上、class属性とsrc属性の使い方をサンプル画像を使って説明してきました。

以下の学習コンテンツでは、「class」と「src」の他に「id」と「href」の説明もサンプルコードを使って説明しているので、他の解説も見たい方は以下の記事も確認していただけたらと思います。

あわせて読みたい
HTMLの属性(アトリビュート)を理解するHTMLの属性(アトリビュート)を使うことで、外部ファイルを読み込んだり、CSSと連動してスタイルを整えたり出来て、HTMLの表現の幅が広がります。属性はたくさんありますが、その中でもよく使われる代表的な属性を4つ紹介します。...

まとめ

ここまで話してきた内容をまとめると以下のとおりです。

この記事のまとめ
  • 属性はタグ内に埋め込まれる
  • タグ内に埋め込んだ属性の内「=」を挟んで左側が「属性名」、右側が「属性値」と呼ぶ
  • class属性はCSSと組み合わせて使い、同じデザインのパーツに同じクラス属性値をセットする
  • src属性は画像ファイルやJavaScriptファイルの読み込みに主に使われる

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLの属性(アトリビュート)を理解するHTMLの属性(アトリビュート)を使うことで、外部ファイルを読み込んだり、CSSと連動してスタイルを整えたり出来て、HTMLの表現の幅が広がります。属性はたくさんありますが、その中でもよく使われる代表的な属性を4つ紹介します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です