2019/10/10#css#HTMLホームページを制作する上で、コーディングは必須作業になります。コーディングは正確に正しく記述することが重要になってきますが、完成後に一番重要なのは、修正や追加に対しての対応がスムーズにできるかになります。いった、完成後に対応がスムーズにできるようにするためにもクラス名を分かりやすく、応用が効くように記述することが大事です。私は、100サイト以上のホームページを制作してきましたが、最初はいろいろなクラス名を付けていましたが、現在ではいろいろな業種でもサイトでもほとんど同じクラス名になっています。私が付けるクラス名をご紹介いたしますので、是非参考にしてみてください。修正が大変な書き方と注意点クラス名の種類を分けるまず、クラス名といってもいろいろなところで使用すると思います。サイト全体やコンテンツ全体を囲うタグに付けたり、見出しのhタグにつけたり、spanタグの様にテキストの一部に付けたりとクラス名によってもいろいろなタグに記述します。いったクラス名をいくつかの分類に分けて、それに合わせて使うようにします。コンテンツ全体やセクションのクラス名コンテンツやセクションのクラス名は、クラス名で付けたりid名をつけたりします。そのクラス名・id名は1サイトで1つしか使わないようにします。理由としては、そのコンテンツやセクションは1サイトで同じ内容のものはないからです。今読んでいるこの記事の「クラス名の種類を分ける」というコンテンツはこのサイトに1つしかありません。いった、1サイトに1つしかない物に対しては、オリジナル名を付けます。alt="webaby"></p></div></div>付けるとすると、class-typeやcss-class01などです。固有の名前をつけます。重要なのは、分かりやすいクラス名をつけることが重要です。後々、修正などでソースコードを見てどこがどこになるかが分かりやすいように付けるようにしましょう。コンテンツ内を区切るタグどんなコンテンツでもコンテンツ量が多いとdivタグなどで区切ったりすると思います。いったタグに付けるクラス名をどんなサイトでも共通に使えるクラス名をつけます。alt="webaby"></p></div></div>私がよく使っているclass名はboxやareaなどです。オリジナル名内にあり、いくつかの内容を区切るためにdivタグで区切るときに使用します。テキスト・画像やspanタグこういったタグは1つのタグで完結するものに対してのクラス名の付け方です。alt="webaby"></p></div></div>テキストのみならクラス名はtextと付けます。画像にはimgとつけます。spanなどでテキストを装飾するなら、f-colorやf-sizeなどと付けるようにしています。ページ共通のクラス名これは、各ページの見出しやレスポンシブ用のクラス名です。class="pc"><p>パソコン時のみ表示する</p></div>上記の様に、どんなサイトでも必ずあるもの・必ず装飾するものには毎回同じクラス名をつけます。することで、複数のサイトを管理していても効率良く作業をすることができます。このようにコーディングする上で、クラス名を付けるルールをしっかりと自分で作ることで作業効率も上がり、ミスも少なくなります。ある程度、応用が効くように付けているとサイト運営をする時に、スムーズに短時間で作業をすることができます。cssの適用方法このようなページのソースコードがあるとします。alt="webaby"></p></div></div>cssでの記述はこのようにします。80%;}上記の様に、共通部分とそのコンテンツのみの指定に分けて記述することができます。コンテンツ内のcssの指定はclass-typeを指定してから他のタグやクラス名をしていすることで、その部分だけを装飾することができます。見出しや共通指定・スマホ時の表示などはサイト全体に共通することなので、そのクラス名のみに指定して装飾するようにすると、htmlを記述する際はクラス名を記入するだけで同じ装飾になります。修正が大変な書き方と注意点よく見かけたり、移転されてきたサイトで困るのが、全ページ共通の見出しなどの装飾をするときの指定が、クラス名ではなくタグに直接指定している場合です。class=”base-hx”>と記述していて、cssにbase-hxで装飾を記述しているとh3タグには影響はないですが、<h3>に直接cssで装飾していると、h3で違う装飾をする際に引き継いでしまいます。クラス名やid名を使用しないでcssで装飾をする場合は、他のページに影響がないかを確認した上で、cssで装飾を指定するようにしましょう。説明しましたが、クラス名を自分で分類し、自分でのルールを作った上でサイトを制作するようにするだけで記述内容も減りスッキリしたソースコードになります。