質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

HTMLのクラスネームをつけるルールやネストの深さのルールをどのように皆さんは決めていますか?

t.hat
t.hat

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2回答

0グッド

1クリップ

311閲覧

投稿2022/10/12 19:48

編集2022/10/12 21:44

前提

未経験で友人から頼まれたコーポレートサイトを、HTML、CSS、Javascript Jqueryで作ろうとしています。

実現したいこと

HTMLに指定するCSSのクラス名の入力規則やネストの深さのルールを皆さんがどのように決めているのかを聞き、自分のサイトに反映したいです。

発生している問題

HTMLの記述、ネストの深さのルールをどう決めたらいいかわからない

試したこと

さまざまなコード見本を見ましたが一貫しておらず、どれが正なのかわかりませんでした。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/10/12 21:24依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

javahack

2022/10/13 01:28

回答のコメントに対してですが、検索ワードは「html クラス名 ルール」「html クラス名 命名規則」などでどうでしょうか。
m.ts10806

2022/10/13 02:43 編集

回答にも書いたのですが、この投稿は「わからない」と言っているだけで問題や課題が発生しているようには感じませんでした(修正後でも私の意見は変わりません) 「一貫してない」のはプロジェクト固有ルールや方針・指針があるからに他ならず、 真似してなんとかなるものではないからです。 それに、「正解がない」質問なので、どうなったら解決かを自身で決めて明確化すべきですが、 同じ方針で投稿する限りは解決しないかと。 私の回答も「自分で決めてください」というのが主旨です。
t.hat

2022/10/13 03:13

皆さんアドバイスありがとうございます。 正解がない質問なのは薄々感じていました。 ベストアンサーに選ばせていただいた回答から、少しでも前に進めたらと思います。 お騒がせいたしました。
miyabi_takatsuk

2022/10/13 04:56

自己解決投稿の参考ページより、こちらの方がよいかと。 https://www.northdetail.co.jp/blog/1953/ 「css クラス名 流行り」 で検索しました。 個人的には、 BEMがおすすめです。 BEMは階層構造を端的に示すことができ、 Sass記法とも親和性が高いと思います。 (ただし、最高でも三階層のため、あまりネストするような記述には向かない)

回答2

2

ベストアンサー

この手のものって「正しい」ってないです。
BEMのような設計方針はありますが、
https://pikawaka.com/html-css/bem
これもあくまで一例で、これから作るものに合うかどうかは別問題。
まずは「要件に沿っていて不具合のない」ものを作るのが最重要です、

どのようなサイトなのかどのようなレイアウトなのか、どういう機能を用いるのか
によって決まってくるので、「必ずこう」というものはないです。好みもあります。
プロジェクトによって独自のルールを設けているところもあるでしょうし、
業務なのでそれらが外に出ることはありません。

参考にするとしたら「機能でよく使う単語」くらいでしょうか。
https://cly7796.net/blog/other/the-naming-convention-for-id-and-class/

これも好みやプロジェクトのルールによってくるので参考まで。

投稿2022/10/13 01:31

m.ts10806

総合スコア79935

miyabi_takatsuk, maisumakun😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

t.hat

2022/10/13 03:09

なるほど。 どこを大事にすべきかイメージが湧きました。 ありがとうございます。
m.ts10806

2022/10/13 03:22

いえ、指摘されて初めて気づけることもあると思うので、 何かの役に立ったようでしたら良かったです。

0

Google検索したら解決しました。

参考サイトは
https://pengi-n.co.jp/blog/css-class/
です

投稿2022/10/12 22:17

t.hat

総合スコア1

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yambejp

2022/10/13 00:59 編集

その参考サイト、ざっと拝見しましたがあまり質がよくなさそうです。過信は禁物です
t.hat

2022/10/13 01:08

アドバイスありがとうございます。 実は検索ワードを「html ルール」としか思いつかなくて。 何かいい検索ワードがあればご教示願いたいです。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。