このエントリーをはてなブックマークに追加


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

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

#ID { ... }
要素名#ID { .... }

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


スポンサーリンク

#ID { ... } を試す

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

CSSソース

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

HTMLソース

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

<?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

スクリーンショット

id1.gif

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

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

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ソース

<?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>

確認用URL

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

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

スクリーンショット

id2.gif

スポンサーリンク

添付ファイル: fileid2.css 139件 [詳細] fileid2.html 181件 [詳細] fileid2.gif 142件 [詳細] fileid1.html 220件 [詳細] fileid1.gif 150件 [詳細] fileid1.css 129件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 22:35:48