#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)