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

#navi(../)
* ID属性を使って値を指定する方法 [#n4348631]
以下のようにCSSを設定すればid属性として値を指定する事ができます。
 #ID { ... }

要素名#ID { .... }

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

#contents
#htmlinsertpcsp(web-top.html,web-sp.html)

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

** CSSソース [#z39a3309]
#ref(id1.css)
 #sample1 {
   color: white;
   background: blue;
 }
 #sample2 {
   color: white;
   background: red;
 }

** HTMLソース [#j6f200f1]
上記、IDを指定したCSSをh1で使用した例になります。
#ref(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 [#q19d9949]
以下のリンクから上記のCSSおよびHTMLによるブラウザ表示を確認できます。

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

** スクリーンショット [#vce5a08d]
#ref(id1.gif)

* 要素#ID { ... } を試す [#l0ac7dba]
要素#IDのサンプルを以下に記します。~
div#header, div#container, div#contents, div#footerを設定しています。

** CSSソース [#w15a2830]
#ref(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ソース [#w0e76b0f]

#ref(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>

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

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

** スクリーンショット [#cf3e70f0]
#ref(id2.gif)

#htmlinsertpcsp(web-btm.html,web-sp.html)

タイムスタンプを変更しない