ホーム お問合せはこちらから ページのトップへ戻る

新潟のホームページ制作会社・ワードプレスでウェブサイトを製作するドコドア
お問合せはこちらから お電話でのお問い合わせは0120-66-0209まで

SEOブログ

スタッフブログ

52 IDセレクタ

2014.5.23

html52

IDセレクタとは?

IDセレクタは、HTMLファイルの中の1個の要素だけに限定してスタイルを適用させたい時に使用するセレクタです。

IDセレクタは、シャープ(#)ID名の組み合わせで記述します。ID名の命名規則はクラス名と一緒で、使用出来る文字は、大文字アルファベット(A〜Z)、小文字アルファベット(a〜z)、数字(0〜9)、ハイフン(-)、アンダースコア(_)です。大文字と小文字は区別され、数字とハイフンは先頭の文字には使用出来ません。

    html52-1

要素にid属性でID名をつける

IDセレクタでスタイルを適用させたい要素には、id属性を使ってID名をつけます。id属性は開始タグの中に記述します。

    html52-2

例えば、IDセレクタを「footer」と指定すると、id属性で「footer」というID名を指定した要素にスタイルが適用されます。

実際にソースコードを記述すると以下のようになります。ここではdiv要素の1つにid属性を使用して「footer」というID名をつけてスタイルを適用させてみます。

CSS
#footer {
border-top : solid 1px black;
padding-top : 0.2em;
}

HTML
<h1>●●●</h1>
<p>■■■</p>
<div id=”footer”>▲▲▲</div>

これでCSSのファイルとHTMLファイルを上書き保存してブラウザで表示すると、ID名をつけたdiv要素の上に罫線が表示されます。

IDセレクタの注意点

クラスセレクタとIDセレクタは使い方が似ていますが、IDセレクタには一緒に使うID名に次のような利用制限があります。

  • 1つの要素には、ID名は1つしか指定出来ない。
  • 1つのHTMLファイル内では、同じID名をくり返して使用出来ない。

つまり1つのID名は、1つのWebページ内に1回しか使用出来ないということです。ここがクラス名と違う点です。逆にクラス名は、同じWebページ内に何回でも使用ができ、1つの要素に複数のクラス名を指定する事ができます。

このページのまとめ

  • IDセレクタを使用する事で、HTMLファイルの中の1個の要素だけに限定してスタイルを適用することができる。
  • スタイルを適用させたい要素に、id属性を使ってID名をつける。命名規則はクラス名と同じ。
  • クラス名と違って、ID名には1つのWebページ内で1回しか使用出来ない。
主にコーディング作業や納品後の更新作業を担当しています。デザイン業務もちょこちょこやってます。PHPやらJQueryの勉強中。
>清野哲郎のプロフィールを見る

お問合せメールフォーム

このページがあなたにとって役に立ったと感じたら下のボタンから共有をよろしくお願いします。

WORKS

制作事例一覧を見る
  • case72i
  • case89i
  • case107i
  • case108i
  • case88i
  • case98i
  • case109i
  • case106i
  • case104i
  • case103i
  • case102i
  • case100i
  • case99i
  • case96i
  • case105i
  • case86i
  • Ciel02
  • case22_1
  • toiro
  • case80i
  • case79i
  • case78i
  • case06-2i
  • case76i
  • case74i
  • case73i
  • case97i
  • スクリーンショット 2016-04-05 18.41.36
  • case90i
  • case82i
  • case87i
  • case71アイキャッチ
  • 国際大学
  • case84i
  • dejimo0
  • case65アイキャッチ
  • kirin_hanbai
  • case67アイキャッチ
  • case75i
  • flowerhome0
  • keiwa
  • greenstyle0
  • case57_1
  • case92i
  • case56_2
  • case54_2
  • case52_1
  • case51-1
  • case49-1
  • joywood0
  • koshiji0
  • case59_1
  • 上越どんぶり巡り様
  • yu
  • 無添加住宅
  • neal
  • hukuhuku1
  • sasa-t
  • shinoda
トップへ戻るボタン

WORKS

led node2 neal
新潟のホームページ制作・Webデザイン製作のドコドア

本 社 新潟県三条市土場1-5 tel 0120-66-0209
新潟オフィス 新潟市中央区天神1-1 プラーカ3 2F
東京オフィス 渋谷区道玄坂1-12-1 渋谷マークシティW22F