する質問をすることでしか得られない、回答やアドバイスがある。すごく初歩的な質問で恐縮なんですが、html5のクラスについて教えてください。先日HPのコードを提出したのですが、「こんな古臭い書き方じゃ今時通用しないよ。」と言われてしまいました。調べたところ、html5になってからPCにも分かりやすい、セマンティックWEBなる考え方でマークアップするようになってるんですね。個々の要素全てにクラス名を付けて、独立したブロックにして親要素に依存しない書き方をする。いうことらしいですが、このクラス名の付け方がよくわからないのです。古臭いと言われたところはBEMでコードを書いてあるようだったんですが。ほかにもいろいろ記述方法があるみたいで、どれを参考にすればいいのかも分からないし。なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。いう記述方法はどこを参考にすればうまくかけるようになるのでしょう。本とかサイトとかあるのでしたら教えていただきたいです。すごい素人くさい質問なんですが、独学でWEBデザインの勉強をしているため、他に聞ける人がいないものでこちらで質問させていただきます。attachmentクリップ0気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。11:59誰に言われたのかわかりませんが、極論だと思います。誰に言われたのかわかりませんが、極論だと思います。navbar-defolt...みたいな感じでやたらクラスついてたりしますよね??あれはなぜなんででしょうか。navbar-defolt...みたいな感じでやたらクラスついてたりしますよね??あれはなぜなんででしょうか。件sort評価が高い順sort新着順sort古い順linkcheckベストアンサー+3私も同じような境遇に陥った人間で、親近感(というと失礼かもしれませんが)を抱いたので、ぜひお助けしたいです。モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法がとてもおすすめです。なんで1つの要素に2つも3つもクラスがついてるんですか?それさえもわからないです。「一つのクラスやセレクタだけでは表現しきれない。しようとするとコードがスパゲティになる」と言ったところでしょうか。今はCMSやECなどのフロントエンドとして使うことを考えると、状態に応じて表示が変えやすいというのが利点だと思います。Bemなどを採用することで、それがチームの共通言語ともなり「あー、このクラスはこの要素のある子要素がこういう状態の時に使うのね」というのがパッとわかるようになります。ソースを読むと、略語はちょっと表を見ないとわからないところではありますが、うまく整理されていることがわかると思います。余談ですが、私は一応BemとMCSSの合わせ技っぽいのでコーディングしています。個人サイトはまだそう言ったリニューアルはしてません。それとさらにお節介だと思いますが、ここ最近はCSSを楽に書く仕組みとしてSaSSやStylusという「ビルドするとCSSが吐き出せる」仕組みがあったりします。私はStylus派です。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。12:51ありがとうございます!やっぱり最初は分からないものなんですね。安心しました(笑)早速本買って勉強します!!ありがとうございます!やっぱり最初は分からないものなんですね。13:28わからないものですね。僕も7年前の知識で挑んでいったら「使えない」と言われまして、例の本を勧められたので一読して目からウロコでした。なんと言いますか、HTML,CSSはなんとなく書いても形になるのがいいところでもあり、悪いところでもある。最近悪いところが顕著に出てきたのでWebコーダーの人たちの間でのみ知識が共有されているという偏見があります。バックエンドのプログラマでBemとかMCSSを意識してコーディングできる人って、逆に少ないのではと思ったりします。わからないものですね。僕も7年前の知識で挑んでいったら「使えない」と言われまして、例の本を勧められたので一読して目からウロコでした。なんと言いますか、HTML,CSSはなんとなく書いても形になるのがいいところでもあり、悪いところでもある。最近悪いところが顕著に出てきたのでWebコーダーの人たちの間でのみ知識が共有されているという偏見があります。バックエンドのプログラマでBemとかMCSSを意識してコーディングできる人って、逆に少ないのではと思ったりします。コーディングって覚えることが沢山で大変ですけど、thmlもしばらくはバージョンアップしないだろうし、ここが踏ん張りどころと思って頑張ります。覚えてしまえばこっちのものですしね!なるほど。コーディングって覚えることが沢山で大変ですけど、thmlもしばらくはバージョンアップしないだろうし、ここが踏ん張りどころと思って頑張ります。11:43回答後、色々考えてやっぱりお節介コメントをすることにいたします。なんで1つの要素に2つも3つもクラスがついてるんですか?という質問文がちょっと気になったのと、自分も最近個人サイトをリニューアルするときに気づきがあったので。自分が望む装飾はまた別に実装する必要があることがままあります。いうことでMCSSではBaseレイヤーCSSにBootstrapを使って、さらに自分のページらしく仕上げるのにProjectレイヤーCSSやCosmeticレイヤーCSSで独自のCSSを組みます。なんで一つの要素にいくつもclassがつくようになったのかという話ですが、これはIE10のバグが発端で、IE10ではセレクタを駆使してCSSを指定すると、CSSの優先順位を決める点数が1000点を超えた指定は適応されない。いうようなバグがあったらしいです。「じゃあクラスでうまく装飾するべきじゃね?」という風にフロントエンド技術が発展していったものと自分は思います。いうことで、HTMLやCSSのバージョンだけの話ではなく、その後の保守や改造のしやすい設計をしやすいHTMLやCSSを書くように意識できるようになると、多分他の人も幸せになれると思います。今までの(今もかな?)HTMLやCSSは何となくで書いてそれなりに綺麗にかけちゃったのですが、CMSなどのシステムが発展してきた今、バックグラウンドから吐き出したデータを綺麗にするための綺麗なHTML/CSSの実装というのが求められている昨今だと思います。熱く語ってしまいましたが、少しでも「設計も大事」が伝わると幸いです。回答後、色々考えてやっぱりお節介コメントをすることにいたします。いう質問文がちょっと気になったのと、自分も最近個人サイトをリニューアルするときに気づきがあったので。自分が望む装飾はまた別に実装する必要があることがままあります。いうことでMCSSではBaseレイヤーCSSにBootstrapを使って、さらに自分のページらしく仕上げるのにProjectレイヤーCSSやCosmeticレイヤーCSSで独自のCSSを組みます。なんで一つの要素にいくつもclassがつくようになったのかという話ですが、これはIE10のバグが発端で、IE10ではセレクタを駆使してCSSを指定すると、CSSの優先順位を決める点数が1000点を超えた指定は適応されない。いうようなバグがあったらしいです。いう風にフロントエンド技術が発展していったものと自分は思います。いうことで、HTMLやCSSのバージョンだけの話ではなく、その後の保守や改造のしやすい設計をしやすいHTMLやCSSを書くように意識できるようになると、多分他の人も幸せになれると思います。今までの(今もかな?)HTMLやCSSは何となくで書いてそれなりに綺麗にかけちゃったのですが、CMSなどのシステムが発展してきた今、バックグラウンドから吐き出したデータを綺麗にするための綺麗なHTML/CSSの実装というのが求められている昨今だと思います。熱く語ってしまいましたが、少しでも「設計も大事」が伝わると幸いです。リンク内容あたりが初心者には分かりやすいと思われます。評価が高い回答ほどページの上位に表示されます。remove低評価1回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。12:49ありがとうございます。のぞいてみます!!ありがとうございます。頂いたご意見への回答は行っておりません。