【 CSS 】classを指定して効率的にコーディングする方法を解説

2022.11.08
classを指定して効率的にコーディングする方法を解説

classはコーディングを行う際、非常に重要な意味を持ちます。HTMLとCSSの詳細を紐づけるものだからです。

classを上手に指定することによって、記載するCSSは短くなり、スムーズなコーディングが可能になります。

初心者のうちからマスターできれば、コーディングスピードを上げることも可能です。

この記事では、classの使い方を詳しく解説しているので、ぜひ参考にしてください。

記事の後半では、コーディングスピードを上げるclassの使い方も解説していますので、最後までご覧ください。

HTML、CSSにおけるclassとは

classとは、HTMLの要素につけられる名前のようなものです。以下のように記述します。

HTML
<p>サンプル</p>
<p class=”sample”>サンプル</p>

二つ目のp要素に、sampleというclassを割り当てました。これでclass名を割り当てられたp要素が、他のp要素と違うという識別ができるようになります。なお、class名は任意で決めることができます。

この識別が使われるのが、CSSを使用するときです。

例えば、p要素にCSSを指定するには以下のような記述を行います。

CSS
p {
font-size:16px;
}

これで、p要素のテキストの大きさが、16ピクセルになります。これは、対象となるHTMLに記載しているすべてのp要素を指定するという記述法です。

全体を管理するには便利ですが、特定の箇所だけを操作するということができません。

特定の箇所だけ見た目を変更したいときに使うのが、classです。

CSS
.sample {
font-size:16px;
}

これでsampleというclassが割り当てられた要素のテキストのサイズだけが、16ピクセルになります。

意図した要素だけに、ピンポイントでスタイルを指定できるのです。

CSSでクラスを指定する時には、クラス名の前にドット「.」を記述します。

HTML側とCSS側のクラス名が1文字でも違っていたら機能しないので、スペルミスには注意しましょう。

classとIDとの違い

classと似たものにIDがあります。以下のように記述します。

HTML
<p id=”sample”>サンプル</p>
CSS
#sample {
font-size:16px;
}

classとIDの記述法はかなり似通っています。classとIDの決定的な違いは、IDは原則として1つのページに一度しか指定できないということです。

それに対してclassは、同じものを1つのページに何度も指定することができます。同じCSSの記述を繰り返し使うことができるので、効率的にコードを記述することが可能です。

ここから先はclassを効率よく使う方法を解説していきます。

命名規則を確立する

class名は任意で決めるものです。記号や最初に数字を使えないなどの制限はありますが、基本的にどんな文字列を使用するのも命名者の自由です。

しかし、あまり考えもせず命名していると、後からどんな内容のclassなのか分からなくなってしまいます。

例えば「a」、「b」、「c」というようにclassを作った順番に命名していては、それがどのような意図で作られたclassなのか分からなくなります。

class名を見ただけで、それがどんなclassなのか分かるように命名するのがおすすめです。

例えば「header」というclass名ならば、ヘッダーに関わるclassだということがすぐに分かるでしょう。

単語を繋げても分かりやすくなります。「header-nav」であればヘッダーのナビゲーションに関わるclassであることが、一目瞭然です。

HTMLの要素名と関連させるのもよいでしょう。「section-inner」であればsectionタグの内側に使用するclassだということが、すぐに分かります。

ひとつひとつを分かりやすくするだけでなく、一貫性を持たせることも大切です。例えばボタンは、そのまま記述すると「button」ですが、「btn」と略されることも多々あります。

class名の指定は自由に出来るので、どちらでも間違いではありませんが、2つの記述が混在しているという状態は好ましくありません。特定の要素を示す記述は、統一するように心がけましょう。

このように最初の段階でclassの命名の規則性を意識しておくと、個々の命名で迷うことがなくなるし、後からの管理や修正も楽になります。

大規模なサイトで複数名が制作に関わるといった場合は、ルールがしっかりと策定されているということも珍しくありません。その場合、これから紹介するような命名規則が用いられることがあります。一般的に広く知られているので、誰が見ても分かりやすく、CSSの可読性を高めることができます。

キャメルケース

「SectionInner」というように、単語の先頭を大文字にする記述法がキャメルケースです。2つの単語の先頭が大文字になっているのは、アッパーキャメルケース、もしくはパスカルケースと呼びます。「sectionInner」というように最初の単語を小文字にする記述法は、ローワーキャメルケースです。

スネークケース

「section_inner」というように、単語と単語の間をアンダーバー(_)で繋ぐ記述法です。

ケバブケース

「section-inner」というように、単語と単語の間をハイフン(-)で繋ぐ記述法です。

子孫セレクタを使う

セレクタを半角スペースで区切り、複数記述すると要素の中の要素というように詳細な指定が可能になります。

HTML
<section>
<div class=”section-inner”>サンプル</div>
</section>
CSS
section .section-inner {
padding:10px;
}

上記は、section要素の中にあるclass「section-inner」に10ピクセルの余白を設けるという記述です。

HTML
<div class=”section-inner”>サンプル</div>

このように、section要素の中になければ、class名が一致していてもCSSは適用されません。〇〇の中にある××というように厳密な指定が可能なのです。

これが便利なのが、サイトの規模が大きいときです。classが増えてくると、気を付けていても同じclass名をつけてしまうことがあるかもしれません。

例えば「li-item」という名前を2回使ってしまったとします。子孫セレクタを用いずに記述すると、どちらのCSSでも適用されてしまいます。しかし、section要素の中の「li-item」、aside要素の中の「li-item」といったように詳細な指定をしておけば、意図したCSSだけが適用され、表示がおかしくなることはありません。

同じスタイルを記述するclassをまとめる

CSSを効率的に記述するために、可能な限りコードを短くするということは大切です。長大なCSSは、どこに何が書いてあるのか分かりにくくなってしまいます。

コードを短くしたいときに便利なのが、同じスタイルを効かせたいclassを一挙に記述するという方法です。

CSS
.section-inner , .aside-inner {
padding:10px;
}

class名とclass名をコロン(,)で区切りました。これで「ection-inner」と「aside-inner」という2つのclassに10ピクセルの余白というスタイルが適用されます。コロンが無いと、前述の子孫セレクタになってしまうので気を付けてください。同時に指定できるclassの数に、制限はありません。大規模なサイトで、似たような要素が多いときなどに重宝します。

コメントアウトを使う

CSSファイルの中で「/*」と「*/」の間に書かれた内容はソースコードとして認識されなくなります。HTMLの「<!–」と「–>」の間に書かれた内容と同じです。

何を書いても表示には一切影響がないので、CSSの説明やメモ代わりによく使われています。

CSS
/*ヘッダーのCSS*/
 
/*コンテンツのCSS*/
 
/*フッターのCSS*/

このような説明を記述し、それぞれの下にヘッダー、コンテンツ、フッターに関するCSSを記述していけば、コードが格段に分かりやすくなるでしょう。整理されたCSSの記述はコーディングのスピードが上がるだけでなく、後からの管理や修正の効率も、格段に向上します。記述を追加する場合も、単純に一番下に記述するのではなく、該当のパーツの箇所に挿入することになるので、体裁が崩れず、可読性を保ちやすくなります。

いつ行った作業なのかを、メモしておくのもよいでしょう。

CSS
/*xxxx年xx月xx日 レイアウト改修*/

このように書いておくことで、そのCSSがどのような意図をもって記述されたのか分かりやすくなり、その後の運用で不要であると判断された場合は、迷いなく消すことができます。

汎用性の高いclassを作成する

classが同じページ内で何度も使用できるというのは、前述の通りです。同じclassを使いまわせるのであれば、classを作成する手間が省けるし、コードが分かりやすくもなるでしょう。

なんども使いそうなスタイルがあれば、あらかじめclassを作成しておくと便利です。

例えば、要素の下に10ピクセルの余白が何度も挿入されるページがあったとします。

CSS
.mb10 {
margin-bottom:10px;
}

このように、10ピクセルの余白のためのclassを作っておけば、すぐに使えて便利です。

CSS
.mb10 {
margin-bottom:10px;
}
.mb15 {
margin-bottom:15px;
}
.mb20 {
margin-bottom:20px;
}

余白の幅がまちまちの場合は、数値を細かく刻んでいくつかのclassを用意しておくのもよいでしょう。

CSSにおけるclassの指定方法:まとめ

HTML、CSSにおけるclassについての効率的なコーディング方法について解説してきました。

重要なのは、分かりやすさと正確性です。ウェブサイトは公開したら終わりではありません。その後も、管理修正があります。

いつ見ても、誰が見ても作業がしやすいコード記述を心掛けてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2023 WEBCAMP MEDIA Powered by AFFINGER5