雑学

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

この記事ではCSSの「.(ドット)」と「#(シャープ)」の違いについて見ていきます。
Web制作の基本はHTLMとCSSの組み合わせです。特にCSSはデザインに大きく関わってくる重要な部分ですが、使い方が少しわかりづらいところもある。この記事では具体的な使い方も含めて現役システムエンジニアのよーいずみと一緒に解説していきます。

ライター/よーいずみ

某大手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と役割分担することが推奨されています

CSSの特徴

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

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

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

image by iStockphoto

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

\次のページで「id属性とは」を解説!/

次のページを読む
1 2 3 4
Share: