idセレクタ、classセレクタとは?:CSS入門

ブログが作りたい!CSS入門 > idセレクタ、classセレクタとは?:CSS入門

idセレクタ、classセレクタとは?:CSS入門

idセレクタ、classセレクタとは?:CSS入門

CSS入門(17)

そろそろ、CSSにも慣れてきたでしょうから、今回は、idセレクタ、classセレクタというワンランク上の書き方を覚えていただきたいと思います。

お話は、次の順番で進みます。

▲ページの先頭に戻る

idセレクタ、classセレクタとは?

1:今までは、どのようにしていたでしょうか?

記事「CSSの書き方:CSS入門」で、次のように書いたのは覚えていらっしゃるかしら。えぇ、そうです。「適用先」→「何を?」→「どうする?」です。

「適用先」→「何を?」→「どうする?」

この「適用先(セレクタ)」なんですけれども、今までは、みなさんどのようにしていらっしゃいましたか?

そうです。HTMLのタグを書いてきましたね。例えば、次のように、bodyとか、あるいは、h1、tableなどを書きました。

body { background-color: #ffffff; }

しかし、これが実は、HTMLタグ以外にも書くことができるのですよ。そしてそれが、idセレクタとclassセレクタという書き方なのです。

「なぜ、idセレクタとclassセレクタという書き方が必要なのか?」と疑問に感じると思いますが、理由は簡単、よりきめ細かな指定を行うために必要になるからです。

▲ページの先頭に戻る

2:idセレクタの書き方

(01)

idセレクタは、次のように書きます。適用先は、「#(いげた)+idセレクタ名」です。

#idセレクタ名 { 何を?:どうする?; }

はい、分かり難いですね。もう少し具体的に書いてみましょう。例えば、idセレクタ名を「i-name」として、marginをかける場合は次のように書きます。

#i-name { margin: 5px; }

(02)

しかし、この「#i-name」とは、何でしょう?・・・・・・えぇ、好きなように付けた名前なんですが、どこに適用されるのでしょうか?

今までは、HTMLタグが適用先でしたが、idセレクタ名を使う場合は、HTMLタグの側にも、idセレクタ名を設定してあげる必要があります。

(03)

例えば、<h1>タグに、この「#i-name」を適用したい場合は、次のように書きます。

<h1 id="i-name">~</h1>

なかなか、使ってみないとイメージし難いと思います。とりあえず、ここでは、次の2つのことを覚えておいてください。

  • idセレクタ名には、「#(いげた)」をつける。
  • HTMLタグには、「id=""」と書く。

▲ページの先頭に戻る

3:classセレクタの書き方

(01)

classセレクタは、次のように書きます。適用先は、「.(ピリオド)+classセレクタ名」です。

.classセレクタ名 { 何を?:どうする?; }

はい、またもや分かり難いですね。もう少し具体的に書いてみましょう。例えば、classセレクタ名を「c-name」として、marginをかける場合は次のように書きます。

.c-name { margin: 5px; }

(02)

しかし、この「.c-name」とは、何でしょう?・・・・・・えぇ、好きなように付けた名前なんですが、どこに適用されるのでしょうか?

今までは、HTMLタグが適用先でしたが、classセレクタ名を使う場合は、HTMLタグの側にも、classセレクタ名を設定してあげる必要があります。

(03)

例えば、<h2>タグに、この「.c-name」を適用したい場合は、次のように書きます。

<h2 class="c-name">~</h2>

なかなか、使ってみないとイメージし難いと思います。とりあえず、ここでは、次の2つのことを覚えておいてください。

  • classセレクタ名には、「.(ピリオド)」をつける。
  • HTMLタグには、「class=""」と書く。

ん?・・・何だか同じような話を繰り返していますね。

▲ページの先頭に戻る

4:idセレクタとclassセレクタの違い

さて、idセレクタも、classセレクタも同じような内容が書かれていて、これでは、idセレクタとclassセレクタの違いがまったく分からないはずです。

idセレクタとclassセレクタは、次のように使い分けます。

idセレクタ

ページに一度しか使わない場合に用いる。

classセレクタ

ページで複数回使う場合に用いる。

例えば、<h2>タグだけでなく、<table>タグにも使う場合は、classセレクタを使います。

唯一、例えば、<h1>タグにしか使わないような場合は、idセレクタを使います。

なかなかすぐには理解できないかもしれませんが、少しずつ慣れていってください。数をこなすのが一番です。

現状、たとえ間違って使っても、表示上は問題が起こりません。怖れる理由はありませんから、とにかく試してみてください。

▲ページの先頭に戻る

idセレクタを使ってみる

1:前回までのお話

(01)

前回は、font-size(%)で文字サイズを調整しました。

ブラウザ表示

以下、前回までのCSSコードです。

▲ページの先頭に戻る

2:HTMLタグの追加

(02)

例えば、背景を次のようにしたいと考えた場合、みなさんは、HTMLやCSSを使って、どのようにして実現するでしょうか。

HTMLタグを増やさないといけないので、なかなか答えを導き出すのは難しいかもしれませんが、ちょっと考えてみてください。

ブラウザ表示

(03)

記事「グループ化 【<div>タグ】」で書いた、<div>タグは覚えていらっしゃるかしら。これは、<div>タグを使って行います。

まず、グループ化を行ってみてください。見た目では、<div>タグを付けても、特に変わらないはずです。

ブラウザ表示

(04)

<div>タグは追加できたでしょうか?ちょっと、どこからどこまでをグループ化すればいいのか迷ったかもしれませんね。

「ここです」と教えられて覚えるより、自分で「あっちかな?こっちかな?」と試しながら覚える方が力になるので、試行錯誤してみてください。

頃合を見て、以下のHTMLコードを確認してみましょう。

(05)

次は、<div>タグに、idセレクタ名を付けておきましょう。それぞれ、「blog-info」、「blog-pre」と付けることにします。

▲ページの先頭に戻る

3:idセレクタにCSSを指定する

(06)

それぞれのidセレクタ「blog-info」と、「blog-pre」にCSSを指定しましょう。次の4つの指定を入れています。

色や、間隔などは、好きなようにしていただいて構わないので、作成してみてください。

(07)

CSSができたら、ブラウザで表示してみましょう。おそらく、<h2>タグに付けていたmargin-topが邪魔になるはずです。

ブラウザ表示

(08)

<h2>タグに付けていたmargin-topは、不要になったので削除しましょう。

ブラウザ表示

CSSコードは、次のようになります。

▲ページの先頭に戻る

idセレクタ名、classセレクタ名の付け方

idセレクタ名、classセレクタ名は、どのような名前でも良いというわけではありません。ルールに沿った名前にしてください。

  • 英数字や、「-(ハイフン)」で作成しましょう。
  • 特殊文字や、機種依存文字は、使わないようにしましょう。「_(アンダーバー)」も古いブラウザでは、使えない場合があります。
  • 漢字も、もちろん使えません。
  • 先頭の文字は、英字ではじめましょう。
  • 長過ぎると鬱陶しいので、端的な長さにしましょう。
  • 用途や位置が推測できる名前にしましょう。(header、navi、wrap、menu、main、entry、footerなど)
  • 小文字を推奨します。

▲ページの先頭に戻る

お詫び

実は、大変申し上げ難いのですが、記事「CSSファイルの外部読み込み」で記載していたHTMLコードに、間違いがありました。お恥ずかしい。

コピーしてお使いになっていた人は、<table>タグに余計な</tr>タグが入っているので、お手数ですが削除しておいてください。

すみませんでした。以後、気を付けます。(2008/04/27)

▲ページの先頭に戻る

次回予告

次回は、段落のインデント【text-indent】について書きます。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/04/27 更新日:2008/04/27

« 「文字サイズの変更【font-size】(2)」|「段落のインデント【text-indent】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんにちは

今日も勉強になりました。=)
id指定って確か、XHTMLでは使わないんですよねぇ?

ぼくはHTMLもCSSもブログカスタマイズ程度しかやったことないのに、最近急にHTML、XHTML、CSSをまとめて勉強しはじめたもんで、頭ん中ぐちゃぐちゃです。

KumaCrowさん、どうか、そのうちXHTML講座なんかもやって下さい。

XHTML

清音さん、こんにちは。:)

えーと、自信はないですけれども、
id属性を使わなくなるということはないような気が致します。

XHTML2.0でどうなっているのか分からないですけど。
たぶん。(・∀・;)

もしかして、name属性と混乱しているということはないかしら。
よくページ内の特定の箇所に移動するときのaリンクに
付けたりするname属性は、XHTMLで非推奨になりました。

そういうアクションは好ましくないということみたいです。

どうしても使いたい場合は、「id属性を使いましょう」
ということらしいです。

XHTMLへの移行は、それほどややこしくはなさそうです。
XHTML1.0 transitionalくらいから行えば、
それほど変わらないのではないかしら。

「Another HTML-lint」でチェックすれば、
http://openlab.ring.gr.jp/k16/htmllint/index.html

ほぼ、imgなどの「タグを閉じてね」というエラーくらいしか、
出ないような気がします。

気をつけるのは、xmlの宣言をわざと書かないとか・・・。

講座を書くほど詳しくはないんですよねー。(〃▽〃)てへ

name属性。。。

おー、そうですわ、name属性と『カンゼンに!』混乱してました。。。いや、これからも、混乱しつづけそうですが。。。。。

混乱

清音さん、こんにちは。

でもねー、最近はじめて、そこまで理解できているなんて、
すごいなぁって思うんだなぁ。

私なんか、1年以上やっていて、まだよく理解できていないもの。
みんな頭いいよねー。(T-T)ずるい

そろそろ頭がグチャグチャしてきました。

blog-infoとblog-preには
特別の意味があるのではと
悩みましたが 何でもいいのですね。
試しにatama-fでやったらOKでした。
又色もかえてみたら表示されない色が
あるとわかりました。

「わかるところまで」が
私の到達目標なのであと少しだと
思います。

急勾配

sachiさん、こんにちは。
コメントありがとうございます。

はい、blog-infoでもblog-preでも、
blog-sachiでも、何でもOKです。

んー、「atama-f」の「f」は何なんだろう・・・。(´Д`;)

「f」・・・「festival」
「f」・・・「fruits basket」
「f」・・・「flower」

あ、でもIDセレクタ名は、場所とか役割が分かるような名前が、
良いようです。

表示されない色ですか?何でしょう?どんな色だったのかしら?

おっしゃっている通り、確かにこの辺から急激に難しくなっている
かもしれないですね。

でも、ここまで来るだけでも本当にすごいですよ。
それも、あっと言う間に!(o゚ω゚o)

すべての色が表示されました。

記述ミスでした。
今夜はさまざまな色にして遊びました。

f・・・flower なんてさすがKumaCrowさんの
発想は違いますね。
強いて意味づけすればfreeだったらいいなとは
思いますが。

ホンとはfとjはキーポジションが楽だからと
いうだけです。

このぶんなら
もう少し先へ進めそうです。


肖りたい

sachiさん、こんばんは。
コメントありがとうございます。

いろいろな色を試して、
気にいった色が見付かると、楽しいですよねー。

あら、さらに先に進むのですか。すごい。
そのモチベーションは、どこからくるのかしら。肖りたい。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/283-b73a0953
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて