4

【Webデザイン基礎】idとclassの違いとCSSの書き方


CSSを勉強し始めていると、idとclassと呼ばれる箇所がたくさんでてきます。
これってなに?どうやって区別するの?と疑問を持ったままでは、
なかなか理解が進まないこともあります。
ここでしっかりidとclassを理解して、自然にどちらかを選択できるように
しておきましょう。

CSSとは

CSSとは「カスケーディングスタイルシート(Cascading Style Sheets)」の
略称で、HTMLなどの文書にスタイルを指定する言語です。
CSSがまだない時代には、HTMLで全てスタイルを指定していたため、
文書構造部分とスタイル指定の記述がごちゃごちゃしてしまい、
作成するにも修正するにも大変な手間でした。

CSSが利用されることになってから、HTMLなどの文書はそのままに、
簡単にスタイルのみ変更や修正が加えられるようになりました。
現在では、HTMLのみの文書と、スタイル指定をするCSSファイルを
別々に作るのが一般的となっています。

idとclassの使い分け

さて、CSSを書くときに、HTMLの中の「どの部分」にスタイルを当てるかを
指示することが多いですね。

もちろんHTMLのタグ自体にスタイルを当てることもできますが、
全てが全て同じスタイルとは限りませんし、同じスタイルを違うHTMLタグに
指定することもあります。

その時に使うのがidとclassです。
この2つはどっちを使ってもいいというわけではありません。
それぞれに使用する役割が違います。

idは、作成するWebページ自体に1回のみ使うことができます。
こう書くとわかりにくいかもしれませんが、よく使われるのがレイアウト構造です。

レイアウトの構造は、Webサイト全体で共通した内容が多く、
例えば2カラムのページを作る場合、
タイトルや共通する画像を挿入する「ヘッダー」や「グローバルメニュー」、

「サイド」や「メイン」、ページ下に掲載する「フッター」など、
構造の「場所」それぞれにidで名前をつけておくもの、と考えるといいでしょう。

レイアウト構造

逆にclassは、何度でも使い回しがきいて便利です。
では、classだけ使えばいいのでは?というご意見もあるかもしれませんが、
classはいろいろ設定することが多いので、どれがレイアウト構造なのか
ただのスタイル変更なのかがわかりにくくなってしまいます。

ちなみに、idはCSSのスタイルを指定するだけでなく、ページ内でリンクを
張るときやスクリプトを利用するときにも使われるため、同じ名前を使うことに
不都合があるという理由もあります。

CSSの基本的な書き方

CSSは基本的に、「セレクタ{プロパティ:値;}」という形で記述します。

cssの記述方法

セレクタは、スタイルを変更する対象を記述しますが、HTMLタグであったり、
idやclassの値(名前)を入れることができます。

プロパティには、スタイルの種類を記述します。
例えば、上の図の青い文字部分「color」は、文字の色を指定するプロパティです。
値には、プロパティで指定した種類の具体的な値を記述します。
上の図の赤い文字部分「red」は、文字の色を「赤」にするという意味です。

これを日本語の文章に当てはめると、
「ここ(セレクタで指定した対象の箇所)」の「これ(スタイルの種類)」を、
「このように(値)」変更する。
という具合に読み換えてみるとわかりやすくなります。

上の図でいえば、
「h1(見出し)」の「文字の色」を、「赤」に変更する。
となります。

idやclassをセレクタにするには

idやclassをセレクタに記述する際に注意する点は、
文頭に「#(シャープ)」をいれるか「.(ピリオド)」を入れるかの違いです。

例として、
HTML文書側で「id=”header”」と指定している箇所のCSSを記述するには
#header {~}
となります。
「class=”kyocho”」と指定している場合には
.sample { ~}
という感じに区別します。

idとclassの区別と対応

まとめ

CSSのルール自体は、それほど多くはありません。
代わりにさまざまなスタイルの変更が可能なので、プロパティの数の多さに
驚くことでしょう。

世の中にはたくさんサンプルが出回っていますので、それを真似て作って
練習しながら身につけるのが一番の早道といえそうです。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articlepaddingやborderはもう書かない!?超便利なbox-sizingの使い方