簡単でわかりやすい！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でデザインを決める。あくまで本体はHTMLと意識しておくことが大事だ。
HTMLの属性とCSSのセレクタについて
image by iStockphoto
ここからはさらに一歩踏み込み、今回のテーマに必要となる属性とセレクタについて解説していきます。HTMLとCSSの関係性は属性とセレクタの関係と言ってもいいくらい重要なポイントなので、しっかり理解していきましょう。
＼次のページで「id属性とは」を解説！／
おすすめの記事
Related Posts
