Q&A
> HTMLの属性名(例 class="" の""の部分)は、
聞きたいのは本当に「属性名」ですか？
"" は「属性値」ですが…。
前提・実現したいこと
HTMLの属性値(例 class="" の""の部分)は、
製作者がわかりやすいように好きに付けられる「名前」だと聞きました。
しかし、教材を読んでいたら、Bootstrapの部分で
と書いてありました。
属性値ってただの「名前」じゃなくて、本当は何かちゃんと意味を持っているのでしょうか？
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
ソースコード
試したこと
グーグルで検索をしましたが、自分の見た限りではそれに関することは特に書いてませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
ベストアンサー
属性値ってただの「名前」じゃなくて、本当は何かちゃんと意味を持っているのでしょうか？
それはBootstrapが「特定の名前」に「特定のスタイル」を割り当てているだけです。HTMLとして意味を持っているわけではありません。
投稿2020/09/24 10:33
総合スコア146018
0
class属性値
class属性値はHTML Standardで次のように説明しています。
クラスを要素に割り当てることは、クラスのCSSセレクターでのマッチング、DOMにおけるgetElementsByClassName()メソッド、および他のそのような機能に影響を与える。
著者が使用できるclass属性のトークンに追加の制限は存在しないが、著者は、コンテンツの期待するプレゼンテーションを記述する値よりもむしろ、コンテンツの性質を記述する値を使用するよう推奨される。
属性値ってただの「名前」じゃなくて、本当は何かちゃんと意味を持っているのでしょうか？
class属性値は複数の要素に割り当て可能な事から「グルーピング名称」としての役割を期待される事が多いようですが、「属性値」全般に「名前」の意味はありません。
役割は属性名次第なので、各々の属性名で調査してください。
CSS
<table class="table table-striped table-bordered"> と入力すると、行ごとに背景色が入れ替わって、各セルに枠がつく。
「行ごとに背景色が入れ替わって、各セルに枠がつく」のはCSSでそのように宣言されているからです。
class属性値を設定すると、「classセレクタ」「属性セレクタ」でマッチできるようになる為、対応するCSSプロパティが適用されるようになります。
前章の説明通り、JavaScript(DOM)では getElementsByClassName() でマッチするようになります。
HTMLで属性値を適用する事で、間接的にCSS/JavaScriptに影響を及ぼします。
Re: toma8 さん
投稿2020/09/24 10:46
総合スコア18189
ＣＳＳで属性値
（今回なら table class="table table-striped table-bordered"の
"table table-striped table-bordered"）
をセレクタにしたから効果を持った。
ということでしょうか？
https://getbootstrap.jp/docs/4.3/content/tables/
例えば、<table class="table table-bordered"> なら、CSSで .table-bordered { border: 1px solid #dee2e6; } が指定されている事が chrome Developer Tools で分かります。
https://developers.google.com/web/tools/chrome-devtools/inspect-styles?hl=ja
0
属性名とclassは別の話
HTMLのタグにはいろんな種類のタグがあります
(<a><img>や<table><tr><td>のようにセットで使う物。)
でその中に属性として具体的な処理を書きます
例えば<a>タグ(アンカータグ)には
- href="URI" リンク先文書の指定
- name="名前" 文書内にリンク到達点とするための名前をつける
- target="フレーム名" リンク先の文書を表示させるフレーム名
- charset="文字セット" リンク先の文字コードセット
- hreflang="言語コード" リンク先の言語コードセット
- type="MIMEタイプ" リンク先のMIMEタイプ
- rel="リンクタイプ" この文書から見たリンク先との関係
- rev="リンクタイプ" リンク先から見たこの文書との関係
- tabindex="Tab移動の順番" Tabキーを押した際の移動順を割り当てる
- accesskey="ショートカットキー" ショートカットキーを割り当てる
- shape="領域の形状" リンク領域の形状
- coords="領域の座標" リンク領域の各座標
が<a>タグ固有情報として指定できます
class属性関しては(要素にクラス名を付ける)の通り
ほぼすべてのタグに指定できる属性で
スタイルシートに書かれたクラスとひも付けしてタグの表示方法を設定できるようになっています。
あとはidなどもほぼすべてのタグに指定できる属性です。
属性に関してはHTML上規定している以外も指定は可能です。
ただふつうは無視されますが一部のプログラムではその性質を利用して固有の情報をタグの中に埋め込んだりします。
投稿2020/09/24 10:32
編集2020/09/24 10:51
総合スコア2506
回答ありがとうございます！
申し訳ありません。自分が「属性値」と書いたつもりが、属性名になっていてややこしくさせてしまいました。(修正済です。)
自分の求めていたのはmaisumakun様の回答内容になります。
でも今回回答してくださった部分も、自分がまだ初学者で不安なもので非常に有益でした。
ありがとうございます！
いや理解できたならいいけど
> Bootstrapの機能だったのですね！
がとても不安(この書き方だと．．．)
この先<style>タグやスタイルシートで解決できればいいけど．．．
なんか申し訳ありません。
属性値はその属性の名前だと聞いたのに「属性値を変えるとこの動きをするよ！」みたいに書かれていたため、属性値って書くだけで何かしら変化を起こすものだと思ってしまいました。
他にも回答が来たので、それらをみて自分は今
「属性値の変更で動いた理由は、ＣＳＳのセレクタで宣言されているから。
Bootstrapの機能によって、属性値が（今回なら"table table-striped table-bordered"）がＣＳＳのセレクタで宣言された。
と解釈しています。
うん。それなら大丈夫そうだね。
あなたの回答
tips
プレビュー
