【自己流】cssのクラス名の付け方と指定方法-webaby【エンジニアお父さんの育児・子育て】

【自己流】cssのクラス名の付け方と指定方法

公開日:

#css#HTML

【自己流】cssのクラス名の付け方と指定方法

ホームページを制作する上で、コーディングは必須作業になります。コーディングは正確に正しく記述することが重要になってきますが、完成後に一番重要なのは、修正や追加に対しての対応がスムーズにできるかになります。

そういった、完成後に対応がスムーズにできるようにするためにもクラス名を分かりやすく、応用が効くように記述することが大事です。

私は、100サイト以上のホームページを制作してきましたが、最初はいろいろなクラス名を付けていましたが、現在ではいろいろな業種でもサイトでもほとんど同じクラス名になっています。

私が付けるクラス名をご紹介いたしますので、是非参考にしてみてください。

  1. クラス名の種類を分ける
  2. cssの適用方法
  3. 修正が大変な書き方と注意点

クラス名の種類を分ける

まず、クラス名といってもいろいろなところで使用すると思います。例えば、サイト全体やコンテンツ全体を囲うタグに付けたり、見出しのhタグにつけたり、spanタグの様にテキストの一部に付けたりとクラス名によってもいろいろなタグに記述します。

そういったクラス名をいくつかの分類に分けて、それに合わせて使うようにします。

コンテンツ全体やセクションのクラス名

コンテンツやセクションのクラス名は、クラス名で付けたりid名をつけたりします。そのクラス名・id名は1サイトで1つしか使わないようにします。

理由としては、そのコンテンツやセクションは1サイトで同じ内容のものはないからです。

例えば、今読んでいるこの記事の「クラス名の種類を分ける」というコンテンツはこのサイトに1つしかありません。そういった、1サイトに1つしかない物に対しては、オリジナル名を付けます。

付けるとすると、class-typeやcss-class01などです。固有の名前をつけます。重要なのは、分かりやすいクラス名をつけることが重要です。後々、修正などでソースコードを見てどこがどこになるかが分かりやすいように付けるようにしましょう。

コンテンツ内を区切るタグ

どんなコンテンツでもコンテンツ量が多いとdivタグなどで区切ったりすると思います。そういったタグに付けるクラス名をどんなサイトでも共通に使えるクラス名をつけます。

私がよく使っているclass名はboxやareaなどです。
オリジナル名内にあり、いくつかの内容を区切るためにdivタグで区切るときに使用します。

テキスト・画像やspanタグ

こういったタグは1つのタグで完結するものに対してのクラス名の付け方です。

テキストのみならクラス名はtextと付けます。また、画像にはimgとつけます。spanなどでテキストを装飾するなら、f-colorやf-sizeなどと付けるようにしています。

ページ共通のクラス名

これは、各ページの見出しやレスポンシブ用のクラス名です。

上記の様に、どんなサイトでも必ずあるもの・必ず装飾するものには毎回同じクラス名をつけます。そうすることで、複数のサイトを管理していても効率良く作業をすることができます。

このようにコーディングする上で、クラス名を付けるルールをしっかりと自分で作ることで作業効率も上がり、ミスも少なくなります。ある程度、応用が効くように付けているとサイト運営をする時に、スムーズに短時間で作業をすることができます。

cssの適用方法

このようなページのソースコードがあるとします。

cssでの記述はこのようにします。

上記の様に、共通部分とそのコンテンツのみの指定に分けて記述することができます。

コンテンツ内のcssの指定はclass-typeを指定してから他のタグやクラス名をしていすることで、その部分だけを装飾することができます。

また、見出しや共通指定・スマホ時の表示などはサイト全体に共通することなので、そのクラス名のみに指定して装飾するようにすると、htmlを記述する際はクラス名を記入するだけで同じ装飾になります。

修正が大変な書き方と注意点

よく見かけたり、移転されてきたサイトで困るのが、全ページ共通の見出しなどの装飾をするときの指定が、クラス名ではなくタグに直接指定している場合です。

例えば、上記の様にhtmlに<h3 class=”base-hx”>と記述していて、cssにbase-hxで装飾を記述しているとh3タグには影響はないですが、<h3>に直接cssで装飾していると、h3で違う装飾をする際に引き継いでしまいます。

クラス名やid名を使用しないでcssで装飾をする場合は、他のページに影響がないかを確認した上で、cssで装飾を指定するようにしましょう。

ざっくりと説明しましたが、クラス名を自分で分類し、自分でのルールを作った上でサイトを制作するようにするだけで記述内容も減りスッキリしたソースコードになります。

ホームページを作って終わりではなく、その後の運用や管理の事を考えて制作するようにしていきましょう!