HOME > インドネシアのIT業界｜市場動向・セキュリティ課題・日系企業の戦略 > HTML要素と属性の違い｜CSS・jQueryセレクタの仕組みと実践例

HTML要素と属性の違い｜CSS・jQueryセレクタの仕組みと実践例

2015/12/13

人間世界で要素という言葉は「物・事を成り立たせるもとであるそれ以上は簡単なものに分析できないもの」というこれ以上分解できない絶対的な単位という意味がありますが、一方システムは人間の言葉をそのままでは理解できないので、理解できるようにタグを付けて範囲を明確にしてあげた後のカタマリを要素と考えます。

インドネシアのIT業界｜市場動向・セキュリティ課題・日系企業の戦略

インドネシアのIT業界はインターネット技術の発展により急速に成長している。インドネシアでは違法コピーが多く、KMS認証クラックがマルウェアの標的になりやすい。インドネシアのサイバー攻撃は元社員による怨恨が原因であることが多い。

続きを見る

この記事でわかること

  • HTML要素はタグで囲まれた意味のある単位である。
  • HTML属性はオブジェクトの特徴や性質を示すものである。
  • CSSセレクタはスタイルを適用する対象を示す役割を持つ。
  • jQueryセレクタはメソッドやイベント発生時の処理対象を示す。
  • CSSのカスケード効果によりプロパティの値がツリー構造に影響する。

HTML要素と属性の意味・違い｜現実世界との比較とCSSセレクタの使い方

「人間にとって自明の要素をシステムに解釈させるためにタグを付けて範囲を明確にする」という行為は、人間が範囲を決める以上相対的なものにならざるを得ず、必然的にHTML要素は入れ子構造になります。

人間世界でプロパティ（属性）という言葉は「土地・資産・所有物」という意味であり、世の中のすべてのオブジェクトは属性を持っています。

不動産という意味ではProperty以外にReal estateという言葉がありますが、Propertyの場合personal property（動産）とreal property（不動産）を含む一般的言葉であるのに対し、Real estateは法的に守られたestate（資産）全般という意味合いが強いです。

ちなみに近いところでasset（資産）という言葉がありますが、有形固定資産がFixed assetであるのに対し、無形固定資産はIntangible assetであり、前者は間接法でDepreciation（減価償却）され、後者は直接法でAmortization（なし崩し償却）されます。

一方でシステムの世界の属性はオブジェクトが持つ「特徴・性質」という意味であり、HTML要素内の属性はDOMオブジェクトのプロパティに割り当てられ、CSSでセレクタというオブジェクトとして、プロパティと値を持っています。

セレクタはスタイルを適用する対象を示すものであり、中括弧の中にプロパティと値を宣言します。

そして要素とはHTMLの開始タグと終了タグで囲まれた意味のある単位であり、スタイルは要素に対して適用するときはHTMLタグをセレクタとして指定し、属性に対して適用するときは属性をセレクタとして記述します。

HTML要素・属性セレクタの種類と使い方｜jQueryでのCSS適用・値取得方法

セレクタが処理するメソッドにはプロパティに値を設定する役割と値を取得する役割がありますが、記述上の違いはプロパティと値をセットで書くか、プロパティのみを書くかです。

セレクタはWEB上のオブジェクトに対して、装飾（CSSにてプロパティに値を設定）したり処理を実行（メソッドやイベント）したりするための仲介役ですが、セレクタになる資格のあるものはHTML要素またはHTML属性になります。

  1. 要素セレクタはそのまま記述「$('p')」
  2. 属性セレクタ
    idは「$('#yama')」、classは「$('.zou')」
    その他の属性は大括弧$(a['href="https://bahtera.jp"]')で囲む。
  3. ブランクは「それ以下の子要素」、カンマは「複数の要素」、プラス(+)は「隣接要素」、不等号(>)は「直下の子要素」
  • 値を設定　:　$('p').css('color', red);
  • 値を取得　: console.log$('p').css('color');

セレクタの役割と使い方｜CSS・jQuery・DOMでの仕組みをバリ島の不動産屋の例で解説

WEBシステムの世界では、セレクタはオブジェクトの性格を定義するプロパティや、処理を行うメソッドとの仲介屋みたいな重要な機能を担っており、WEBサイトがブラウザ上でDOMにより要素単位でオブジェクト化されるタイミングで、要素セレクタや属性セレクタは、CSSやjQuery上で、プロパティによって値が代入されたり、メソッドによって処理されたりします。

要素とか属性とかいう言葉は日常生活の特殊なシーンでなんとなく聞くこともありますが、セレクタという言葉になると耳にする機会は俄然少なくなります。

MT車のギアチェンジを行うためのシフトレバーはAT車ではセレクター（セレクトレバー）と呼ぶそうですがあまり聞かないですね。

セレクタを説明するにはバリ島の不動産屋をイメージするとわかりやすいと思います。

バリ島（body要素）には、クタエリア（header要素）、ヌサドゥアエリア（nav要素）、デンパサールエリア（article要素）、ウブドゥエリア（footer要素）みたいにそれぞれエリアごとに不動産屋がありますが、各不動産屋のオフィスから遠いエリアへ行くには交通費等のコストがかかるため、だいたい専門外のエリアには手を出したがりません。

bodyタグ内を「ヘッダー領域」「サイドバー領域」「コンテンツ領域」「フッター領域」の4ブロックに区切るのがセクション要素であり、CSS上でそこに属するブロックレベル要素（perumahan 集合住宅）やインライン要素（VillaやCondominium）ごとに分類（プロパティに値を設定）し管理するのがセレクタ（不動産屋）の役割です。

オーナーは、不動産屋で自分の所有物件についての情報を専用フォーム（CSS）の「土地面積」「建物面積」「希望価格」等の項目（プロパティ）にデータ（値）を記入し、その情報を元に不動産屋が自社の物件管理機能付きWEBサイト（jQuery）上にストックとして登録します。

一方で賃貸や購入希望者は「バリ島　不動産」でググッて、不動産屋のWEBサイト（jQuery）に到達すると、エリア、価格等の条件で絞込み検索（メソッド実行）を行い、希望する物件を探します。

セレクタとはずばり、それがCSSではスタイルを適用する対象を示し、jQueryではメソッドやイベント発生時の処理対象になるものです。

配列と連想配列の違い｜要素・インデックス・キーを封筒の例でわかりやすく解説

簡単に言うと配列はお年玉用のルピア紙幣の入った封筒を束ねたようなものであり、封筒に連番が振ってあれば通常配列、渡す相手の名前が書いてあれば連想配列になります。

要素はこの場合のルピア紙幣の入った封筒全体であり、ルピア紙幣が値、封筒に振ってあるのが連番ならインデックス、相手の名前ならキーとなります。

封筒からルピア紙幣を出した後の相手の名前付きの空の封筒をプロパティと考えると、入れるものはルピア紙幣に限る必要はなく、車のキーでも手紙でもいいわけです。

ただし航空券が入っている場合は、「スカルノハッタ空港からバリ島に飛ぶ」というアクションを約束するものですので、航空券は関数リテラルという値であると考えられます。この場合は別の封筒には名義人の名前を入れておく（参照渡し）する必要があります。

HTML要素と属性の仕組み｜DOMとCSSカスケード効果

インライン表記のstyle属性の場合はダブルコーテーションで囲むのがややこしいですが、これは昔HTMLタグにプロパティと値を指定するときにダブルコーテーションを使用したなごりではないでしょうか？

HTML文章はブラウザのDOMによって要素（エレメント）オブジェクト化され、要素が持つプロパティの値をJavaScriptで更新することでHTML文章上の表示が変化します。

CSSをインラインスタイルで書く場合、p要素オブジェクトの中のstyle属性に配列リテラルを代入しますが、style要素の中に書く場合にはp要素がCSSのセレクタ（Selector）となります。

 

//div要素（エレメントオブジェクト）のid属性がheaderという値を持つ
<div id="header"></div>

//p要素（エレメントオブジェクト）のstyle属性がmarginというプロパティと4pxという値を持つ
<p style="margin: 4px; padding : 2px"></p>
<html>
<head>
  <style>
    p {
        margin : 4px;
        padding : 2px;
    }
  </style>
</head>

<body>
  <p></p>
</body>
//HTMLタグにプロパティと値を指定
<p><font color="blue"></font></p>

属性の値がカスケード状に影響するCSS

DOMによってhtmlタグはdocumentオブジェクト化されツリー上にオブジェクト化された要素が繋がっていきますが、オブジェクトに対するプロパティと値を完全分離し、プロパティと値の組み合わせを変化させることにより、オブジェクトを修正することなく見栄えだけを変えるのがCSSの本来の目的です。

レスポンシブデザインのWEBサイトがまさにこれなんですが、ツリー状のオブジェクトの上位に設定されたプロパティの値は下位のオブジェクトにも影響するのがカスケード（滝の流れ）の本質になります。

よくある質問｜HTML要素と属性の違い

本稿の内容に沿って、繰り返し出る問いを短く整理します。

HTML要素と属性の違いは何ですか？

HTML要素は開始タグと終了タグで囲まれた意味のある単位です。一方、属性は要素が持つ特徴や性質を示し、DOMオブジェクトのプロパティに割り当てられます。

CSSセレクタの役割は何ですか？

CSSセレクタはスタイルを適用する対象を示すもので、プロパティと値を宣言します。セレクタはHTML要素や属性を対象に、装飾や処理を行うための仲介役を担います。

jQueryでの属性セレクタの使い方は？

jQueryでの属性セレクタは、属性を大括弧で囲んで記述します。例えば、特定のhref属性を持つ要素を選択する場合は、$('a[href="https://bahtera.jp"]')のように記述します。