ホームページ作成/HTML・スタイルシート(CSS)の基礎

スタイルシートを使いにくくするクラス名(3ページ目)

せっかくのスタイルシートのメリットを失わせてしまう書き方をしていませんか? クラス名の付け方次第で、スタイルシートをうまく活用できるか、無駄にしてしまうかが決まります。どんな名称がマズいのでしょうか?

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

スタイルシートのメリットを活かせるクラス名とは?

どのようなクラス名なら、スタイルシートのメリットを失わずに済むでしょうか?
それは、

デザイン内容ではなく、用途をクラス名にする。

ということです。

「文字サイズを小さくしたい」場合、「なぜ、文字サイズを小さくしたいのか?」を考えてみて下さい。 すると、「補足説明のため」、「図のキャプションのため」、「ナビゲーションリンクのため」など、様々な理由(用途)が思いつくはずです。

そして、その「用途」をクラス名にします。例えば、次のような感じです。

/* 補足説明 */
p.note {
   font-size: 80%;
}
/* 図のキャプション */
p.caption {
   font-size: 80%;
}
/* ナビゲーションリンクのため */
p.navi {
   font-size: 80%;
}

「smallクラス」という1つのクラスでまとめていたときより記述量が増えていますが、 こう記述しておけば、前ページまでにご紹介したデメリットはなくなります。

例えば、「補足説明は、文字を小さくした上で緑色で表示したい。」と思った場合は、次のように記述することになるでしょう。

/* 補足説明 */
p.note {
   font-size: 80%;
   color: green;
}
/* 図のキャプション */
p.caption {
   font-size: 80%;
}
/* ナビゲーションリンクのため */
p.navi {
   font-size: 80%;
}

こうすると、同じように文字を小さくしている箇所でも、「図のキャプション」や「ナビゲーションリンク」のデザインは当然変わりません。

さらに、「キャプションの上の余白を詰めたい」・「リンク文字はもう少し大きくしたい」という場合でも、 次のようにスタイルシートを書き換えるだけで実現できます。 HTMLを書き換える必要はないので、スタイルシートのメリットが活かされています。

/* 補足説明 */
p.note {
   font-size: 80%;
   color: green;
}
/* 図のキャプション */
p.caption {
   font-size: 80%;
   margin-top: 0.3em;
}
/* ナビゲーションリンクのため */
p.navi {
   font-size: 95%;
}

このように、スタイルの「用途」をクラス名にしておけば、前ページでご紹介したようにスタイルシートのメリットを失ってしまうことはありません。 また、新しくHTMLを記述する際にも、どのクラスを使えばいいのかが分かりやすくなります。

スタイルシートのメリットは、HTMLにデザインを含まずに済むこと

スタイルシートを使うメリットは何でしょうか。
スタイルシートは、HTMLで実現できる以上の様々な装飾を施すことができます。 しかし、最も重要なメリットは、HTMLからデザインを分離できることです。
それによって、

  • HTMLが構造だけを表現するシンプルなものになる
  • HTMLを修正することなく、デザインを変えられる

といったメリットが得られるわけです。

クラス名に small や green などのデザイン的な名称を使ってしまうと、 HTML中に「 class="small" 」や「 class="green" 」などのデザイン名を記述することになります。 つまり、HTMLからデザインを分離できていないことになりますね。
これでは、スタイルシートのメリットが失われてしまうのです。

おわりに

今回ご紹介したように、クラス名にデザイン的な名称を使っているサイトは、かなりたくさんあります。
特に、デザインを考えつつHTMLを記述していると、ついついそうなってしまうのでしょう。 気持ちはよく分かるのですが、後々のデザイン変更やメンテナンスを考え、スタイルシートのメリットを最大限に活かすには、 クラス名にはデザイン的な名称を使わないよう意識することが大切です。

HTMLとスタイルシートを同時に記述していく場合でも、デザインではなく、構造を意識して記述していくとよいでしょう。 「どんなデザインにするか?」ではなく、「そこで何を表すのか?」を考えると、うまくスタイルシートを活用できます。

関連記事:

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます