Q&A
回答ありがとうございます！
皆さんが教えてくださったことで充分納得できたのですが、
さらに考え方を明確な理論でお教えくださりありがとう御座います！
リンク先はまだ私のレベルではちんぷんかんぷんですがいつか理解できるようになりたいです。
とても勉強になります。
まだ基礎的な段階を勉強中です。
よろしくお願いします。
【html側】
<div class="aaa">あいうえお</div>【css側】
.aaa {
color: red;
}
なら、"あいうえお"の文字がredになると学び時にそれが当たり前と思って勉強していますが、
ふと、、、例えば、全然関係ない任意の文字で作った親タグ<jj>で同じように
【html側】
<jj>あいうえお</jj>
【css側】
jj {
color: red;
}
でも、"あいうえお"の文字がredになると思うのですが、
なぜ任意の親要素で指定せず基本的にclass で id で指定するのでしょうか？
レイアウトだったり大規模なCSSでソースを見やすく整理するため？とか勝手に想像してみるものの
わかってらっしゃる方の意見が聞きたくて…しょーもない質問ですみません。
回答5件
0
なぜ任意の親要素で指定せず基本的にclass で id で指定するのでしょうか？
勝手にタグを作っては（基本的に）いけません。
投稿2020/08/17 08:07
総合スコア146018
0
もうご解決の様ですが、補足として回答させていただきます。
CSSの仕様では、XMLのスタイル付けにも利用されるように定義されています。
XMLでは、HTMLで使えない<jj>というタグもスキーマによっては利用可能です。
ですから、CSSだけで見るとjjというセレクタでスタイル付けをしても問題はありません。
CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
HTMLで使用するタグはあらかじめ定義済みのものだが、XMLではユーザが新しくタグを定義して、データの意味や構造を記述することが可能である。
投稿2020/08/19 08:19
総合スコア36960
0
maisumakunさんの回答通り、
基本的に、好き勝手にオリジナル要素を作ってはいけません。
ただし、JavaScriptでAPIによって、オリジナル要素を定義することは可能です。
Using custom elements - Web Components | MDN
ただし、それらの要素は、
W3Cが勧告する仕様に準拠しないもののため、ブラウザからの機能サポートや、
（video要素などの標準機能面的なサポート）
SEO的な、要素のセマンティック解釈を得ることができません。
（機能に関しては、基本的な、各種イベント付与や、DOMコントロールは可能。また、Shadow DOMとして標準の要素などを包含するなら、機能サポートを得られる）
つまり、オリジナル要素は、存在はできるけど、様々な面で、補助的に使われるべきってことです。
（フレームワークはガンガンオリジナル要素使って構築されている）
なので、標準要素に対して、クラスやIDを与えるのが基本なのです。
オリジナル要素に興味あったら、Shadow DOMや、上記リンクから詳しく見てみるとよいかと。
投稿2020/08/17 09:10
総合スコア9555
0
ベストアンサー
私も勉強中の身の為、難しいことは言えませんが…
まず…
全然関係ない任意の文字で作った親タグ<jj>
タグにはその殆どに意味があるので、オリジナルのタグというものは基本的に使いません。
そうなると、使用するタグというのは限られてくるわけですが…
例えば、こちら。
html
1<p> 2 このタグで括られたテキストはひとつの段落として認識されます。 3</p>
表示上の話をしてしまえば、<p>～</p>で挟まなくても同じテキストが画面に表示されます。
ただ、目に見える部分ではそうなのですが、HTMLとしては<p>～</p>で挟まれたテキストは段落。
そうでないものはただの文字です。
そうなると、段落が異なるテキストはそれぞれに<p>～</p>で挟み込む必要が出てくる為、
ひとつのサイト内で多くのpタグが使われる…というのはお判りいただけると思います。
そうなった時に、pタグの中でもここの文章はこうしたい、あっちの文章はこうしたい！
と、同じpタグで括られていてもデザインを変更したいという問題が発生します。
その時に、css側で
css
1p { 2 font-weight: bold; 3 font-size: 1.5em; 4 color: red; 5}
などのコードが掛かれていれば、その全てのpタグにこの設定が適応されてしまいます。
その為、どのpタグなのか、をしっかりと指定する為に class による指定をするのです。
もちろん、見やすくするためというのもひとつの理由です。
classの名称をそのコンテンツに関わる名前にしておけば、
CSSを見たときにそのコードがどこに働いているのか、なんとなく分かりますよね。
ざっくり説明してしまいましたが、そのような感じだと思っています。
多分、もっとしっかりした理由もあるかと思いますのでいろんな方の意見を聞いていただくとよいです。
投稿2020/08/17 08:15
総合スコア230
回答ありがとうございます！
なるほど…考え方としては、"<jj>"に対してCSSを適用することは機能上可能だけれど、使い方として"あいうえお"の文字そのもの対してCSSを適用するというのではなく、Pなどのタグに対して適用しますよという大前提があるということなんでしょうかね？！
他の方も言っていますが、
1. <jj>などのオリジナル要素にCSSを当て込むことは機能上可能だけど好き勝手作ってはいけない。
2. あいうえお、などの文字そのものに対してCSSを適用したいので、それらをタグで括っておく。
（タグを付けることでCSS側でどの要素かをきちんと指定ができる）
3. より詳細に細かく指定する為にclassやidといった属性を定義する
ざっくりはこんな感じでしょうか？？
タグには意味がある、と回答で話しましたが他の方もおっしゃっているSEO的なものです。
これは検索エンジンがこのサイトはこういうものだ、と解釈する際の指標になります。
検索エンジンは我々人間のように視覚情報でサイトの構成を捉えるのではなく、
中身のコードを見てサイトの構成を捉えます。
その為、ちゃんとした文法通りにHTMLを記述することで検索エンジンに対して
より精度の高い情報を伝えることができます。
この時、文法、というのが正しいHTMLタグを正しい用途で使用しているか、です。
なので、オリジナル要素にCSSを当て込むことでも我々人間が見る分には一見普通に見えますが、
検索エンジン的には「なんだこれ、全然読めないし意味わからないぞ？このサイトは他の人に見せられないな！」
みたいになって検索エンジンから除外されてしまったりします。
（必ずしもそうとは限りませんが）
かなり話が脱線しましたがそんなわけで、とりあえずちゃんとしたタグを
その意味を理解した上で使い、ホームページを作成するとよいでしょう。
この辺りの質問なら個別にお答えすることもできるので、もしよければプロフィールからでもどうぞ。
すごく丁寧なご説明感謝いたします！！
0
divに限らず多くのタグは1画面に複数使われ、役割もそれぞれです。
役割に沿って名前を与える作業＝idやclassを振る と理解すると良いかもしれません。
別回答を見て追記：
ちなみに、タグにも本来の役割が与えられているので、既に出ている回答のように勝手にタグを作ってはいけませんし、基本的に本来の役割を理解し利用すべきです。
投稿2020/08/17 08:07
編集2020/08/17 08:12
総合スコア80875
回答ありがとうございます！
"<jj>"に対してCSSを適用することは機能上可能だけれど、使い方として"あいうえお"の文字そのもの対してCSSを適用するというのではなく、div や class Pなどグループに対して適用しますよという大前提で使用するということでしょうかね。
「グループ」が何を意図しているのか分かりません。
前提となる条件や意図などはきちんと書かれたほうが良いです。「自分だけが知っていること」「思っているだけのこと」があればあるほど、回答者との認識のズレが生じますし、それは書いたとおりにしか動かないプログラムをしていくうえでは致命的な性質です。ご注意を。
横槍すみません。
> div や class Pなどグループに対して適用しますよという大前提で
ちょっと解釈甘いかもですね。
スタイルを当てる当てないだけの観点では答えが見えないと思います。
HTML5では特に、各要素には、こういった意味の文章として扱うという、明確な用途が定められています。
例えば、pには段落、という意味がありますし、strongには、強調、などの意味がある、などなどです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/08/18 01:59
2020/08/18 02:00
退会済みユーザー
2020/08/18 02:08 編集