どうも、ソエです!

今回は、私がよく使うClassをお教えします!

Classの命名で悩む人は多いかと思うので、参考になればと思います!

では早速行きましょう!

レイアウト

  • l-inner(全体的な要素の横幅指定などに使う)
  • l-flex(横並びしたい要素に使う。display: flex;から名前をとった。)

よく使うのはこの二つ。
しかし、flexを使うときはjustify-contentを使うのでl-betとかにしてまとめたりもします。

レイアウトはl-○○○○で書きます。
lはlayoutからとりました。

要素

  • link(aタグの時によく使う)
  • list(liの時に使う。ulはlistsとし、複数形。)
  • photo(imgタグによく使う。アイコンならば、iconともします。)
  • content(大きいグループ、見出しで言えばh2のグループに使う。)
  • part(小さいグループに使う。contentの中の要素のグループとか。)
  • title(見出しに使う。)
  • logo(ロゴに使う。)
  • info(詳細説明などに使う。)

こんなところですかね。
どれもこれも想像のつきやすいものにしてます。

classを付ける時に心がけていること

私は、classを付ける際には、それに関する単語にしています。
長い単語でも、ローマ字でも、必ず翻訳させたりしてclassにしています。

関係のない単語だと、後から見返したときに関わりなさすぎて、混乱する可能性もありますからね。
皆さんも、classは関係のある単語にしてみて下さい。

終わりに

どうでしたか?
おまけ程度に、私がclassを付ける時に心がけていることなんかも書きました。
参考になれば幸いです!

今はそこまで少ないですが、後々増えるかもしれません。
タグが使えなくなったり、増えたりしますからね。

では、今回はここまで!

ご閲覧、ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ HTML/

私が良く使うClassのリスト