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

公開日：2019/10/10

#css #HTML

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

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

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

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

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

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

クラス名の種類を分ける

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

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

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

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

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

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

<div class="オリジナル名">
	<div>
		<p>ここにコンテンツのテキストが入ります</p>
		<p><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
	<div>
		<p>ここにコンテンツのテキストが入ります</p>
		<p><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
</div>

<div>

<p>ここにコンテンツのテキストが入ります</p>

</div>

<div>

<p>ここにコンテンツのテキストが入ります</p>

</div>

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

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

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

<div>
	<div calss="共通名">
		<p>ここにコンテンツのテキストが入ります</p>
		<p><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
	<div calss="共通名">
		<p>ここにコンテンツのテキストが入ります</p>
		<p><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
</div>

<div>

<p>ここにコンテンツのテキストが入ります</p>

</div>

<p>ここにコンテンツのテキストが入ります</p>

</div>

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

テキスト・画像やspanタグ

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

<div>
	<div>
		<p calss="text">ここにコンテンツのテキストが入ります</p>
		<p calss="img"><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
	<div>
		<p calss="text">ここにコンテンツのテキストが入ります</p>
		<p calss="img"><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
</div>

<div>

<p calss="text">ここにコンテンツのテキストが入ります</p>

</div>

<div>

<p calss="text">ここにコンテンツのテキストが入ります</p>

</div>

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

ページ共通のクラス名

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

<h2 class="main-hx">ページ見出し</h2>
<h3 class="base-hx">コンテンツ見出し</h3>
<h4 class="sub-hx">コンテンツの小見出し</h4>

<div class="sp">
	<p>スマホ時のみ表示する</p>
</div>
<div class="pc">
	<p>パソコン時のみ表示する</p>
</div>

<h2 class="main-hx">ページ見出し</h2>

<h3 class="base-hx">コンテンツ見出し</h3>

<h4 class="sub-hx">コンテンツの小見出し</h4>

<p>スマホ時のみ表示する</p>

</div>

<p>パソコン時のみ表示する</p>

</div>

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

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

cssの適用方法

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

<h2 class="main-hx">ページ見出し</h2>

<div class="class-type">
	<h3 class="base-hx">コンテンツ見出し</h3>
	<p calss="text">ここにコンテンツのテキストが入ります</p>
	<div class="box sp">
		<h4 class="sub-hx">コンテンツの小見出し</h4>
		<p calss="text">ここにコンテンツのテキストが入ります</p>
		<p calss="img"><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
	<div class="box pc">
		<h4 class="sub-hx">コンテンツの小見出し</h4>
		<p calss="text">ここにコンテンツのテキストが入ります</p>
		<p calss="img"><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
	<div class="area">
		<h4 class="sub-hx">コンテンツの小見出し</h4>
		<p calss="text">ここにコンテンツのテキストが入ります</p>
		<p calss="img"><img src="./img/common/logo.png" alt="webaby"></p>
	</div>
</div>

<h2 class="main-hx">ページ見出し</h2>

<h3 class="base-hx">コンテンツ見出し</h3>

<p calss="text">ここにコンテンツのテキストが入ります</p>

<h4 class="sub-hx">コンテンツの小見出し</h4>

<p calss="text">ここにコンテンツのテキストが入ります</p>

</div>

<h4 class="sub-hx">コンテンツの小見出し</h4>

<p calss="text">ここにコンテンツのテキストが入ります</p>

</div>

<h4 class="sub-hx">コンテンツの小見出し</h4>

<p calss="text">ここにコンテンツのテキストが入ります</p>

</div>

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

/*----- 見出し -----*/
.main-hx {
  font-size: 26px;
  font-weight: bold;
  color: #095690;
  background-color: #d4eafb;
  border-bottom: 3px solid #0068b7;
  border-radius: 10px 10px 0 0;
  padding: 25px 3% 25px;
  margin-bottom: 45px;
}
.base-hx {
  background-color: #f9f1b4;
  color: #551c00;
  padding: 14px 2% 12px 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 25px;
}
.sub-hx {
  color: #ff3100;
  font-size: 18px;
  font-weight: bold;
  background-color: #fffb95;
  border-left: 4px solid #ff9900;
  border-bottom: 1px dotted #ff9900;
  padding: 12px 5px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/*----- 各デバイス 表示&非表示 -----*/
.sp {
  display: none;
}
.pc {
  display: block;
}

/*----- 共通指定 -----*/
.text {
  line-height: 1.4;
  margin-bottom: 1em;
  font-size: 15px;
}

/*----- コンテンツ内 -----*/
.class-type {
}
.class-type .area {
    margin-bottom: 35px;
}
.class-type .area .text {
  font-size: 18px;
    text-align: center;
}
.class-type .area .img {
    width: 80%;
}

/*----- 見出し -----*/

.main-hx {

font-size: 26px;

font-weight: bold;

color: #095690;

background-color: #d4eafb;

border-bottom: 3px solid #0068b7;

border-radius: 10px 10px 0 0;

padding: 25px 3% 25px;

margin-bottom: 45px;

}

.base-hx {

background-color: #f9f1b4;

color: #551c00;

padding: 14px 2% 12px 0;

font-size: 17px;

font-weight: bold;

line-height: 1.2;

margin-bottom: 25px;

}

.sub-hx {

color: #ff3100;

font-size: 18px;

font-weight: bold;

background-color: #fffb95;

border-left: 4px solid #ff9900;

border-bottom: 1px dotted #ff9900;

padding: 12px 5px;

margin-bottom: 10px;

line-height: 1.4;

}

/*----- 各デバイス表示&非表示 -----*/

.sp {

display: none;

}

.pc {

display: block;

}

/*----- 共通指定 -----*/

.text {

line-height: 1.4;

margin-bottom: 1em;

font-size: 15px;

}

/*----- コンテンツ内 -----*/

.class-type {

}

.class-type .area {

margin-bottom: 35px;

}

.class-type .area .text {

font-size: 18px;

text-align: center;

}

.class-type .area .img {

width: 80%;

}

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

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

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

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

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

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

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

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

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