こんにちは、とおるです。
HTMLとCSSではクラスを使用しますが
HTMLとCSSのクラスって基本的なことだけど、いまいち理解しきれてない。基本から書き方まで分かりやすく知りたい！
こんな悩みを、当記事でスッキリ解決できます。
この記事では
- クラスの基本
- HTMLとCSSでの書き方
- クラス名の付け方と例
- idとの違い
まで、初心者でも分かりやすく解説しています。
クラスについて理解すれば、より効率よくコーディング出来るようになりますので、この機会にぜひ理解を深めてみて下さい。
目次
HTMLとCSSクラスの基本
まずは、クラスとはどういうものなのかを解説します。
クラスはHTMLへCSSを適用させるのに必要
クラスとは、HTMLに対してCSSを適用させるための記述です。
HTMLというのは必要最低限の骨組みなので、CSSを適用しなければ下記のように殺風景になります。
See the Pen
css-none by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.
これでは、読みづらい上にデザイン性も皆無なので、ユーザーへの配慮やアピール、信頼性に欠けます。そこで、HTMLにCSSを適応させデザイン性をアップさせるため、クラスを記述する必要があります。
下記は、先程の殺風景なHTMLにクラスを追加したものです。
See the Pen
css-plus by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.
クラスを記述することで、HTMLだけでは実現できなかったデザインが追加され、読みやすさやアピール度、信頼性等がアップします。
次は、HTMLとCSSでのクラスの書き方を、それぞれ解説していきます。
HTMLとCSSのクラスの書き方
HTMLとCSSでは、記述方法が異なります。とは言っても、よく使いますし複雑ではないので、サクッと覚えてしまいましょう。
HTMLのクラスの書き方
|
1 |
<p class="クラス名" >このように記述する</p> |
「p」の後に「半角スペース」を入れて「class=”クラス名”」を記述することで、CSSからクラスを呼び出すことができます。
クラスは複数適応させられる
|
1 |
<p class="クラス名1 クラス名2"></p> |
HTMLではクラス名を半角スペースで挟むことにより、一つの要素に複数適用させることができます。
CSSのクラスの書き方
|
1 2 3 |
.クラス名 { 適用させたいCSSを記述 } |
「.」の後にクラス名を書いて「{}」で囲い、その中にCSSを記述することで、CSSを適用させることができます。
次は、初心者が迷いがちなクラス名の付け方と、よく使われるクラス名の例をご紹介します。
HTMLとCSSのクラス名の付け方と例
クラス名は基本的に自由に付けることができます。自由なだけに初心者の方は「なんて付けようか・・・」なんて迷ってしまうこともしばしば。
クラス名で時間を取られないように、基本的な記述ルールや付ける際のポイント、よく使われる例を挙げてみましたので参考にしてみて下さい。
クラス名の基本ルール
クラス名を付ける時には、下記のようなルールがあるので覚えておきましょう。
HTMLとCSS共通のルール
文字の大小の区別があること
CSSのみのルール
- 数字や記号ではなく最初の文字はアルファベット
- 使用可能な文字は「半角英数字」「-（ハイフン）」「_（アンダーバー）」
（アンダーバーは一部の古いブラウザでは認識されない）
クラス名を付ける時のポイント
クラス名を付けるポイントは「シンプルで分かりやすい」名前がオススメです。一般的には、英単語や熟語等を用いることが多いです。
例を上げると、下記のようなクラス名がシンプルで分かりやすいです。
|
1 2 3 |
<div class="box">シンプルで分かりやすいクラス名</div> <p class="text">シンプルで分かりやすいクラス名</p> <h2 class="top-title">シンプルで分かりやすいクラス名</h2> |
ちなみに、「top-title」クラスのように、どの部分（topなど）にクラスが使われているか、という場所の表現も入れると、より分かりやすいクラス名になります。
よく使われるクラス名の例
一般的によく使われるクラス名の例をご紹介しますので、参考にしてみて下さい。
- container・・・ページ全体
- wrapper（wrap）・・・containerの類義語
- section・・・セクション（文章やコンテンツ等のエリア）
- inner・・・内側
- box・・・箱
- area・・・範囲
- logo・・・ロゴ
- navigation（nav）・・・ナビゲーション
- header・・・ヘッダー
- footer・・・フッター
- top・・・上部コンテンツ
- bottom・・・下部コンテンツ
- home・・・トップページ
- main・・・メインコンテンツ
- sub・・・サブコンテンツ
- content・・・文章等の部分的コンテンツ
- sideBar（side）・・・サイドバー
- lead・・・リード文
- article・・・記事
- post・・・投稿
- next・・・次へ
- prev・・・前へ
- info・・・お知らせ
- list・・・リスト
- menu・・・メニュー
- item・・・項目
- news・・・ニュース
- image（img）・・・画像
- link・・・リンク（アンカーテキスト）
- label・・・ラベル
- button（btn）・・・ボタン
- map・・・地図
- access・・・交通手段
- contact・・・お問い合わせ
- form・・・送信フォーム
- submit・・・送信ボタン
- copyright・・・コピーライト
ちなみに、ここで挙げたクラス名はよく使われますが、この表記でなければいけないという訳ではありません。状況に合ったクラス名を付けましょう。
次は、初心者が混乱しがちでクラスに似ている「id」について、分かりやすく解説していきます。
HTMLとCSSのクラスとidとの違いや使い分け
クラス名と似たようなものに「id」があります。特に初心者の方は「何がどう違うの？？」と混乱する事があると思います。ここでは、違いと使い分けについて解説します。
クラスとidの違い
クラスとidは、どちらもCSSでスタイルを当てることができますが、違いは以下のとおりです。
- クラス・・・「.（ドット）」の後にクラス名を記述。ページ内で複数使える
- id・・・「#（シャープ）」の後にid名を記述。ページ内で1度しか使えない
記述方法と使用回数が大きな違いとなります。
クラスとidの使い分けについて
結論を言えば「クラスだけで統一しても問題はない」です。1度しか使えないidを使わなくても、専用のクラスを作って使えばいいだけの話ですから。それに、クラスとidの使い分けは、慣れないとなかなか難しいのが現状です。
では、クラスとidを使い分けている方は、なぜそうしているのか理由を見てみると
クラスが数百レベルになると、管理するのが大変だからidも程よく使って分かりやすくしている
1度しか使わない部分を特定しやすくなるから使っている
など様々です。
ですから、上記のような理由が理解できない方は無理に使い分ける必要はないので、全てクラスで記述したほうが無難です。
まとめ
今回は、HTMLとCSSのクラスの基本的な部分や書き方について、初心者の方でも分かりやすいように解説しました。
クラスは、HTMLに対してCSSを適用するのに必要であり、書き方やクラス名の付け方等をしっかりと理解しておけば、効率よくコーディング出来るようになります。
さらに、クラスと似た効果を持つidとの違いや使い分けについても覚えておくことで、よりクラスに対する理解が深まります。
当記事で、HTMLとCSSのクラスについて、少しでも理解が深まったのであれば幸いです。
