アプリ版：「スタンプのみでお礼する」機能のリリースについて

うーん・・・

HTML5のclassのつけかた等について

解決済

  • 質問者：ritto2001
  • 質問日時：
  • 回答数：3件

こんにちは、web作成初心者です。
HTML5では<header><main>等のタグがありそれらを使うべきだと思ってるんですが<div class="header>と記述するよりもcss優先度(?)が弱く不便に感じてしまいます。
<header class="header">とか
<header>
<div class="header">みたいにして優先度を高めようかと考えたりしますがなんかマズイと言うか変な気がするんですがどうなんでしょうか？
仕事等で公にしても良いようなコーディングの場合を教えていただきたいです。
<main class="">とか
<body class="">とかやりたくなるんですがやっているのを見かけないのでなんとなくマズイ気はしてます。
今まで特にタグの意味等考えず見た目が思い通りに行けば良いと思って適当にコーディングしてましたが最近ちゃんとしようと思い困ってます。

正解とマズイ理由等教えていただけたらと思います。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

header{}タイプセレクタで詳細度は0001


div.header{}クラスセレクタが追加されていますから、divタイプセレクタと合わせて詳細度は0011になりますね。
　このように、タイプセレクタは詳細度が低いために、CSSカスケーディングスタイルシートのカスケーディング機能をフルに活用できるのす。「弱いから便利」なのです。
　classやidの漬け方は、もう20年以上前に勧告されたHTML4の当時から、変わっていません。

DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　 これが何十年経っても理解できないお馬鹿さんが多くて、class="left" とか、class="content" とか使われてきました。それでは、文書構造をマークアップするというHTML(Hyper Text Markup Language)の意味がありませんね。

　そこで、意味のないdiv(意味は何の意味もないボックス　generic language/style container)ではなく、文書構造を示すheader,section,footer,nav,aside・・などが導入されました。

<main class="">とか
<body class="">とか
　は、とんでもないのがわかりますか？？
　ちなみにmain要素はフローですが、特殊で文書内に一カ所しか使えません。ただし、祖先に article, aside, footer, header, nav 要素があってはなりません。--section要素内に使える。

＞HTML5では<header><main>等のタグがありそれらを使うべきだと思ってるんですが
　なぜ仕様書を読まない？？すべて正確に書かれている。
　数学と同じで、問題集を解くのではなくきちんと教科書を読んで理解するのが簡単で早く、そして間違いも少ない。

<body>
　<header></header>
　<section>
　　<h2></h2>
　　<section>
　　　<h3></h3>
　　　<section>
　　　　<h4></h4>
　　　</section>
　　</section>
　　<section>
・・・
　　</section>
　　<nav></nav>
　　<aside><aside>
　</section>
　<footer>
　　<address></address>
　</footer>
</body>
とか。どこが難しいのかわかりません。馬鹿な機械--検索エンジンでも文書構造が把握できる。
　そのうえで
body{基本的なこと}
section{でsection要素内の指定}
section section{・・}
section p{text-indent:1em;}
と、より詳細度が高いほうに指定していく。---カスケード----

cascadeの意味 - goo辞書 英和和英( http://dictionary.goo.ne.jp/edc/15001281300/mean … )

もし、classなんてつけていたら、とても面倒なる。

＊classはデザインのためにつけるのではありません。
　￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　あくまで、文書構造を示すためのもので、デザインのためにつけてはなりません。

　その後、スタイルシートでHTMLで示された文書構造に従ってセレクタによって、デザインを指定していくのです。この順番を逆に理解している人が多い。それだからHTML5の策定が必要になった。
＊HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
　の
【問題2】文書内に埋め込まれた「意味」が不明確( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
　を読まれるとよい。

先のHTMLで
section{margin:10px 0;border:1px blue solid;}
section section{margin-left:2em;border-color:red;}
section section+section{margin-top:5px;}

なんて、とっても簡単にかける物をclassを使うと面倒になる。後でスタイルシートを見ただけではわからなくなる。そのclassはどこに使われているのだっけ？？？？。
　上の書き方だと
section要素は青枠で上下10pxのマージン
その子供は、階層下がるたびに左が2文字マージン、枠線は青
子供が二つ連なっているときは上下のマージン減らす
　これがスタイルシート見るだけでわかるでしょ。デザインするときに、HTMLを隅から隅までclass名を探すなんて、私は嫌です。

　wordpressなどCMSに、classが多用されているのは、プログラムの仕様ですが、それもHTML5の改定時にさんざん議論に乗っていて、それではまずいということになって、新しい構造を示す要素が追加されて、下記のような厳しい忠告が加えられた。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE: Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( https://www.w3.org/TR/2014/REC-html5-20141028/gr … )］より

　著者は、他に適切な要素がない時の最後の最後の手段としてdiv要素を使うことを強く推奨する。divのかわりにより適切な要素を使うことで、読者のアクセシビリティが向上し、文書の改訂なども容易になる。
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
色々鼻につくところはありますが私の疑問点にしっかり答えていただきありがとうございます。
今回の質問でhtmlに対するスタンスが作成者によってかなり違うという事もわかりました。
教科書的に一番正しい回答をいただいたのでベストアンサーとさせていただきます。

通報する
お礼日時：2017/04/11 18:29

No.2

  • 回答者： Dr.Fell
  • 回答日時：

body class は頻繁に見かけますよ。

教えてgooの今いるページではbody idが使われています。
見かけないのは、見ていないだけでは？わざわざチェックしないとみえませんからね。

よく使われるwordpress でも、body classというテンプレートタグがあり、簡単に、ページに対応したclassが複数つけられます。それだけ、需要があるという事です。他のcmsも同様で、むしろデフォルトです。

bodyにidやclassを付与して、デザインを切り分けるのに便利ですよね。複数人でコーディングする場合には、idはページ名、classはカテゴリー名などと（逆の場合も）ルコーディングルールで定められる場合が多いです。

最近はBEMなどの設計思想で組まれる場合も多くなり、その場合には、body にはクラスやidを振らない場合がおおいのかな。web作成初心者がどの程度の初心者なのかで変わりますが、プロで新人というなら、使う使わないは別にして、BEMも習得すべき考え方となります。今まで通り大きな要素にclassをつけるのもありです。

興味があれば、「css設計」をかじってみてください。本当に初心者だと全然歯が立たない気もしますが、気になったら勉強する機会なのかもしれません。ちゃんとしたいなら、代表的なものだけでも勉強するべきです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
確かにbody classも見かけますね。
私も便利だと思いますし独学でweb作成を習得したためid class ガンガン使ってたのですが最近web作成を人に教わることになりその方がいわゆる正しい文法的な事を重視するためhtmlの記述も「文法的に正しいのか？」を考えざるをえなくなりこういった質問をさせていただきました。利便性、明快さ重視と文法的な正しさ、アクセシビリティ重視。この質問でも真逆の回答がついているようにどちらを優先するかで全然違うコーディングになるみたいですね。
将来的には数の差でhtmlの文法基準も利便性、明快重視に寄っていくような気がします。

通報する
お礼日時：2017/04/11 18:23

No.1

＞<main class="">とか


＞<body class="">とかやりたくなるんですがやっているのを見かけないのでなんとなくマズイ気はしてます。
CSS classについて言えば、要素名だけでは分類できないものを分類したり、要素名を横断してグループ化するといった役割を持っています。
極論すれば<html class="hoge">もありです。（あまりこれが必要な状況が思いつけませんが…）

<body class="hoge">や<main class="hoge">があまり見かけない理由は、html要素と同様にHTMLドキュメント内でたった1回しか出現しない要素だからという点にあります。
つまり…body{～}やmain{～}と書いてしまえば、一意に特定できるためclassを付ける必要がある状況にならないといった理由です。

優先順位に悩まれるという事ですので、「html *」セレクタの様に適用範囲がとても広いにも拘らず優先順位の高いセレクタを使用してしまっているのではないかと推定されますが、
具体的なHTML＋CSSを見なければ何が悪いのかまでは分かりませんね…
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
class の使いかたがわからないのではないです。
すいません、ちょっと質問がわかりづらかったかもしれないです。

通報する
お礼日時：2017/04/11 18:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報