クラス名,id名 命名について

HTML,cssで作品を作っていて思ったのが、意外と、クラス名、id名についての設定で時間をとることが、多くなりました。

ブロックなど親要素で使えそうなclass名

• container : コンテナ
• main : メイン
• global : グローバル
• home : ホーム
• hero : でかいブロック。bootstrapのサンプルにある
• inner : 中味。
• outer : 囲っているもの。親。wrapperと同じ。
• wrapper : 囲っているもの。親。

ブロックや子要素で使えそうなclass名

• articles : 記事の一覧
• comments : コメント一覧
• contents : contentを複数囲むなら
• users : ユーザーの一覧

フォーム要素で使えそうなclass名

• form form要素関連
• field input要素関連
• radio　radiobox要素関連
• checkbox checkbox要素関連
• submit 送信

基本的には日本語を英語に直せばいいようですが…笑

実際に、クラス名、id名の命名について調べました。
リファレンス：HTMLとCSSクラスでよく使う命名について

こういうクラス名やid名をつけるのは、慣れと、実際に作られているホームページを見て、実際に真似することが、上達の鍵ですね！！

以上です。

もりけん塾
もりけん先生ブログ