CSS/ID属性の使い方サンプル

ID属性を使って値を指定する方法†

以下のようにCSSを設定すればid属性として値を指定する事ができます。

#ID { ... }

要素名#ID { .... }

以下、CSSのサンプルを使って説明します。

ID属性を使って値を指定する方法
#ID { ... } を試す
要素#ID { ... } を試す

↑

#ID { ... } を試す†

以下、CSSのサンプルソースとHTMLのサンプルソースで説明します。
ID sample1 は、白文字にブルーのバックグラウンドを指定。
ID sample2 は、白文字にレッドのバックグラウンドを指定。

↑

CSSソース†

id1.css

#sample1 {
  color: white;
  background: blue;
}
#sample2 {
  color: white;
  background: red;
}

↑

HTMLソース†

上記、IDを指定したCSSをh1で使用した例になります。

id1.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>CSS ID TEST</title>
    <link rel="stylesheet" type="text/css" href="id1.css" />
  </head>
  <body>
    <h1 id="sample1">#sample1</h1>
    <h1 id="sample2">#sample2</h1>
  </body>
</html>

↑

確認用URL†

以下のリンクから上記のCSSおよびHTMLによるブラウザ表示を確認できます。

http://web.just4fun.biz/css/3/id1.html

↑

スクリーンショット†

↑

要素#ID { ... } を試す†

要素#IDのサンプルを以下に記します。
div#header, div#container, div#contents, div#footerを設定しています。

↑

CSSソース†

id2.css

div#header {
  color: white;
  background: blue;
  height: 50px;
}
div#container {
  background: gray;
}
div#contents {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 50px;
  margin-left: 50px;
  background: white;
}
div#footer {
  color: white;
  background: red;
  text-align: center;
}

↑

HTMLソース†

id2.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>CSS ID TEST</title>
    <link rel="stylesheet" type="text/css" href="id2.css" />
  </head>
  <body>
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="contents">
      contents
    </div>
  </div>
  <div id="footer">
    footer
  </div>
  </body>
</html>

↑