HTMLのクラス名はただの名前で、命令ではないですよね？

初心者なのに自社のサイト更新を任された者です。
教えてください。
ずばり、クラス名はクラス名だけであって、いくらクラス名を変えたからといって、「文字の太さを変える」とか、「ここで改行する」のような命令(=タグ？）にはなりませんよね？

今、商品ごとにタグを作り、そのタグをクリックすると、各商品の詳細ページが表示されるというコードを作成しています。

まず、3つのタグを作りました。
<civ class="tag">
<div class="tabItem" id="tab1-1">
<spam>商品1</span>
<civ class="tag">
<div class="tabItem" id="tab1-2">
<spam>商品2</span>
<civ class="tag">
<div class="tabItem" id="tab1-3">
<spam>商品3</span>
これを作ったことで、１つのページに横並びで、「商品１」「２」「３」のタグが表示されました。

問題はこのあとです。それぞれのタグをクリックしたら表示される商品ごとの詳細ページを作成しようと、下記のようなコードを書きました。
<div class="parsys tabInPagePar1">
この、最後の「1」を「2」に変えたら("parsys tabInPagePar2")商品2へ、「３」に変えたら("parsys tabInPagePar3")商品3に飛べるようになりました。

ただ、これってあくまでも<div class>とあるように、"parsys tabInPagePar1"というのは、ただのクラスの名前です。<br>とか<a href>のようなタグではないのに、なぜ末尾の数字を1,2,3と変えるだけで、それぞれのタグの詳細を設定できるようになるのか謎です。
名前にそんな権力があるのでしょうか？

別ページのコードをコピペし、極力同じ作りの部分を壊さないようにして、テキストやリンク先だけ買えるようにしているので、コード全体のどこかで、きちんと設定がなされているのかもしれません。
とにかく今は、それぞれの詳細ページが作れるので、結果的にはラッキーなのですが、やはり仕組みをきちんと理解しないといけないと思っています

自分なりに調べましたがよくわからないので教えてください。

No.2 回答者： naktak 回答日時： 2019/07/31 15:03

<div class="parsys tabInPagePar1000">

でもなるんですか？

ならないなら、tabInPagePar1, tabInPagePar2, tabInPagePar3はCSSとして用意があるが、tabInPagePar100は用意がないというだけでしょう。

tabInPagePar1000でもなるなら、必要とした場面のJavaScriptで「tabInPagePar」とマッチするクラス名の要素に対してごにょごにょしてるんじゃないですかね。

この回答へのお礼

なるほどCSSの方であらかじめ設定しておいたクラスを使った場合は、たしかに各々の動きが設定できそうですね…
ありがとうございます！

お礼日時：2019/08/01 07:18

No.1 回答者： fujillin 回答日時： 2019/07/31 09:45

こんにちは

HTMLは文書をマークアップするための言語で、基本的に文書の内容はこれによって記述されています。
ウェブサイトの表示に際しては、この文書をどのようにレイアウトして表示するかを表す、CSSやユーザの操作を簡便にしたり、入力内容のチェックを行うためのプログラム言語（javascript）が併せて用いられることが多いです。

◇CSSの説明
https://developer.mozilla.org/ja/docs/Learn/Gett …

◇javascriptの説明
https://developer.mozilla.org/ja/docs/Learn/Gett …

全体像としてつかんでおくなら、この辺りから
https://developer.mozilla.org/ja/docs/Learn/Gett …

※ 奥が深いので、全部を読み切るよりは、浅く広く読んで、なんとなくでも全体像を把握しておいた方が宜しいと思います。


さて、
＞これを作ったことで、１つのページに横並びで、「商品１」「２」「３」
＞のタグが表示されました。
とのことですが、ご提示のHTMLだけではそのような表示になるはずがありません。
（試しに、ご提示のHTMLだけのhtmlファイルを作成して、表示させてみればわかるはず）
・・・というか、その前に誤記（？）が多すぎますし、閉じタグが全部抜けていることが、HTML文法上問題です。
（civ、spam は多分誤記と思います。）

HTMLを文法的にチェックしてくれるサイトがありますので、慣れるまではそのようなところを利用なさるのが宜しいかと。
（とは言え、100点でなければダメということはありませんので。）
http://www.htmllint.net/html-lint/htmllint.html


話が脱線してしまいましたが、通常はご提示のようなHTMLであれば縦に項目が並んで表示されるはずです。
これが、横並びで表示されているのなら、既に、（上記の）CSSの設定で横並びにレイアウトしているものと想像できます。

＞それぞれのタグをクリックしたら表示される商品ごとの詳細ページを作成しようと
この説明文だけから解釈すると、「商品のページに遷移する」ためのタグはリンクタグ（<a>）です。
でも、何となく推察するところ「リンクで別ページに飛ぶ」のではなく、いわゆる「タブ表示」で「表示内容を切り替えている」のではないかと思います。
このようなことを実現するには、HTMLだけでは難しく、上記のCSSやjavascriptを利用することで実現が可能となります。

これらの付加機能を実現する手段として、「要素のクラス名」を利用していることが多いです。
＞クラス名はクラス名だけであって、いくらクラス名を変えたからといって、
＞「文字の太さを変える」とか、「ここで改行する」のような命令(=タグ？）
＞にはなりませんよね？
HTMLだけではクラス名はご理解のように単なるクラス名ですが、CSSやjavascriptでクラス名を利用するような仕組みが設定されていると、ご質問のような変化も十分にあり得ます。（もっとドラスティックな変化も可能です）

試しに、ご提示のHTMLに
<style type="text/css">
div.tabItem { font-size:20em !important; }
</style>
の3行を、head内に追加すると文字サイズが大きくなったりしませんか？
（効かない場合もあり得ますが…）


世の中の色々なサイトをご覧になれば、
・画像が自動的にスライドして変わったり
・スクロールに応じて表示内容が変化していったり
あるいは
・閲覧する画面の幅（PCかスマホか）に応じて、見やすいレイアウトに変わったり
と様々な工夫や対応がなされていることがわかると思います。
これらは、何も考えずにHTMLを作成しさえすれば自動的にそうなるということはなく、そのようになるように様々な仕組みが作られて、その上に成り立っているものです。

クラス名の設定は記述者の自由ですので、HTMLのタグのように「○〇は◇◇の意味」というような決まりごとはありません。
とは言え、だいたい内容を表すようなクラス名を採用するのが常識的ですので、ご提示の「tabItem」や「tab1-1」から推測すると、全体がタブ表示の一部で、ご提示の部分はそのインデックスに当たる部分ではなかろうかと思われます。
（推測なので、正しいかどうかはわかりません）

＞なぜ末尾の数字を1,2,3と変えるだけで、それぞれのタグの詳細を設定
＞できるようになるのか謎です。
CSSやjavascriptでクラス名に対応した処理がなされるような仕組みが作られていれば、そのようなことになります。

＞コード全体のどこかで、きちんと設定がなされているのかもしれません。
多分、ご推察の通りだと思われます。
<style>や<script>タグがこれに当たります。
実際の肺葉がHTML内に記述してある場合と、外部ファイル（＝別のファイル）から読み込んでいる場合とがあります。


あまり長く書いてもきりが無いので、この辺で一段落ということにします。

この回答へのお礼

大変詳しく、わかりやすいご説明をありがとうございました！！ご回答を心の底から理解できたまではいきませんが、なんとなくなるほどなるほどと感じ、寛容の「なぜクラス名を変えただけで設定内容を変えられるのか」に関しては、自分が今編集しているHTMLファイルとは別に、CSSやJavaScriptで編集の可能性があるとよくわかりました。

お察しの通り、別ページに遷移するのではなく、あくまで同一ページに設定しているどのタブを触るかで、その下に表示する内容を変える、というものです。
今会社でつかっているCMSのどこをクリックすればCSSの編集ができるのか？f12を押して管理者画面を出して、右側に出てくるCSSらしきものを変えれば良いのか？
基礎的な部分が抜けているので早急に勉強します。

また、誤記大変失礼しました。ご指摘の通り閉じタグがなく、<spam>となっていますね…気を付けていましたが気がつきませんでした。文字だらけのコード表、本当に苦労しています。
今家にいるので試せませんが、会社に着いたらhead内に3行試してみます
参照URLをいくつもありがとうございました。今はとにかく知識を深めたいので、活用させていただきます！！

お礼日時：2019/08/01 07:35