簡単でわかりやすい！CSSの「.（ドット）」と「#（シャープ）」の違いとは？Web制作の基本を現役システムエンジニアが詳しく解説

ライター／よーいずみ

某大手IT企業に10年以上勤務している現役システムエンジニア。知識と経験に裏付けられた、わかりやすいIT関連の情報をお届け。

Web制作の基本となるHTMLとCSSをおさらい

image by iStockphoto

今回のテーマであるCSSを語る上で、HTMLは切っても切り離せません。そのため、まずはHTMLとCSSの関係性を解説し、併せてCSSの特徴をおさらいしましょう。

HTMLとCSSの関係

普段から皆さんが見ているWebサイト、それらはすべてHTML（Hyper Text Markup Language）という言語で作られています。このHTMLは主にページを構成したり、情報要素を埋め込んだりすることがメインであり、デザイン性には長けていません。

そこで登場するのがCSS（Cascading Style Sheet）です。CSSは文字色やサイズ、レイアウトなどデザインを定義することに長けており、ページの構造はHTML、デザインはCSSと役割分担することが推奨されています。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

HTML5とXHTMLの違いとは？HTMLの歴史やXMLとの関係までプログラマーがわかりやすく解説

CSSの特徴

CSSは文字色やサイズなどのレイアウト全般を担います。ページごとに文字色やレイアウトについて、共通のデザインとするところもあれば一意で決めたいところも出てきますが、CSSは範囲を指定してデザインを適用することができるため、都度ページごとにデザインを定義する必要がありません。

また、もう一つの特徴としてCSSはHTMLとは別ファイル（外部ファイル）に定義することができ、ファイルを構造的に管理することができるため、メンテナンス時のバグ埋め込みを抑止する効果もあります。

HTMLの属性とCSSのセレクタについて

image by iStockphoto

ここからはさらに一歩踏み込み、今回のテーマに必要となる属性とセレクタについて解説していきます。HTMLとCSSの関係性は属性とセレクタの関係と言ってもいいくらい重要なポイントなので、しっかり理解していきましょう。

id属性とは

id属性とは、HTML1ページにつき1つのみ付与でき、ページ内で固有の情報要素として扱います。よくある記述例としてはpやdivタグを使ってページの構造を定義するWebページ構成において、ヘッダーやサイドバーなどのパーツを区別する際に使用します。

記述例
<div id="main">〜〜〜</div>
<div id="about">〜〜〜</div>

「id=」の後に記述するid名はいわゆる固有名詞のようなイメージで、ページ内で一度しか使用できません。ブラウザによっては複数回使用しても区別してくれることがありますが、HTMLの記述としてはNGです。レイアウト崩れやバグの原因になりますので、注意して付与しましょう。

CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

class属性とは

class属性とは、HTML1ページにつき複数付与でき、ページ内で情報要素を種別や分類で分けて扱います。記述例としてはボタンや写真、リンクなど様々なパーツをグルーピングする際に使用します。

記述例
<a class="itemPage" href="item1.html">〜〜〜</a>
<a class="itemPage" href="item2.html">〜〜〜</a>

「class=」の後に記述するclass名はページ内で複数回使用しても問題ありません。例えばボタンや写真は1ページ内に複数存在することが多く、それらを「ボタン」や「写真」として分類するには複数回使用します。

セレクタとは

id属性とclass属性を解説してきましたが、それらの属性をCSSから特定するために用いるのがセレクタです。セレクタを用いることで、CSSで定義した文字色やレイアウトを属性ごとに指定して適用することができ、HTMLとCSSが紐付けられることで初めてWebページが完成します。

CSSのセレクタ「.（ドット）」と「#（シャープ）」の違いと使い方

image by iStockphoto

属性とセレクタの関係性が理解できたら、いよいよセレクタ「.（ドット）」と「#（シャープ）」の解説です。セレクタの中でも代表的なこの2つを理解することで、Web制作の現場にも活かすことができるので、使い方も含めてわかりやすく解説していきます。

「.（ドット）」は複数範囲がターゲット

「.（ドット）」はclassセレクタと呼ばれ、HTMLのclass属性に対するセレクタです。そしてclass属性はHTMLのページ内で複数箇所に付与することができるため、「.（ドット）」セレクタを用いることで対象のclass名が付与された複数箇所へ一括でデザインが適用されます。

記述例
【HTML】
<a class="itemPage" href="item1.html">〜〜〜</a>
<a class="itemPage" href="item2.html">〜〜〜</a>

【CSS】
.itemPage {
　　〜〜〜〜ここにデザインを記述〜〜〜〜
}

CSSの記述方法は「.（ドット）」の後方にclass名を記述し、中括弧内にデザインの内容を定義。記述例の場合で言えばHTML側にある2箇所のaタグいずれも「itemPage」というclass名が付与されているため、CSSの「.itemPage」で定義したデザインが2箇所に適用されます。

「#（シャープ）」は1つのみがターゲット

「#（シャープ）」はidセレクタと呼ばれ、HTMLのid属性に対するセレクタです。id属性はHTMLのページ内で1箇所のみに付与することができるため、「#（シャープ）」セレクタを用いることで対象のid名が付与された特定の場所へピンポイントでデザインが適用されます。

記述例
【HTML】
<div id="main">〜〜〜</div>
<div id="about">〜〜〜</div>

【CSS】
#main {
　　〜〜〜〜ここにデザインを記述〜〜〜〜
}
#about {
　　〜〜〜〜ここにデザインを記述〜〜〜〜
}

CSSの記述方法は「#（シャープ）」の後方にid名を記述し中括弧内にデザインの内容を定義。記述例の場合で言えばHTML側のdivタグにはそれぞれ「main」「about」というid名画付与されているため、CSSの「#main」「#about」で定義したデザインがそれぞれ対応して適用されます。